mozilla

Revision 530677 of Firefox Developer Tools

  • Revision slug: Tools
  • Revision title: Firefox Developer Tools
  • Revision id: 530677
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment

Revision Content

Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile

Creating

Authoring tools for websites and web apps.

Scratchpad
A text editor built into Firefox that lets you write and execute JavaScript.
Style Editor
View and edit CSS styles for the current page.
Shader Editor
View and edit the vertex and fragment shaders used by WebGL.

Exploring and debugging

Examine, explore, and debug websites and web apps.

Web Console
See messages logged a web page, and interact with the page using JavaScript.
Page Inspector
View and modify the page HTML and CSS.
JavaScript Debugger
Stop, step through, examine and modify the JavaScript running in a page.
Network Monitor
See the network requests made when a page is loaded.
Developer Toolbar
A command-line interface for the developer tools.
3D View
3D visualization of the page.

Mobile

Tools for mobile development.

App Manager
Design and develop apps for Firefox OS.
Firefox OS Simulator
Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
Responsive Design View
See how your website or app will look on different screen sizes without changing the size of your browser window.
Debugging on Firefox for Android
Connect the developer tools to Firefox for Android.

Performance

Diagnose and fix performance problems.

JavaScript Profiler
Figure out where your JavaScript code is spending its time.
Paint Flashing Tool
Highlights the parts of the page that are repainted in response to events.
Reflow Event Logging
See reflow events in the web console.
Network Performance
See how long the parts of your site take to load.

Debugging the browser

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

Browser Console
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox
Attach the Developer Tools to the browser itself.

Extending the developer tools

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

Remote Debugging Protocol
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor
A code editor built into Firefox that can be embedded in your add-on.

More resources

This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the "Web Development" category on addons.mozilla.org.

Firebug
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
DOM Inspector
Inspect, browse, and edit the DOM of web pages or XUL windows.
Web Developer
Adds a menu and a toolbar to the browser with various web developer tools.
Webmaker Tools
A set of tools developed by Mozilla, aimed at people getting started with Web development.
W3C Validators
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
JSHint
JavaScript code analysis tool.

{{CommunityBox("Developer tools", "dev-developer-tools", "mozilla.dev.developer-tools", "devtools", "Other links|https://wiki.mozilla.org/DevTools|Dev tools wiki|Designs and plans for the dev tools")}}

  1. Creating
    1. Scratchpad
    2. Style Editor
    3. Shader Editor
  2. Debugging
    1. Page Inspector
    2. Web Console
    3. Debugger
    4. Network Monitor
    5. Developer Toolbar
    6. 3D View
  3. Mobile
    1. App Manager
    2. Firefox for Android
    3. Firefox OS Simulator
    4. Responsive Design View
  4. Performance
    1. Profiler
    2. Paint Flashing Tool
    3. Reflow Event Logging
    4. Network Performance
  5. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  6. Extending the devtools
    1. Remote Debugging Protocol
    2. Source Editor
  7. Standalone tools
    1. Browser Console
    2. Browser Toolbox
  8. Release notes

Revision Source

<div class="summary">
 <span class="seoSummary">Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile</span></div>
<div class="column-container zone-callout">
 <h3 id="What's_new_in_Aurora.3F"><a href="https://hacks.mozilla.org/2014/02/css-source-map-support-network-performance-analysis-more-firefox-developer-tools-episode-29/" title="Aurora Hacks post">What's new in Aurora?</a></h3>
 <p>The <a href="http://www.mozilla.org/en-US/firefox/aurora/" title="http://www.mozilla.org/en-US/firefox/aurora/">current Firefox Aurora release</a> is Firefox 29. These are the main updates to the developer tools:</p>
 <ul>
  <li><a href="/en-US/docs/Tools_Toolbox#Choose_DevTools_theme">Theme improvements</a>, including major updates to the light theme</li>
  <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Monitor performance analysis tool</a></li>
  <li><a href="/en-US/docs/Tools/Style_Editor#Source_map_support">CSS source maps</a></li>
  <li><a href="/en-US/docs/Tools/Page_Inspector#Selecting_elements">Changes in the way node selection works in the Inspector</a></li>
  <li><a href="/en-US/docs/Tools/Debugger#Call_stack_pane">Classic call stack</a> for the Debugger, and added the ability to <a href="/en-US/docs/Tools/Debugger#Highlight_and_inspect_DOM_nodes">highlight and inspect nodes</a></li>
  <li><a href="/en-US/docs/Tools/Using_the_Source_Editor#Alternative_key_mappings">Emacs and Vim keybindings in the source editor</a></li>
 </ul>
