• 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

Debugger

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.

The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.

You can use it to debug code running locally in Firefox or running remotely, for example on an Android device running Firefox for Android. See remote debugging to learn how to connect the debugger to a remote target.

The debugger ships inside Firefox, and these pages describe how to use the version that's embedded in Firefox. However, you can also run it as a standalone web application, and can then use it to debug code running in other browsers and in Node. For more details on that, see the project's GitHub repository.

The new debugger doesn't — yet — support all the features of the old debugger. See Limitations of the new debugger.


User Interface Tour

To find your way around the debugger, here's a quick tour of the UI.


How to

To find out what you can do with the debugger, see the following how-to guides:

  • Open the debugger
  • Set a breakpoint
  • Set a conditional breakpoint
  • Disable breakpoints
  • Step through code
  • Breaking on exceptions
  • Setting watch expressions
  • Pretty-print a minified file
  • Search
  • Debug eval sources
  • Use a source map

Reference

  • Keyboard shortcuts

Document Tags and Contributors

Tags: 
  • Debugger
  • Debugging
  • Dev Tools
  • Firefox OS
  • l10n:priority
  • Tools
 Contributors to this page: dustindriver, joshyule, wbamberg, tylerpeters22, goosutoo, DevAsh, Eskat2424, xfq, jmdyck, EmilyG, Newser, Dymos, TotalAMD, fscholz, kittkatt, marian1991, radkodinev, past, tehsis, jryans, vimal_2812, fitzgen, Luke314, gsvelto, Sheppy, dangoor
 Last updated by: dustindriver, May 10, 2017, 9:24:15 AM
  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