With the Salvation Army website open in Google Chrome, right-click anywhere on the page and select Inspect Element.
Select the Scripts tab to make that the active panel; by default, the application.js file opens as displayed in Figure B.
Click to enlarge.
There are several items to note on navigating through the Scripts Panel, and they are listed here and highlighted in Figure C below.
- Backwards and forwards history buttons
- Drop-down list of scripts
- Pause, resume, and step through code controls
- Pause on exceptions toggle includes options:
- Don’t pause on exceptions
- Pause on all exceptions
- Pause on uncaught exceptions
You can set one or many breakpoints in one or many scripts by selecting the line gutter to set a breakpoint for a particular line of code; then, you can select another script and set another breakpoint and so on as shown in Figure E. Notice on the right panel the breakpoints that you set now appear with checked boxes.
Clicking on any one of the entries will jump the left side panel to that line of code and will temporarily highlight that line as displayed in Figure F.
Once you have a breakpoint set, you can right-click on the blue tag breakpoint indicator in the gutter line to set a conditional statement for that particular breakpoint. Type any expression and the breakpoint will pause only if the condition is true. Delete a breakpoint by clicking the blue tag breakpoint indicator. The breakpoint indicator has several states: Continue To Here, Remove Breakpoint, Edit Breakpoint, Disable Breakpoint, and Save As… which will save the *.js file, as shown in Figure G.
With the “jquery.js” file selected, pause the script and then you can view the current call stack and the associated in-scope variables in the right-hand side bar, as displayed in Figure H.
The list of keyboard shortcuts available in the Scripts panel includes:
- Continue: F8 or Command-/ (forward slash) on Mac or Control-/ (forward slash) on other platforms.
- Step over: F10 or Command-‘ (apostrophe) on Mac or Control-‘ (apostrophe) on other platforms.
- Step into: F11 or Command-; (semi-colon) on Mac or Control-; (semi-colon); on other platforms.
- Step out: Shift-F11 or Shift-Command-; (semi-colon) on Mac or Shift-Control-; (semi-colon) on other platforms.
- Next call frame: Control-. (period) on all platforms.
- Previous call frame: Control-, (comma) on all platforms.