UI Tour

This article is a quick tour of the main sections of the JavaScript Debugger's user interface. The UI is split into six main sections, which we'll cover one at a time:

• Toolbar
• Source list pane
• Call stack pane
• Source pane
• Variables pane
• Events pane

Toolbar

The toolbar consists of four sections:

• a row of buttons to control movement through a script
• a visualisation of the call stack
• the script filter
• buttons to:
  • expand/collapse the variables and events panes
  • control debugger settings

The four buttons on the left perform the following functions:

• Pause/Resume (F8): pauses or resumes execution of the script you're debugging. When it's blue and "pressed", as above, that means the script is paused, either because you've paused it with this button or because you've hit a breakpoint.
• Step Over (F10): steps across the current line of JavaScript code.
• Step Into (F11): steps into the function call on the current line of JavaScript code.
• Step Out (Shift-F11): runs the script until the current function exits.

The call stack visualisation shows the call stack at the point execution is paused.

Source list pane

The source list pane lists all the JS source files loaded into the page, and enables you to select one to debug. The source list pane shares its screen real estate with the call stack pane, and you can use the tabs at the top of the pane to switch between them.

Source files are grouped under different headings according to where they are loaded from. You can select any of these files and they will be loaded into the Source pane.

Any breakpoints you've set in a source file are listed in the source list pane under the filename. The check box next to each breakpoint lets you enable/disable it. Right-clicking on the breakpoint's entry in the list shows a context menu enabling you to:

• enable, disable or remove this breakpoint, all breakpoints, or all breakpoints except this one
• make this breakpoint conditional (or edit its conditions, if it is already conditional)

The three icons at the bottom of the source list pane enable you to black box a source, pretty-print minified JS files, and disable/enable all breakpoints.

There's a context menu for items in the source list, which enables you to copy the URL from which they were served, or to open the URL in a new tab:

Call stack pane

The other tab on the left-hand side of the debugger displays a vertical call stack:

Each row represents a level in the call stack, with the current stack frame on top. The row shows the name of the function currently executing, and a link to its source file and line number.

Source pane

This shows the JavaScript file currently loaded. Breakpoints have a blue arrow overlaid on the line number, while breakpoints you've hit have a green arrow:

In the source pane, the context menu enables you to:

• set a breakpoint
• set a conditional breakpoint
• add a watch expression for the selection
• search or filter using the script filter

Starting in Firefox 44, you can jump from a function call to its definition. Just hold the control key (command key on Mac OS X) and click the function's name.

Variables popup

If you hover the mouse over a variable in the source pane, a popup appears showing you that variable's current value:

This enables you to get a quick look at a variable without having to open and search the variables pane.

Variables pane

The variables pane is where you can examine and modify the internal state of the script as it's executing:

The variables pane shares its screen real estate with the events pane, and you can use the tabs at the top of the pane to switch between them.

Events pane

The events pane lists all DOM events that currently have listeners bound from your code:

It shares its screen real estate with the variables pane, and you can use the tabs at the top of the pane to switch between them.

It groups events by type. The screenshot above shows four types: Interaction, Keyboard, Mouse, and Navigation. Under each type it lists all events which have listeners in your code, with the following syntax:

[event name] on [event target] in [source file]

If you check the checkbox next to the event, the debugger will break at the first line of the event's listener. If you check the checkbox next to the event type, then the debugger will break for any of the events listed under that type.