</div>
<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="width: 815px; height: 467px; margin-right: auto; margin-left: auto; display: block;" /></p>
<div class="column-container">
 <div class="column-half">
  <h2 id="Creating" name="Creating">Creating</h2>
  <p>Authoring tools for websites and web apps.</p>
  <dl>
   <dt>
    <a href="/en-US/docs/Tools/Scratchpad" title="Tools/Scratchpad">Scratchpad</a></dt>
   <dd>
    A text editor built into Firefox that lets you write and execute JavaScript.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Style_Editor" title="Tools/Style_Editor">Style Editor</a></dt>
   <dd>
    View and edit CSS styles for the current page.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></dt>
   <dd>
    View and edit the vertex and fragment shaders used by <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
  </dl>
 </div>
 <div class="column-half">
  <h2 id="Exploring" name="Exploring">Exploring and debugging</h2>
  <p>Examine, explore, and debug websites and web apps.</p>
  <dl>
   <dt>
    <a href="/en-US/docs/Tools/Web_Console" title="Tools/Web_Console">Web Console </a></dt>
   <dd>
    See messages logged a web page, and interact with the page using JavaScript.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Page Inspector</a></dt>
   <dd>
    View and modify the page HTML and CSS.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Debugger" title="Tools/Debugger">JavaScript Debugger</a></dt>
   <dd>
    Stop, step through, examine and modify the JavaScript running in a page.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Network_Monitor" title="Tools/Network_Monitor">Network Monitor</a></dt>
   <dd>
    See the network requests made when a page is loaded.</dd>
   <dt>
    <a href="/en-US/docs/Tools/GCLI" title="Developer Toolbar">Developer Toolbar</a></dt>
   <dd>
    A command-line interface for the developer tools.</dd>
   <dt>
    <a href="/en-US/docs/Tools/3D_View" title="Tools/3D_View">3D View</a></dt>
   <dd>
    3D visualization of the page.</dd>
  </dl>
 </div>
</div>
<div class="column-container">
 <div class="column-half">
  <h2 id="Mobile" name="Mobile">Mobile</h2>
  <p>Tools for mobile development.</p>
  <dl>
   <dt>
    <a href="/en-US/Firefox_OS/Using_the_App_Manager" title="App Manager">App Manager</a></dt>
   <dd>
    Design and develop apps for Firefox OS.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
   <dd>
    Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.</dd>
   <dt>
    <a href="/en-us/docs/Tools/Responsive_Design_View" title="/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt>
   <dd>
    See how your website or app will look on different screen sizes without changing the size of your browser window.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Firefox for Android">Debugging on Firefox for Android</a></dt>
   <dd>
    Connect the developer tools to Firefox for Android.</dd>
  </dl>
 </div>
 <div class="column-half">
  <h2 id="Performance" name="Performance">Performance</h2>
  <p>Diagnose and fix performance problems.</p>
  <dl>
   <dt>
    <a href="/en-US/docs/Tools/Profiler" title="Tools/Profiler">JavaScript Profiler</a></dt>
   <dd>
    Figure out where your JavaScript code is spending its time.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
   <dd>
    Highlights the parts of the page that are repainted in response to events.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Web_Console#Reflow_events" title="Reflow events">Reflow Event Logging</a></dt>
   <dd>
    See reflow events in the web console.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis" title="Network performance">Network Performance</a></dt>
   <dd>
    See how long the parts of your site take to load.</dd>
  </dl>
 </div>
</div>
<hr />
<div class="column-container">
 <div class="column-half">
  <h2 id="Debugging_the_browser">Debugging the browser</h2>
  <p>By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.</p>
  <dl>
   <dt>
    <a href="/en-US/docs/Tools/Browser_Console" title="Browser Console">Browser Console</a></dt>
   <dd>
    See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></dt>
   <dd>
    Attach the Developer Tools to the browser itself.</dd>
  </dl>
 </div>
 <div class="column-half">
  <h2 id="Extending_the_Developer_Tools">Extending the developer tools</h2>
  <p>The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.</p>
  <dl>
   <dt>
    <a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="Remote Debugging Protocol">Remote Debugging Protocol</a></dt>
   <dd>
    The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd>
   <dt>
    <a href="/en-US/docs/Tools/Editor" title="Source Editor">Source Editor</a></dt>
   <dd>
    A code editor built into Firefox that can be embedded in your add-on.</dd>
  </dl>
 </div>
