This article is a quick tour of the main sections of the JavaScript Debugger's user interface. The UI is split vertically into three panels

Source list pane

The source list pane lists all the JavaScript source files loaded into the page, and enables you to select one to debug. At the top level sources are organized by origin, and under that they're organized by the directory structure from which they are served.

You can search for a file using Ctrl + P (Cmd + P on a Mac).

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.

Outline View

The Outline view shows a tree for navigating the currently open file. Use it to jump directly to a function, class or method definition.

Source pane

This shows the JavaScript file currently loaded.

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 19 has a normal breakpoint
  • line 40 has a normal breakpoint, and the debugger is paused there
  • line 22 has a conditional breakpoint.


At the top of the right-hand pane, there's a toolbar:

The toolbar consists of:

Breakpoints list

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:



Call stack

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.

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,