---
title: Debugger
slug: Tools/Debugger
translation_of: Tools/Debugger
---
<div>{{ToolsSidebar}}</div><p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p>

<p>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 <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p>

<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p>

<hr>
<h2 id="User_Interface_Tour">User Interface Tour</h2>

<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p>

<hr>
<h2 id="How_to">How to</h2>

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

<div class="twocolumns">
<ul>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">Break on a DOM event</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">Search and filter</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Black box a source</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></li>
</ul>
</div>

<hr>
<h2 id="Reference">Reference</h2>

<div class="twocolumns">
<ul>
 <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li>
 <li><a href="/en-US/docs/Tools/Debugger/Settings">Settings</a></li>
</ul>
</div>