• 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 (before Firefox 52)

Debugger (before Firefox 52)

This page describes the JavaScript Debugger as it appears before Firefox 52.

See what it looks like from Firefox 52 onwards.

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 in a Firefox OS device or Firefox on Android. See remote debugging to learn how to connect the debugger to a remote target.


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
  • Disable breakpoints
  • Step through code
  • Break on a DOM event
  • Highlight and inspect DOM nodes
  • Pretty-print a minified file
  • Search and filter
  • Set a conditional breakpoint
  • Examine, modify, and watch variables
  • Use a source map
  • Black box a source
  • Debug eval sources
  • Access debugging in add-ons

Reference

  • Keyboard shortcuts
  • Settings

Document Tags and Contributors

 Contributors to this page: wbamberg
 Last updated by: wbamberg, Nov 16, 2016, 2:19:56 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