Revision 429575 of Firefox Developer Tools

  • Revision slug: Tools
  • Revision title: Developer Tools
  • Revision id: 429575
  • Created:
  • Creator: Qmralzman
  • 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".

MOZILLA DEVELOPER Tools

This section lists tools developed and maintained by Mozilla's Developer Tools team. These tools are all accessed from within Firefox, under the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer".

Most of these tools are built into Firefox and are accessible through the DevTools Window, but the Firefox OS Simulator ships as an add-on.

Page Inspector

Web Console

Style Editor

Scratchpad

JavaScript Debugger

JavaScript Profiler

Responsive Design View

Developer Toolbar

Error Console

3D View

Firefox OS Simulator

View and modify the HTML and CSS for the selected element.
See informational, warning and error messages emitted by the browser or web content, and examine and manipulate the page using JavaScript.
View and edit CSS styles for the current page.
A text editor built into Firefox that lets you write and execute JavaScript.
Step through JavaScript code that is running in the browser and watch variables to help track down bugs.
Use the profiler to figure out where your JavaScript code is spending its time.
See how your website or app will look on different screen sizes without changing the size of your browser window.
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.
Reports JavaScript-related errors and warnings, CSS errors and arbitrary messages from chrome and web content.
Also known as "Tilt", this provides a 3D visualisation of the current page.
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.

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

DOM Inspector

Web Developer

Webmaker Tools

W3C Validators

JSHint

JSLint

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

 

 

Revision Source

<div class="warning">
  <div class="note">
    <div class="geckoVersionNote">
      <div class="twocolumns">
        <div class="syntaxbox">
          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".</div>
      </div>
    </div>
  </div>
</div>
<div>
  <div>
    <h2 id="MOZILLA_DEVELOPER_Tools"><span style="background-color:#add8e6;">MOZILLA DEVELOPER Tools</span></h2>
    <p>This section lists tools developed and maintained by Mozilla's Developer Tools team. These tools are all accessed from within Firefox, under the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer".</p>
    <p>Most of these tools are built into Firefox and are accessible through the <a href="/en-US/docs/Tools/Toolbox" title="/en-US/docs/Tools/Toolbox">DevTools Window</a>, 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>
    <h2 id="Page_Inspector"><a href="/en-US/docs/Tools/Page_Inspector" title="HTML/Element">Page Inspector</a></h2>
    <h2 id="Web_Console_"><a href="/en-US/docs/Tools/Web_Console" title="HTML/Attributes">Web Console </a></h2>
    <h2 id="Style_Editor"><a href="/en-US/docs/Tools/Style_Editor" title="HTML/HTML5">Style Editor</a></h2>
    <h2 id="Scratchpad"><a href="/en-US/docs/Tools/Scratchpad" title="HTML/Forms">Scratchpad</a></h2>
    <h2 id="JavaScript_Debugger"><a href="/en-US/docs/Tools/Debugger" title="HTML/Bad_copy_pasting_habits">JavaScript Debugger</a></h2>
    <h2 id="JavaScript_Profiler"><a href="/en-US/docs/Tools/Profiler" title="HTML/Bad_copy_pasting_habits">JavaScript Profiler</a></h2>
    <h2 id="Responsive_Design_View"><a href="/en-us/docs/Tools/Responsive_Design_View" title="/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></h2>
    <h2 id="Developer_Toolbar"><a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI" title="en/Tools/GCLI">Developer Toolbar</a></h2>
    <h2 id="Error_Console"><a href="https://developer.mozilla.org/en-US/docs/Error_Console" title="en/Error_Console">Error Console</a></h2>
    <h2 id="3D_View"><a href="/en-US/docs/Tools/3D_View" title="en/Error_Console">3D View</a></h2>
    <h2 id="Firefox_OS_Simulator"><a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="en/Error_Console">Firefox OS Simulator</a></h2>
    <dl>
      <dd>
        View and modify the HTML and CSS for the selected element.</dd>
      <dd>
        See informational, warning and error messages emitted by the browser or web content, and examine and manipulate the page using JavaScript.</dd>
      <dd>
        View and edit CSS styles for the current page.</dd>
      <dd>
        A text editor built into Firefox that lets you write and execute JavaScript.</dd>
      <dd>
        Step through JavaScript code that is running in the browser and watch variables to help track down bugs.</dd>
      <dd>
        Use the profiler to figure out where your JavaScript code is spending its time.</dd>
      <dd>
        See how your website or app will look on different screen sizes without changing the size of your browser window.</dd>
      <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>
      <dd>
        Reports JavaScript-related errors and warnings, CSS errors and arbitrary messages from chrome and web content.</dd>
      <dd>
        Also known as "Tilt", this provides a 3D visualisation of the current page.</dd>
      <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="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>
    <h2 id="Firebug"><a href="https://www.getfirebug.com/" title="HTML/Forms">Firebug</a></h2>
    <h2 id="DOM_Inspector"><a href="https://developer.mozilla.org/en-US/docs/DOM_Inspector" title="HTML/Forms">DOM Inspector</a></h2>
    <h2 id="Web_Developer"><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="HTML/Forms">Web Developer</a></h2>
    <h2 id="Webmaker_Tools"><a href="https://webmaker.org/en-US/tools/" title="https://webmaker.org/en-US/tools/">Webmaker Tools</a></h2>
    <h2 id="W3C_Validators"><a href="http://www.w3.org/Status.html" title="HTML/Forms">W3C Validators</a></h2>
    <h2 id="JSHint"><a href="http://www.jshint.com/" title="HTML/Forms">JSHint</a></h2>
    <h2 id="JSLint"><a href="http://www.jslint.com/" title="HTML/Forms">JSLint</a></h2>
    <dl>
      <dd>
        A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.</dd>
      <dd>
        Inspect, browse, and edit the DOM of web pages or XUL windows.</dd>
      <dd>
        Adds a menu and a toolbar to the browser with various web developer tools.</dd>
      <dd>
        A set of tools developed by Mozilla, aimed at people getting started with Web development.</dd>
      <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>
      <dd>
        JavaScript code analysis tool.</dd>
      <dd>
        Another JavaScript code analysis tool.</dd>
    </dl>
    <p>&nbsp;</p>
  </div>
</div>
<p>&nbsp;</p>
Revert to this revision