CINXE.COM

<!DOCTYPE html> <html class="writer-html5" lang="en" data-content_root="../../"> <head> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>The Firefox JavaScript Debugger — Firefox Source Docs documentation</title> <link rel="stylesheet" type="text/css" href="../../_static/pygments.css?v=fa44fd50" /> <link rel="stylesheet" type="text/css" href="../../_static/css/theme.css?v=19f00094" /> <link rel="stylesheet" type="text/css" href="../../_static/graphviz.css?v=fd3f3429" /> <link rel="stylesheet" type="text/css" href="../../_static/copybutton.css?v=76b2166b" /> <link rel="stylesheet" type="text/css" href="../../_static/custom_theme.css?v=a7d3e023" /> <link rel="stylesheet" type="text/css" href="../../_static/design-style.1e8bd061cd6da7fc9cf755528e8ffc24.min.css?v=0a3b3ea7" /> <link rel="shortcut icon" href="../../_static/firefox.ico"/>  <script src="../../_static/jquery.js?v=5d32c60e"></script> <script src="../../_static/_sphinx_javascript_frameworks_compat.js?v=2cd50e6c"></script> <script src="../../_static/documentation_options.js?v=5929fcd5"></script> <script src="../../_static/doctools.js?v=9a2dae69"></script> <script src="../../_static/sphinx_highlight.js?v=dc90522c"></script> <script src="../../_static/clipboard.min.js?v=a7894cd8"></script> <script src="../../_static/copybutton.js?v=30646c52"></script> <script src="../../_static/design-tabs.js?v=36754332"></script> <script src="../../_static/js/theme.js"></script> <link rel="index" title="Index" href="../../genindex.html" /> <link rel="search" title="Search" href="../../search.html" /> </head> <body class="wy-body-for-nav"> <div class="wy-grid-for-nav"> <nav data-toggle="wy-nav-shift" class="wy-nav-side"> <div class="wy-side-scroll"> <div class="wy-side-nav-search" > <a href="../../index.html" class="icon icon-home"> Firefox Source Docs <img src="../../_static/firefox-wordmark.svg" class="logo" alt="Logo"/> </a><! -- This code is governed by the BSD license --> <div> <h3>Quick search</h3> <script> (function () { var cx = "dd12886298f75dbef"; var gcse = document.createElement("script"); gcse.async = true; gcse.src = "https://cse.google.com/cse.js?cx=" + cx; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:search></gcse:search> </div> </div><div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="Navigation menu"> <p class="caption" role="heading"><span class="caption-text">Overview</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../glossary/index.html">A Glossary of Common Terms</a></li> <li class="toctree-l1"><a class="reference internal" href="../../overview/index.html">A Quick Guide to Mozilla Applications</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Getting Started</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../setup/index.html">Getting Set Up To Work On The Firefox Codebase</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Working On Firefox</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../contributing/index.html">Working on Firefox</a></li> <li class="toctree-l1"><a class="reference internal" href="../../bug-mgmt/index.html">Bug Handling</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Firefox User Guide</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../index.html">Firefox DevTools User Docs</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Source Code Documentation</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../mots/index.html">Governance</a></li> <li class="toctree-l1"><a class="reference internal" href="../../browser/index.html">Firefox Front-end</a></li> <li class="toctree-l1"><a class="reference internal" href="../../dom/index.html">DOM</a></li> <li class="toctree-l1"><a class="reference internal" href="../../editor/index.html">Editor</a></li> <li class="toctree-l1"><a class="reference internal" href="../../layout/index.html">Style system (CSS) & Layout</a></li> <li class="toctree-l1"><a class="reference internal" href="../../gfx/index.html">Graphics</a></li> <li class="toctree-l1"><a class="reference internal" href="../../ipc/index.html">Processes, Threads and IPC</a></li> <li class="toctree-l1"><a class="reference internal" href="../../devtools/index.html">Firefox DevTools Contributor Docs</a></li> <li class="toctree-l1"><a class="reference internal" href="../../toolkit/index.html">Toolkit</a></li> <li class="toctree-l1"><a class="reference internal" href="../../js/index.html">SpiderMonkey</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mobile/android/geckoview/index.html">GeckoView</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mobile/android/fenix/index.html">Fenix</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mobile/android/focus-android/index.html">Focus for Android</a></li> <li class="toctree-l1"><a class="reference internal" href="../../dom/bindings/webidl/index.html">WebIDL</a></li> <li class="toctree-l1"><a class="reference internal" href="../../modules/libpref/index.html">libpref</a></li> <li class="toctree-l1"><a class="reference internal" href="../../networking/index.html">Networking</a></li> <li class="toctree-l1"><a class="reference internal" href="../../remote/index.html">Remote Protocols</a></li> <li class="toctree-l1"><a class="reference internal" href="../../services/index.html">Services</a></li> <li class="toctree-l1"><a class="reference internal" href="../../uriloader/index.html">File Handling</a></li> <li class="toctree-l1"><a class="reference internal" href="../../widget/cocoa/index.html">Firefox on macOS</a></li> <li class="toctree-l1"><a class="reference internal" href="../../widget/windows/index.html">Firefox on Windows</a></li> <li class="toctree-l1"><a class="reference internal" href="../../toolkit/components/ml/index.html">Firefox AI Platform</a></li> <li class="toctree-l1"><a class="reference internal" href="../../accessible/index.html">Accessibility</a></li> <li class="toctree-l1"><a class="reference internal" href="../../code-quality/index.html">Code quality</a></li> <li class="toctree-l1"><a class="reference internal" href="../../writing-rust-code/index.html">Writing Rust Code</a></li> <li class="toctree-l1"><a class="reference internal" href="../../rust-components/index.html">Rust Components</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/profiler/index.html">Gecko Profiler</a></li> <li class="toctree-l1"><a class="reference internal" href="../../performance/index.html">Performance</a></li> <li class="toctree-l1"><a class="reference internal" href="../../storage/index.html">Database bindings (SQLite, KV, …)</a></li> <li class="toctree-l1"><a class="reference internal" href="../../xpcom/index.html">XPCOM</a></li> <li class="toctree-l1"><a class="reference internal" href="../../nspr/index.html">NSPR</a></li> <li class="toctree-l1"><a class="reference internal" href="../../security/nss/index.html">Network Security Services (NSS)</a></li> <li class="toctree-l1"><a class="reference internal" href="../../content-security/index.html">Web Security Checks in Gecko</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">The Firefox Build System</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../mach/index.html">Mach</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/try/index.html">Pushing to Try</a></li> <li class="toctree-l1"><a class="reference internal" href="../../build/buildsystem/index.html">Build System</a></li> <li class="toctree-l1"><a class="reference internal" href="../../taskcluster/index.html">Firefox CI and Taskgraph</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/moztreedocs/index.html">Managing Documentation</a></li> <li class="toctree-l1"><a class="reference internal" href="../../mozbuild/vendor/index.html">Vendoring Third Party Components</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Testing & Test Infrastructure</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../testing/automated-testing/index.html">Automated Testing</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/treeherder-try/index.html">Understanding Treeherder Results</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/sheriffed-intermittents/index.html">Sheriffed intermittent failures</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/tests-for-new-config/index.html">Turning on Firefox tests for a new configuration</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/intermittent/index.html">Avoiding intermittent tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/testing-policy/index.html">Testing Policy</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/ci-configs/index.html">Configuration Changes</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/browser-chrome/index.html">Browser chrome mochitests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/chrome-tests/index.html">Chrome Tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/marionette/index.html">Marionette</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/geckodriver/index.html">geckodriver</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/test-verification/index.html">Test Verification</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/webrender/index.html">WebRender Tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/mochitest-plain/index.html">Mochitest</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/xpcshell/index.html">XPCShell tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/tps/index.html">TPS</a></li> <li class="toctree-l1"><a class="reference internal" href="../../web-platform/index.html">web-platform-tests</a></li> <li class="toctree-l1"><a class="reference internal" href="../../gtest/index.html">GTest</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/fuzzing/index.html">Fuzzing</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/sanitizer/index.html">Sanitizer</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing/perfdocs/index.html">Performance Testing</a></li> <li class="toctree-l1"><a class="reference internal" href="../../tools/code-coverage/index.html">Code coverage</a></li> <li class="toctree-l1"><a class="reference internal" href="../../testing-rust-code/index.html">Testing & Debugging Rust Code</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Releases & Updates</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../update-infrastructure/index.html">Mozilla Update Infrastructure</a></li> <li class="toctree-l1"><a class="reference internal" href="../../update-infrastructure/index.html#watershed-updates">Watershed Updates</a></li> <li class="toctree-l1"><a class="reference internal" href="../../update-infrastructure/index.html#desupport-updates">Desupport Updates</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Localization & Internationalization</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../intl/index.html">Internationalization</a></li> <li class="toctree-l1"><a class="reference internal" href="../../l10n/index.html">Localization</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Firefox and Python</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../mozbase/index.html">mozbase</a></li> <li class="toctree-l1"><a class="reference internal" href="../../python/index.html">Using third-party Python packages</a></li> </ul> <p class="caption" role="heading"><span class="caption-text">Metrics Collected in Firefox</span></p> <ul> <li class="toctree-l1"><a class="reference internal" href="../../metrics/index.html">Metrics</a></li> </ul> </div> </div> </nav> <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap"><nav class="wy-nav-top" aria-label="Mobile navigation menu" > <i data-toggle="wy-nav-top" class="fa fa-bars"></i> <a href="../../index.html">Firefox Source Docs</a> </nav> <div class="wy-nav-content"> <div class="rst-content"> <div role="navigation" aria-label="Page navigation"> <ul class="wy-breadcrumbs"> <li><a href="../../index.html" class="icon icon-home" aria-label="Home"></a></li> <li class="breadcrumb-item active">The Firefox JavaScript Debugger</li> <li class="wy-breadcrumbs-aside"> <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Developer+Infrastructure&component=Firefox+Source+Docs%3A+Content&short_desc=Documentation+issue+on+devtools-user/debugger/index&comment=URL+=+https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html&bug_file_loc=https://firefox-source-docs.mozilla.org/devtools-user/debugger/index.html" rel="nofollow" >Report an issue</a > / <a href="../../_sources/devtools-user/debugger/index.rst.txt" rel="nofollow"> View page source</a > </li> </ul> <hr/> </div> <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article"> <div itemprop="articleBody"> <section id="the-firefox-javascript-debugger"> <h1>The Firefox JavaScript Debugger<a class="headerlink" href="#the-firefox-javascript-debugger" title="Link to this heading">¶</a></h1> <p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/QK4hKWmJVLo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br/> <br/><p>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 <a class="reference internal" href="../about_colon_debugging/index.html"><span class="doc">about debugging</span></a> to learn how to connect the debugger to a remote target.</p> <p>To find your way around the debugger, here’s a <a class="reference internal" href="ui_tour/index.html"><span class="doc">quick tour of the UI</span></a>.</p> <section id="how-to"> <h2>How to<a class="headerlink" href="#how-to" title="Link to this heading">¶</a></h2> <p>To find out what you can do with the debugger, refer to the following how-to guides.</p> <ul class="simple"> <li><p><a class="reference internal" href="how_to/open_the_debugger/index.html"><span class="doc">Open the debugger</span></a></p></li> <li><p><a class="reference internal" href="how_to/pretty-print_a_minified_file/index.html"><span class="doc">Pretty-print a minified file</span></a></p></li> <li><p><a class="reference internal" href="how_to/search/index.html"><span class="doc">Search</span></a></p></li> <li><p><a class="reference internal" href="how_to/use_a_source_map/index.html"><span class="doc">Use a source map</span></a></p></li> <li><p><a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#debugging_worker_threads">Debug worker threads</a></p></li> </ul> <section id="pause-execution"> <h3>Pause execution<a class="headerlink" href="#pause-execution" title="Link to this heading">¶</a></h3> <p>You probably want to pause the execution of your code, in order to see what is going on at various points. There are multiple ways to tell the Debugger how and when to pause:</p> <ul class="simple"> <li><p><a class="reference internal" href="how_to/set_a_breakpoint/index.html"><span class="doc">Set a breakpoint</span></a></p></li> <li><p><a class="reference internal" href="how_to/set_a_conditional_breakpoint/index.html"><span class="doc">Set a conditional breakpoint</span></a></p></li> <li><p><a class="reference internal" href="set_an_xhr_breakpoint/index.html"><span class="doc">Set an XHR breakpoint</span></a></p></li> <li><p><a class="reference internal" href="set_event_listener_breakpoints/index.html"><span class="doc">Set event listener</span></a></p></li> <li><p><a class="reference internal" href="how_to/breaking_on_exceptions/index.html"><span class="doc">Break on exceptions</span></a></p></li> <li><p><a class="reference internal" href="how_to/use_watchpoints/index.html"><span class="doc">Use watchpoints for property reads and writes</span></a></p></li> <li><p><a class="reference internal" href="break_on_dom_mutation/index.html"><span class="doc">Break on DOM Mutation</span></a></p></li> <li><p><a class="reference internal" href="how_to/disable_breakpoints/index.html"><span class="doc">Disable breakpoints</span></a></p></li> </ul> </section> <section id="control-execution"> <h3>Control execution<a class="headerlink" href="#control-execution" title="Link to this heading">¶</a></h3> <p>What can you do after execution pauses?</p> <ul class="simple"> <li><p><a class="reference internal" href="how_to/step_through_code/index.html"><span class="doc">Step through code</span></a></p></li> <li><p><a class="reference internal" href="how_to/ignoring_sources/index.html"><span class="doc">Ignoring sources</span></a></p></li> <li><p><a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#debugging_worker_threads">Debug worker threads</a></p></li> <li><p><a class="reference internal" href="how_to/debug_eval_sources/index.html"><span class="doc">Debug eval sources</span></a></p></li> </ul> </section> <section id="look-at-values"> <h3>Look at values<a class="headerlink" href="#look-at-values" title="Link to this heading">¶</a></h3> <p>You probably want to see the value of variables or expressions, either during execution or when it is paused.</p> <ul class="simple"> <li><p><a class="reference internal" href="set_a_logpoint/index.html"><span class="doc">Set a logpoint</span></a></p></li> <li><p><a class="reference internal" href="how_to/set_watch_expressions/index.html"><span class="doc">Set watch expressions</span></a></p></li> </ul> </section> </section> <section id="reference"> <h2>Reference<a class="headerlink" href="#reference" title="Link to this heading">¶</a></h2> <ul class="simple"> <li><p><a class="reference internal" href="../keyboard_shortcuts/index.html#keyboard-shortcuts-debugger"><span class="std std-ref">Keyboard shortcuts</span></a></p></li> <li><p><a class="reference internal" href="source_map_errors/index.html"><span class="doc">Source map errors</span></a></p></li> </ul> </section> </section> </div> </div> <footer> <hr/> <div role="contentinfo"> <p></p> </div> Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>. </footer> </div> </div> </section> </div> <script> jQuery(function () { SphinxRtdTheme.Navigation.enable(true); }); </script> </body> </html>