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:
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 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)
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.
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.
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.
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.
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.