Firefox Developer Tools

  • Revision slug: Tools
  • Revision title: Developer Tools
  • Revision id: 457141
  • Created:
  • Creator: sriharsha
  • Is current revision? No
  • Comment

Revision Content

This page lists tools that help you develop and debug websites and web apps. It's focused mostly on the tools developed and maintained at Mozilla, but we've listed other popular and useful tools under "More Resources".

ToolBOX

The Toolbox provides a single home for most of the developer tools that are built into Firefox.

Page Inspector
View and modify the HTML and CSS for the selected element.
Web Console
See informational, warning and error messages emitted by the browser loading a web page, and examine and manipulate the page using JavaScript.
Style Editor
View and edit CSS styles for the current page.
JavaScript Debugger
Step through JavaScript code that is running in the browser and watch variables to help track down bugs.
JavaScript Profiler
Use the profiler to figure out where your JavaScript code is spending its time.
Network Monitor
Inspect all the network requests that are made when a page is loaded, and how long they take to execute.
Remote Debugging
Use the developer tools to debug your Android device over USB.

Other DEVELOPER Tools

This section lists tools developed and maintained by Mozilla's Developer Tools team that aren't hosted in the toolbox. Most of these tools are built into Firefox, but the Firefox OS Simulator ships as an add-on.

Scratchpad
A text editor built into Firefox that lets you write and execute JavaScript.
Responsive Design View
See how your website or app will look on different screen sizes without changing the size of your browser window.
Browser Console
See messages from all JavaScript code running in the browser including content, chrome, and add-ons. Execute JavaScript code in the chrome window's context.
Developer Toolbar
A command-line interface to manipulate and work with the developer tools in Firefox, and buttons for quick access to the most commonly used tools.
Error Console
Reports JavaScript-related errors and warnings, CSS errors and arbitrary messages from chrome and web content. This tool is deprecated in favor of the Web Console and Browser Console tools.
3D View
Also known as "Tilt", this provides a 3D visualisation of the current page.
Paint Flashing Tool
The paint flashing tool highlights the part of the browser window that are repainted in response to events, helping to diagnose potential performance problems with your site.
Firefox OS Simulator
Run and debug your Firefox OS app on the desktop, without needing to use a real Firefox OS device.

Getting help

If you have any questions about the developer tools built into Firefox, please come and ask us on the dev-developer-tools mailing list or in the #devtools channel on Mozilla's IRC network.

Get Involved

To find out how you can help us build better developer tools, visit the wiki page for the Developer Tools team.

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.
JSLint
Another JavaScript code analysis tool.

 

 

Revision Source

<p>This page lists tools that help you develop and debug websites and web apps. It's focused mostly on the tools developed and maintained at Mozilla, but we've listed other popular and useful tools under "More Resources".</p>
<div class="cleared topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Documentation" name="Documentation">ToolBOX</h2>
    <p>The <a href="/en-US/docs/Tools/Toolbox" title="/en-US/docs/Tools/Toolbox">Toolbox</a> provides a single home for most of the developer tools that are built into Firefox.</p>
    <dl>
      <dt>
        <a href="/en-US/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Page Inspector</a></dt>
      <dd>
        View and modify the HTML and CSS for the selected element.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Web_Console" title="Tools/Web_Console">Web Console </a></dt>
      <dd>
        See informational, warning and error messages emitted by the browser loading a web page, and examine and manipulate the page using 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/Debugger" title="Tools/Debugger">JavaScript Debugger</a></dt>
      <dd>
        Step through JavaScript code that is running in the browser and watch variables to help track down bugs.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Profiler" title="Tools/Profiler">JavaScript Profiler</a></dt>
      <dd>
        Use the profiler to figure out where your JavaScript code is spending its time.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Network_Monitor" title="Tools/Network_Monitor">Network Monitor</a></dt>
      <dd>
        Inspect all the network requests that are made when a page is loaded, and how long they take to execute.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Remote_Debugging" title="Tools/Remote_Debugging">Remote Debugging</a></dt>
      <dd>
        Use the developer tools to debug your Android device over USB.</dd>
    </dl>
    <h2 class="Documentation" id="Documentation" name="Documentation">Other DEVELOPER Tools</h2>
    <p>This section lists tools developed and maintained by Mozilla's Developer Tools team that aren't hosted in the toolbox. Most of these tools are built into Firefox, but the <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> ships as an add-on.</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/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/Browser_Console" title="/en-us/docs/Tools/Responsive_Design_View">Browser Console</a></dt>
      <dd>
        See messages from all JavaScript code running in the browser including content, chrome, and add-ons. Execute JavaScript code in the chrome window's context.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI" title="en/Tools/GCLI">Developer Toolbar</a></dt>
      <dd>
        A command-line interface to manipulate and work with the developer tools in Firefox, and buttons for quick access to the most commonly used tools.</dd>
      <dt>
        <a href="https://developer.mozilla.org/en-US/docs/Error_Console" title="en/Error_Console">Error Console</a></dt>
      <dd>
        Reports JavaScript-related errors and warnings, CSS errors and arbitrary messages from chrome and web content. This tool is deprecated in favor of the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a> and <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browser Console</a> tools.</dd>
      <dt>
        <a href="/en-US/docs/Tools/3D_View" title="Tools/3D_View">3D View</a></dt>
      <dd>
        Also known as "Tilt", this provides a 3D visualisation of the current page.</dd>
      <dt>
        <a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
      <dd>
        The paint flashing tool highlights the part of the browser window that are repainted in response to events, helping to diagnose potential performance problems with your site.</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 to use a real Firefox OS device.</dd>
    </dl>
  </div>
  <div class="section">
    <h2 class="Community" id="Community" name="Community">Getting help</h2>
    <p>If you have any questions about the developer tools built into Firefox, please come and ask us on the <a href="https://lists.mozilla.org/listinfo/dev-developer-tools" title="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> mailing list or in the <a href="http://mibbit.com/?channel=%23devtools&amp;server=irc.mozilla.org">#devtools</a> channel on <a href="http://irc.mozilla.org/">Mozilla's IRC network</a>.</p>
    <h2 class="Community" id="Community" name="Community">Get Involved</h2>
    <p>To find out how you can help us build better developer tools, visit the <a href="https://wiki.mozilla.org/DevTools" title="https://wiki.mozilla.org/DevTools">wiki page for the Developer Tools team</a>.</p>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">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>
    <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="https://developer.mozilla.org/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>
      <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>
      <dt>
        <a href="http://www.jslint.com/" title="JSLint">JSLint</a></dt>
      <dd>
        Another JavaScript code analysis tool.</dd>
    </dl>
    <p>&nbsp;</p>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision