Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 723987 of Debugger

  • Revision slug: Tools/Debugger
  • Revision title: Debugger
  • Revision id: 723987
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment
Tags: 

Revision Content

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
 

 

Revision Source

 
<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><iframe allowfullscreen="" frameborder="0" height="360" src="https://www.youtube.com/embed/sK8KU8oiF8s/?feature=player_detailpage" width="640"></iframe></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="column-container">
<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">Break on a DOM event</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></dt>
 <dd>&nbsp;</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">Search and filter</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Black box a source</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></dt>
 <dd>&nbsp;</dd>
 <dt><a href="/en-US/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></dt>
 <dd>&nbsp;</dd>
</dl>
</div>
</div>

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

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></dt>
 <dd>&nbsp;</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Debugger/Settings">Settings</a></dt>
 <dd>&nbsp;</dd>
</dl>
</div>
</div>

<p>&nbsp;</p>
Revert to this revision