If you're using Firefox 52 or later and need to switch back to the old Debugger, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to
- Source list pane
- Source pane
- A third pane which is subdivided into four sections:
Source list pane
You can search for a file using Ctrl + P (Cmd + P on a Mac).
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 5 has a normal breakpoint
- line 8 has a normal breakpoint, and the debugger is paused there
- line 10 has a conditional breakpoint.
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 to disable all breakpoints
- a button to control whether to (1) ignore all exceptions, (2) break on uncaught exceptions, or (3) break on all exceptions.
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:
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. The screenshot above shows the following call stack:
launch()-> diff()-> diff_match_patch.prototype.diff_main()
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.