• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Firefox Developer Tools
  1. MDN
  2. Firefox Developer Tools
  3. Debugger
  4. UI Tour

UI Tour

In This Article
  1. Source list pane
  2. Source pane
  3. Toolbar
  4. Breakpoints list
  5. Call stack
  6. Scopes

This page describes the JavaScript Debugger as it appears in Firefox 52 and above, in Firefox Nightly and Firefox Developer Edition.

To see what it's like in earlier versions of Firefox or in Firefox Beta and Release, see Debugger (before Firefox 52).

If you are getting this version of the Debugger and need to switch back to the old version, you can do so by visiting about:config and setting the "devtools.debugger.new-debugger-frontend" preference to false.

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
  • Source pane
  • A third pane which is subdivided into four sections:
    • Toolbar
    • Breakpoints list
    • Call stack
    • Scopes

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

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.

Toolbar

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 over (F10): steps across the current line of JavaScript code.
    • Step in (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.
  • a button to control whether to (1) ignore all exceptions, (2) break on uncaught exceptions, or (3) break on all exceptions.

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.

Scopes

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

 Contributors to this page: dustindriver, wbamberg, moshiur82, maximelore
 Last updated by: dustindriver, Apr 26, 2017, 4:19:39 PM
  1. Core Tools
    1. Page Inspector
    2. Web Console
    3. JavaScript Debugger
    4. Network Monitor
    5. Performance
    6. Responsive Design Mode
    7. Tips
  2. More Tools
    1. Memory
    2. Storage Inspector
    3. DOM Property Viewer
    4. Developer Toolbar
    5. Eyedropper
    6. Screenshot
    7. Scratchpad
    8. Style Editor
    9. Shader Editor
    10. Web Audio Editor
  3. Connecting the devtools
    1. about:debugging
    2. Connecting to Firefox for Android
    3. Connecting to iframes
    4. Connecting to other browsers
  4. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  5. Extending the devtools
    1. Adding a panel to the toolbox
    2. Example devtools add-ons
    3. Remote Debugging Protocol
    4. Stream Transport
    5. Source Editor
    6. The Debugger Interface
    7. Web Console custom output
  6. Settings
  7. Release notes