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 1062900 of Firefox Developer Tools

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

Revision Content

Examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile
Install Firefox Developer Edition

What's new in Firefox Developer Edition?

Firefox Developer Edition is a version of Firefox tailored for developers, featuring the latest Firefox features and experimental developer tools. The current Developer Edition includes these updates to the developer tools:

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.
Web Audio Editor
Examine the graph of audio nodes in an audio context, and modify their parameters.

Exploring and debugging

Examine, explore, and debug websites and web apps.

Console
See messages logged by a web page and interact with the page using JavaScript.
Page Inspector
View and modify a page in 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.
Storage Inspector
Inspect cookies, local storage, indexedDB, and session storage present in a page.
DOM Inspector
Inspect the page's DOM properties, functions, etc.
Developer Toolbar
A command-line interface for the developer tools.
Eyedropper
Select a color from the page.
about:debugging
A dashboard to debug add-ons and workers
Working with iframes
How to target a particular iframe.

Mobile

Tools for mobile development.

Responsive Design Mode
See how your website or app will look on different screen sizes without changing the size of your browser window.
App Manager
App Manager has been replaced by WebIDE.
WebIDE
Create, edit, run, and debug web apps using the Firefox OS Simulator or a real Firefox OS device. WebIDE is the replacement for the App Manager, available from Firefox 33 onwards.
Firefox OS Simulator
Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.
Debugging on Firefox for Android
Connect the developer tools to Firefox for Android.
Debugging Firefox for Android with WebIDE
For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.
Valence
Connect the developer tools to Chrome on Android and Safari on iOS

Performance

Diagnose and fix performance problems.

Performance Tool
Analyze your site's general responsiveness, JavaScript, and layout performance.
Memory
Figure out which objects are keeping memory in use.
Frame rate graph
See the frame rate for your site.
Waterfall
Figure out what the browser is doing as it runs your site.
Call Tree
Figure out where your JavaScript code is spending its time.
Flame Chart
See which functions are on the stack over the course of a performance profile.
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 by add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox
Attach the Developer Tools to the browser itself.

Extending the devtools

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.

Add a new panel to the devtools
Write an add-on that adds a new panel to the Toolbox.
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.
The Debugger Interface
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
Web Console custom output
How to extend and customize the output of the Web Console and the Browser Console.
Example devtools add-ons
Use these examples to understand how to implement a devtools add-on.

More resources

This section lists resources which are not currently 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", "Team info|https://wiki.mozilla.org/DevTools|Dev tools wiki|Designs and plans for the dev tools||Blog|https://hacks.mozilla.org/|Hacks blog|Hacks blog", "FirefoxDevTools", "firefox-developer-tools")}}
  1. Creating
    1. Scratchpad
    2. Style Editor
    3. Shader Editor
    4. Web Audio Editor
  2. Debugging
    1. Page Inspector
    2. Console
    3. Debugger
    4. Network Monitor
    5. Storage Inspector
    6. DOM Property Viewer
    7. Developer Toolbar
    8. 3D View
    9. Eyedropper
    10. about:debugging
    11. Selecting iframes
    12. View Source
  3. Mobile
    1. Responsive Design Mode
    2. WebIDE
    3. Firefox for Android
    4. Firefox OS Simulator
  4. Performance
    1. Performance Tool
    2. Memory
    3. Frame rate graph
    4. Waterfall
    5. Call Tree
    6. Flame Chart
    7. Paint Flashing Tool
    8. Reflow Event Logging
    9. Network Performance
  5. Debugging the browser
    1. Browser Console
    2. Browser Toolbox
  6. 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
  7. Settings
  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"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;" target="_">Install Firefox Developer Edition</a>

<h3 id="What's_new_in_Firefox_Developer_Edition">What's new in Firefox Developer Edition?</h3>

<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> is a version of Firefox tailored for developers, featuring the latest Firefox features and experimental developer tools. The current Developer Edition includes these updates to the developer tools:</p>

<ul>
 <li><a href="/en-US/docs/Tools/Storage_Inspector#Editing_storage_items">Edit stored items in the Storage Inspector</a></li>
 <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">Memory tool treemap view</a></li>
 <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements by dragging them around the page</a></li>
 <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">See HTTP request details in the Web Console </a></li>
 <li><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li>
 <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Animation inspector updates for Web Animations API</a></li>
 <li><a href="/en-US/docs/Tools/Settings#Choose_DevTools_theme">Firebug theme</a></li>
</ul>
</div>

<p><img alt="" src="https://mdn.mozillademos.org/files/10529/inspector.png" style="display:block; height:467px; margin-left:auto; margin-right:auto; width:815px" /></p>

<div class="column-container">
<div class="column-half">
<h2 id="Creating">Creating</h2>

<p>Authoring tools for websites and web apps.</p>

<dl>
 <dt><a href="/en-US/docs/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">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>
 <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
 <dd>Examine the graph of audio nodes in an audio context, and modify their parameters.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Exploring_and_debugging">Exploring and debugging</h2>

<p>Examine, explore, and debug websites and web apps.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Web_Console">Console</a></dt>
 <dd>See messages logged by a web page and interact with the page using JavaScript.</dd>
 <dt><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></dt>
 <dd>View and modify a page in HTML and CSS.</dd>
 <dt><a href="/en-US/docs/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">Network Monitor</a></dt>
 <dd>See the network requests made when a page is loaded.</dd>
 <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
 <dd>Inspect cookies, local storage, indexedDB, and session storage present in a page.</dd>
 <dt><a href="/en-US/docs/Tools/DOM_Inspector">DOM Inspector</a></dt>
 <dd>Inspect the page's DOM properties, functions, etc.</dd>
 <dt><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></dt>
 <dd>A command-line interface for the developer tools.</dd>
 <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
 <dd>Select a color from the page.</dd>
 <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt>
 <dd>A dashboard to debug add-ons and workers</dd>
 <dt><a href="/en-US/docs/Tools/Working_with_iframes">Working with iframes</a></dt>
 <dd>How to target a particular iframe.</dd>
