Debugging scripts

The Sources panel allows you to debug the JavaScript code used by your webpage. By allowing you to set breakpoints and to step through your code, the Web Inspector can help to locate and correct problems within your code. When you determine that the script is functioning as intended, you can copy the changes back into the source file.

To use the Sources panel, you must first enable debugging. Web Inspector prompts you to enable debugging when you first view the Sources panel; you can choose to enable debugging for just the current session, or to always enable debugging.

The Sources panel

You can click the Sources icon in the toolbar to display the Sources panel. If you have not already enabled debugging, the Web Inspector prompts you to do so.

Screen showing the Sources panel

The Sources panel is divided into two sections. On the left is the document pane, which allows you to view and debug JavaScript. On the right is a set of collapsible panes which display information related to the displayed script.

A toolbar at the top of the Sources panel allows you to choose the script file you want to inspect and to cycle between open scripts. It also provides a set of controls that allow you to step through the script displayed in the document pane.

Set and use breakpoints

  1. Click the Sources icon on the toolbar to display the Sources panel.
  2. In the line gutter of the document pane, click the line at which you want to set a breakpoint. A breakpoint marker appears in the line gutter, and the new breakpoint is added to the Breakpoints pane, identified by the script filename and line number. The execution of the script pauses at the specified breakpoint.
  3. Perform any of the following actions:
    • To continue the execution of the script beyond the current breakpoint, click the Continue button in the Sources panel toolbar.
    • To display the line of code associated with breakpoint in the documents pane, click the breakpoint entry in the Breakpoints pane. The document pane displays and highlights the associated line.
    • To disable a single breakpoint without removing it, in the Breakpoints pane, uncheck the break point. The execution of the script no longer pauses at the disabled breakpoint.
    • To deactivate or activate all the breakpoints listed in the Breakpoints pane without removing them, toggle the breakpoint activation switch at the right side of the Scripts panel toolbar.
    • To remove a breakpoint, locate and click the breakpoint marker in the line gutter of the document pane. The marker no longer appears in the line gutter, and the breakpoint is removed from the Breakpoints pane.

Pause script execution

You can pause the script at any time to get a snapshot of the call stack and variable values.

  1. Click the Sources icon on the toolbar to display the Sources panel.
  2. In the Sources panel toolbar, click the Pause button.

When the script pauses, the last line of JavaScript to be executed is highlighted. The call stack and the current in-scope variable values appear in the appropriate panes at the right of the panel.

Pause script execution on exceptions

You can configure Web Inspector to pause the execution of scripts whenever exceptions are thrown. A tri-state toggle allows you to specify whether to pause for all exceptions, only for uncaught exceptions, or to not pause for any exceptions.

  1. Click the Sources icon on the toolbar to display the Sources panel.
  2. Use the Exceptions button in the status bar at the bottom of the Web Inspector window to choose one of the following behaviors:
    • To pause on all exceptions, click the Exceptions button until the icon turns blue.
    • To pause only on uncaught exceptions, click the Exceptions button until the icon turns red.
    • To not pause on any exceptions, click the Exceptions button until the icon turns gray.

Last modified: 2014-03-10

comments powered by Disqus