- Source list pane
- Source pane
- The contents of the third pane depend on the current state of the debugger and may include the following sections:
Source list pane
You can search for a file using Ctrl + P (Cmd + P on a Mac).
Web Extensions are listed in the Source List pane using the extension's name rather than its id beginning with Firefox 69.
You can simplify the list of files in the Source list pane by right-clicking on the directory in which you are interested and selecting Set directory root.
Now the root of the Source list pane is the root of the project, making for a much cleaner, easier to navigate display.
The Outline view shows a tree for navigating the currently open file. Use it to jump directly to a function, class or method definition.
When the source pane is focused you can search for a string in the file using Ctrl + F (Cmd + F on a Mac).
Breakpoints have a blue arrow overlaid on the line number. Conditional breakpoints have an orange arrow. If you're stopped at a breakpoint, the entire line gets a green overlay. In the screenshot below there are three breakpoints:
- line 82 has a normal breakpoint and execution is paused here
- line 85 has a logpoint which logs the contents of tablerow to the console
- line 100 has a conditional breakpoint
The third column shows more information about the breakpoints. For example, the logpoint at line 85 logs the value of the tableRow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todoList is undefined.
At the top of the right-hand pane, there's a toolbar:
The toolbar consists of:
- Four buttons to control the debugger's movement through the script:
- Play/pause (F8): pauses or resumes execution of the script you're debugging. When it displays a "play" icon, 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.
- a button that can be used to deactivate all breakpoints
Under the toolbar, you'll see all the breakpoints you've set. Next to each breakpoint is a checkbox which you can use to enable/disable it:
You can add watch expressions in the right pane. They will be evaluated when code execution is paused:
Hover on a variable show a tooltip with its value inside:
When the debugger's paused, you'll see a call stack:
Each level of the call stack gets a line, with the name of the function and the filename and line number. Clicking the line opens that source in the source pane.
In the right-hand pane you'll see a label "Scopes" with a disclosure arrow next to it. When the debugger's paused, you'll be able to expand this section to see all objects that are in scope at this point in the program:
Objects are organized by scope: the most local appears first, and the global scope (Window, in the case of page scripts) appears last.