The Google Chrome Scripts Panel allows you to debug JavaScript code that is attached to active websites. In this demonstration, I will be using The Salvation Army website (Figure A), to view and manipulate the associated JavaScript files. All told, the website includes thirteen *.js files and I will only demonstrate functionality with a few of the associated script files.

Figure A

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.

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

Figure C

The partial drop-down list for this example is displayed in Figure D. Notice that several scripts are organized under the /javascripts directory; several are located under another directory named /WebManager/themes/20/javascript, and so on.

Figure D

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.

Figure E

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.

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.

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.

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.