</div>
<hr />
<h2 id="More_resources">More resources</h2>
<p>This section lists resources which aren't maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/" title="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">"Web Development" category on addons.mozilla.org</a>.</p>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="https://www.getfirebug.com/" title="Firebug">Firebug</a></dt>
   <dd>
    A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.</dd>
   <dt>
    <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></dt>
   <dd>
    Inspect, browse, and edit the DOM of web pages or XUL windows.</dd>
   <dt>
    <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="Web-Developer">Web Developer</a></dt>
   <dd>
    Adds a menu and a toolbar to the browser with various web developer tools.</dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="https://webmaker.org/en-US/tools/" title="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
   <dd>
    A set of tools developed by Mozilla, aimed at people getting started with Web development.</dd>
   <dt>
    <a href="http://www.w3.org/Status.html" title="W3C">W3C Validators</a></dt>
   <dd>
    The W3C website hosts a number of tools to check the validity of your website, including its <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> and <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
   <dt>
    <a href="http://www.jshint.com/" title="JSHint">JSHint</a></dt>
   <dd>
    JavaScript code analysis tool.</dd>
  </dl>
 </div>
</div>
<hr />
<p>{{CommunityBox("Developer tools", "dev-developer-tools", "mozilla.dev.developer-tools", "devtools", "Other links|https://wiki.mozilla.org/DevTools|Dev tools wiki|Designs and plans for the dev tools")}}</p>
<h2 id="Subnav">Subnav</h2>
<ol>
 <li><a href="#">Creating</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li>
   <li><a href="/en-US/docs/Tools/Style_Editor" title="Style Editor">Style Editor</a></li>
   <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></li>
  </ol>
 </li>
 <li><a href="#">Debugging</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Page Inspector</a></li>
   <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a></li>
   <li><a href="/en-US/docs/Tools/Debugger" title="Debugger">Debugger</a></li>
   <li><a href="/en-US/docs/Tools/Network_Monitor" title="Network Monitor">Network Monitor</a></li>
   <li><a href="/en-US/docs/Tools/GCLI" title="GCLI">Developer Toolbar</a></li>
   <li><a href="/en-US/docs/Tools/3D_View" title="3D View">3D View</a></li>
  </ol>
 </li>
 <li><a href="#">Mobile</a>
  <ol>
   <li><a href="/en-US/Firefox_OS/Using_the_App_Manager" title="App Manager">App Manager</a></li>
   <li><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Debugging Firefox for Android">Firefox for Android</a></li>
   <li><a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Firefox OS Simulator">Firefox OS Simulator</a></li>
   <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="Responsive Design View">Responsive Design View</a></li>
  </ol>
 </li>
 <li><a href="#">Performance</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Profiler" title="Profiler">Profiler</a></li>
   <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Paint Flashing Tool">Paint Flashing Tool</a></li>
   <li><a href="/en-US/docs/Tools/Web_Console#Reflow_events" title="Reflow event logging">Reflow Event Logging</a></li>
   <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis" title="Network Performance">Network Performance</a></li>
  </ol>
 </li>
 <li><a href="#">Debugging the browser</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Browser_Console" title="Browser Console">Browser Console</a></li>
   <li><a href="/en-US/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></li>
  </ol>
 </li>
 <li><a href="#">Extending the devtools</a>
  <ol>
   <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="Remote Debugging Protocol">Remote Debugging Protocol</a></li>
   <li><a href="/en-US/docs/Tools/Editor" title="Source Editor">Source Editor</a></li>
  </ol>
 </li>

 <li><a href="#">Standalone tools</a>
  <ol>
   
   <li><a href="/en-US/docs/Tools/Browser_Console" title="Browser Console">Browser Console</a></li>
   
   
   <li><a href="/en-US/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></li>
  </ol>
 </li>
 <li><a href="/en-US/docs/Tools/Release_notes">Release notes</a></li>
</ol>
Revert to this revision