</dl>
</div>
</div>

<hr />
<div class="column-container">
<div class="column-half">
<h2 id="Mobile">Mobile</h2>

<p>Tools for mobile development.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</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/Firefox_OS/Using_the_App_Manager">App Manager</a></dt>
 <dd>App Manager has been replaced by <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</dd>
 <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt>
 <dd>Create, edit, run, and debug web apps using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> or a real Firefox OS device. WebIDE is the replacement for the App Manager, available from Firefox 33 onwards.</dd>
 <dt><a href="/en-US/docs/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/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt>
 <dd>Connect the developer tools to Firefox for Android.</dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a></dt>
 <dd>For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.</dd>
 <dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt>
 <dd>Connect the developer tools to Chrome on Android and Safari on iOS</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Performance">Performance</h2>

<p>Diagnose and fix performance problems.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Performance">Performance Tool</a></dt>
 <dd>Analyze your site's general responsiveness, JavaScript, and layout performance.</dd>
 <dt><a href="/en-US/docs/Tools/Memory">Memory</a></dt>
 <dd>Figure out which objects are keeping memory in use.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt>
 <dd>See the frame rate for your site.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
 <dd>Figure out what the browser is doing as it runs your site.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
 <dd>Figure out where your JavaScript code is spending its time.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
 <dd>See which functions are on the stack over the course of a performance profile.</dd>
 <dt><a href="/en-US/docs/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/Console_messages#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">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">Browser Console</a></dt>
 <dd>See messages logged by the browser itself and by add-ons, and run JavaScript code in the browser's scope.</dd>
 <dt><a href="/en-US/docs/Tools/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_devtools">Extending the devtools</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="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt>
 <dd>Write an add-on that adds a new panel to the Toolbox.</dd>
 <dt><a href="https://wiki.mozilla.org/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">Source Editor</a></dt>
 <dd>A code editor built into Firefox that can be embedded in your add-on.</dd>
 <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
 <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt>
 <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
 <dt><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt>
 <dd>Use these examples to understand how to implement a devtools add-on.</dd>
</dl>
</div>
</div>

<hr />
<h2 id="More_resources">More resources</h2>

<p>This section lists resources which are not currently 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/">“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/">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/Tools/Add-ons/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/">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/">Webmaker Tools</a></dt>
 <dd>A set of tools developed by Mozilla, aimed at people getting started with Web development.</dd>
 <dt><a href="https://www.w3.org/Status.html">W3C Validators</a></dt>
 <dd>The W3C website hosts a number of tools to check the validity of your website, including its <a href="https://validator.w3.org/" title="https://validator.w3.org/">HTML</a> and <a href="https://jigsaw.w3.org/css-validator/" title="https://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
 <dt><a href="https://www.jshint.com/">JSHint</a></dt>
 <dd>JavaScript code analysis tool.</dd>
</dl>
</div>
</div>

<hr />
<div>{{CommunityBox("Developer tools", "dev-developer-tools", "mozilla.dev.developer-tools", "devtools", "Team info|https://wiki.mozilla.org/DevTools|Dev tools wiki|Designs and plans for the dev tools||Blog|https://hacks.mozilla.org/|Hacks blog|Hacks blog", "FirefoxDevTools", "firefox-developer-tools")}}</div>

<h2 id="Subnav">Subnav</h2>

<ol>
 <li><a href="#">Creating</a>

  <ol>
   <li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
   <li><a href="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
   <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></li>
   <li><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></li>
  </ol>
 </li>
 <li><a href="#">Debugging</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
   <li><a href="/en-US/docs/Tools/Web_Console">Console</a></li>
   <li><a href="/en-US/docs/Tools/Debugger">Debugger</a></li>
   <li><a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li>
   <li><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></li>
   <li><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li>
   <li><a href="/en-US/docs/Tools/GCLI">Developer Toolbar</a></li>
   <li><a href="/en-US/docs/Tools/3D_View">3D View</a></li>
   <li><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></li>
   <li><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></li>
   <li><a href="/en-US/docs/tools/Working_with_iframes">Selecting iframes</a></li>
   <li><a href="/en-US/docs/Tools/View_source">View Source</a></li>
  </ol>
 </li>
 <li><a href="#">Mobile</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a></li>
   <li><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></li>
   <li><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Firefox for Android</a></li>
   <li><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></li>
  </ol>
 </li>
 <li><a href="#">Performance</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Performance">Performance Tool</a></li>
   <li><a href="/en-US/docs/Tools/Memory">Memory</a></li>
   <li><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate graph</a></li>
   <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></li>
   <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></li>
   <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></li>
   <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li>
   <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Reflow_events">Reflow Event Logging</a></li>
   <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></li>
  </ol>
 </li>
 <li><a href="#">Debugging the browser</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></li>
   <li><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></li>
  </ol>
 </li>
 <li><a href="#">Extending the devtools</a>
  <ol>
   <li><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Adding a panel to the toolbox</a></li>
   <li><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></li>
   <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></li>
   <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol_Stream_Transport">Stream Transport</a></li>
   <li><a href="/en-US/docs/Tools/Editor">Source Editor</a></li>
   <li><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></li>
   <li><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></li>
  </ol>
 </li>
 <li><a href="/en-US/docs/Tools/Settings">Settings</a></li>
 <li><a href="/en-US/docs/Tools/Release_notes">Release notes</a></li>
</ol>
Revert to this revision