Compare Revisions

Firefox Developer Tools

Revision 466911:

Revision 466911 by n1tr0g3n on

Revision 470309:

Revision 470309 by wbamberg on

Title:
Firefox Developer Tools
Firefox Developer Tools
Slug:
Tools
Tools
Tags:
"Tools","NeedsMarkupWork","Developing Mozilla","Web Development:Tools","NeedsTechnicalReview","Web Development"
"Tools","NeedsMarkupWork","Developing Mozilla","Web Development:Tools","NeedsTechnicalReview","Web Development"
Content:

Revision 466911
Revision 470309
n7    <p>n7    <div class="summary">
8      The Firefox Developer Tools enable you to analyze and debug8      Analyze and debug websites and web apps on Firefox Desktop,
> websites and web apps on <a href="http://www.mozilla.org/en-US/f> Firefox OS, and Firefox for Android
>irefox/fx/#desktop" title="http://www.mozilla.org/en-US/firefox/f 
>x/#desktop">Firefox Desktop</a>, <a href="http://www.mozilla.org/ 
>en-US/firefox/os/" title="http://www.mozilla.org/en-US/firefox/os 
>/">Firefox OS</a>, and <a href="http://www.mozilla.org/en-US/fire 
>fox/fx/#mobile" title="http://www.mozilla.org/en-US/firefox/fx/#m 
>obile">Firefox for Android</a>. 
9    </p>9    </div>
10    <p>10    <div class="column-container zone-callout">
11      <img alt="" src="https://mdn.mozillademos.org/files/6041/fi
>refox-developer-tools.png" style="width: 800px; height: 584px; di 
>splay: block; margin-left: auto; margin-right: auto;">You can use 
> them to <a href="/en-US/docs/Tools/Page_Inspector" title="/en-US 
>/docs/Tools/Page_Inspector">examine and edit HTML and CSS</a>, to 
> <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/De 
>bugger">debug JavaScript</a>, and to <a href="/en-US/docs/Tools/W 
>eb_Console#The_command_line_interpreter" title="/en-US/docs/Tools 
>/Web_Console#The_command_line_interpreter">run JavaScript in the  
>page</a>. You can use them to <a href="/en-US/docs/Tools/Network_ 
>Monitor" title="/en-US/docs/Tools/Network_Monitor">see network re 
>quests</a> that your browser makes as well as any <a href="/en-US 
>/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Ja 
>vaScript and CSS warnings and errors</a> that it encounters when  
>loading a page. You can use them to <a href="/en-US/docs/Tools/Pr 
>ofiler" title="/en-US/docs/Tools/Profiler">debug performance prob 
>lems with your site</a>.<br> 
12      <br>
13      The tools aren't just for debugging on desktop Firefox. The
>y're built using a <a href="https://wiki.mozilla.org/Remote_Debug 
>ging_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_P 
>rotocol">client-server protocol</a> that enables a tool running o 
>n the desktop to <a href="/en-US/docs/Tools/Remote_Debugging" tit 
>le="/en-US/docs/Tools/Remote_Debugging">debug code running on an  
>Android device running Firefox</a>, and will soon enable you to d 
>ebug code running on Firefox OS as well.<br> 
14      <br>
15      We've also provided some tools that specifically target mob
>ile development: the <a href="/en-US/docs/Tools/Responsive_Design 
>_View" title="/en-US/docs/Tools/Responsive_Design_View">Responsiv 
>e Design View</a> is a quick way to see how a site will look on a 
> small screen, and the <a href="/en-US/docs/Tools/Firefox_OS_Simu 
>lator" title="/en-US/docs/https://developer.mozilla.org/en-US/doc 
>s/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> lets you r 
>un and debug a Firefox OS app on the desktop without needing to u 
>se a real Firefox OS device. 
16    </p>
17    <p>
18      Finally, the developer tools are extensible by design. Fire
>fox add-ons can access the debugger API, so you can build your ow 
>n developer tools that extend and enhance the built-in tools. Wit 
>h the <a href="https://wiki.mozilla.org/Remote_Debugging_Protocol 
>" title="https://wiki.mozilla.org/Remote_Debugging_Protocol">remo 
>te debugging protocol</a> you can implement your own debugging cl 
>ients and servers, enabling you to debug websites using your own  
>tools or to debug different targets using the Firefox tools. 
19    </p>
20    <div class="geckoVersionNote">
21      <h3 id=".C2.A0What's_new_in_Aurora.3F">11      <h3 id="What's_new_in_Aurora.3F">
22        <a href="https://hacks.mozilla.org/2013/08/new-features-o12        <a href="https://hacks.mozilla.org/2013/08/new-features-o
>f-firefox-developer-tools-episode-25/" title="https://hacks.mozil>f-firefox-developer-tools-episode-25/" title="https://hacks.mozil
>la.org/2013/08/new-features-of-firefox-developer-tools-episode-25>la.org/2013/08/new-features-of-firefox-developer-tools-episode-25
>/">&nbsp;What's new in Aurora?</a>>/">What's new in Aurora?</a>
23      </h3>
24      <p>
25        The <a href="http://www.mozilla.org/en-US/firefox/aurora/13      </h3>The <a href="http://www.mozilla.org/en-US/firefox/auro
>" title="http://www.mozilla.org/en-US/firefox/aurora/">current Au>ra/" title="http://www.mozilla.org/en-US/firefox/aurora/">current
>rora release</a> is Firefox 25, and includes these new features:> Aurora release</a> is Firefox 25, and includes these new feature
 >s:
26      </p>
n29          <p>n
30            <a href="/en-US/docs/Tools/Debugger#Black_box_a_sourc16          <a href="/en-US/docs/Tools/Debugger#Black_box_a_source"
>e" title="/en-US/docs/Tools/Debugger#Black_box_a_source">block bo> title="/en-US/docs/Tools/Debugger#Black_box_a_source">block box 
>x libraries</a> in the JavaScript debugger>libraries</a> in the JavaScript debugger
31          </p>
32        </li>
33        <li>17        </li>
34          <p>
35            edit and replay network requests18        <li>edit and replay network requests
36          </p>
37        </li>
38        <li>19        </li>
39          <p>
40            CSS autocompletion in the Inspector20        <li>CSS autocompletion in the Inspector
41          </p>
42        </li>
43        <li>21        </li>
44          <p>
45            import and export profile data22        <li>import and export profile data
46          </p>
n50    <div class="cleared topicpage-table">n26    <div class="column-container">
27      <p>
28        <img alt="" src="https://mdn.mozillademos.org/files/6111/
 >debugger-800.png" style="width: 800px; height: 360px; display: bl
 >ock; margin-left: auto; margin-right: auto;">You can use the deve
 >loper tools to <a href="/en-US/docs/Tools/Page_Inspector" title="
 >/en-US/docs/Tools/Page_Inspector">examine and edit HTML and CSS</
 >a>, to <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/To
 >ols/Debugger">debug JavaScript</a>, and to <a href="/en-US/docs/T
 >ools/Web_Console#The_command_line_interpreter" title="/en-US/docs
 >/Tools/Web_Console#The_command_line_interpreter">run JavaScript i
 >n the page</a>. You can use them to <a href="/en-US/docs/Tools/Ne
 >twork_Monitor" title="/en-US/docs/Tools/Network_Monitor">see netw
 >ork requests</a> that your browser makes as well as any <a href="
 >/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Conso
 >le">JavaScript and CSS warnings and errors</a> that it encounters
 > when loading a page. You can use them to <a href="/en-US/docs/To
 >ols/Profiler" title="/en-US/docs/Tools/Profiler">debug performanc
 >e problems with your site</a>.
29      </p>
30      <p>
31        You can use the developer tools to <a href="/en-US/docs/T
 >ools/Remote_Debugging" title="/en-US/docs/Tools/Remote_Debugging"
 >>debug code running Firefox for Android</a>, and soon, Firefox OS
 >. We've also provided tools that target mobile development: the <
 >a href="/en-US/docs/Tools/Responsive_Design_View" title="/en-US/d
 >ocs/Tools/Responsive_Design_View">Responsive Design View</a> is a
 > quick way to see how a site will look on a small screen, and the
 > <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/d
 >ocs/https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Sim
 >ulator">Firefox OS Simulator</a> lets you run and debug a Firefox
 > OS app on the desktop without needing to use a real Firefox OS d
 >evice.
32      </p>
33      <p>
34        Firefox add-ons can access the debugger API, so you can b
 >uild your own developer tools that extend and enhance the built-i
 >n tools. With the <a href="https://wiki.mozilla.org/Remote_Debugg
 >ing_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_Pr
 >otocol">remote debugging protocol</a> you can implement your own 
 >debugging clients and servers, enabling you to debug websites usi
 >ng your own tools or to debug different targets using the Firefox
 > tools.
35      </p>
36    </div>
37    <hr>
38    <div class="column-container">
51      <div class="section">39      <div class="column-strip">
52        <h2 class="Tools" id="Tools" name="Tools">40        <h2 id="Tools" name="Tools">
n96        <h2 class="Community" id="Community" name="Community">n84      </div>
85      <div class="column-strip">
86        <h2 id="Mobile">
n100          Of course, mobile web developers are web developers toon90          Of course, mobile web developers are web developers too
>, so the web development tools listed above are mostly interestin>, so most of the web development tools will be interesting to mob
>g to mobile web developer as well. But we've also created some to>ile web developers as well. But we've also created some tools spe
>ols specifically aimed at mobile development.>cifically aimed at mobile development.
n104            &nbsp;n
105          </dt>
106          <dt>
n126      <div class="section">n113      <div class="column-strip">
127        <h2 class="Related_Topics" id="Related_Topics" name="Rela114        <h2 id="Standalone_Tools">
>ted_Topics"> 
n164          <dt>n
165            &nbsp;
166          </dt>
167        </dl>
168        <h2 class="Documentation" id="Documentation" name="Docume
>ntation"> 
169          More Resources
170        </h2>
171        <p>
172          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, b 
>ut for the complete list see the <a href="https://addons.mozilla. 
>org/en-US/firefox/extensions/web-development/" title="https://add 
>ons.mozilla.org/en-US/firefox/extensions/web-development/">"Web D 
>evelopment" category on addons.mozilla.org</a>. 
173        </p>
174        <dl>
175          <dt>
176            &nbsp;
177          </dt>
178          <dt>
179            <a href="https://www.getfirebug.com/" title="Firebug"
>>Firebug</a> 
180          </dt>
181          <dd>
182            A very popular and powerful web development tool, inc
>luding a JavaScript debugger, HTML and CSS viewer and editor, and 
> network monitor. 
183          </dd>
184          <dt>
185            <a href="https://developer.mozilla.org/en-US/docs/DOM
>_Inspector" title="DOM_Inspector">DOM Inspector</a> 
186          </dt>
187          <dd>
188            Inspect, browse, and edit the DOM of web pages or XUL
> windows. 
189          </dd>
190          <dt>
191            <a href="https://addons.mozilla.org/en-US/firefox/add
>on/web-developer/" title="Web-Developer">Web Developer</a> 
192          </dt>
193          <dd>
194            Adds a menu and a toolbar to the browser with various
> web developer tools. 
195          </dd>
196          <dt>
197            <a href="https://webmaker.org/en-US/tools/" title="ht
>tps://webmaker.org/en-US/tools/">Webmaker Tools</a> 
198          </dt>
199          <dd>
200            A set of tools developed by Mozilla, aimed at people 
>getting started with Web development. 
201          </dd>
202          <dt>
203            <a href="http://www.w3.org/Status.html" title="W3C">W
>3C Validators</a> 
204          </dt>
205          <dd>
206            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>. 
207          </dd>
208          <dt>
209            <a href="http://www.jshint.com/" title="JSHint">JSHin
>t</a> 
210          </dt>
211          <dd>
212            JavaScript code analysis tool.
213          </dd>
nn154    <hr>
155    <h2 id="More_resources">
156      More resources
157    </h2>
158    <p>
159      This section lists resources which aren't maintained by Moz
 >illa's developer tools team, but which are widely used by web dev
 >elopers. We've included a few Firefox add-ons in this list, but f
 >or 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 Devel
 >opment" category on addons.mozilla.org</a>.
160    </p>
161    <dl>
162      <dt>
163        <a href="https://www.getfirebug.com/" title="Firebug">Fir
 >ebug</a>
164      </dt>
165      <dd>
166        A very popular and powerful web development tool, includi
 >ng a JavaScript debugger, HTML and CSS viewer and editor, and net
 >work monitor.
167      </dd>
168      <dt>
169        <a href="https://developer.mozilla.org/en-US/docs/DOM_Ins
 >pector" title="DOM_Inspector">DOM Inspector</a>
170      </dt>
171      <dd>
172        Inspect, browse, and edit the DOM of web pages or XUL win
 >dows.
173      </dd>
174      <dt>
175        <a href="https://addons.mozilla.org/en-US/firefox/addon/w
 >eb-developer/" title="Web-Developer">Web Developer</a>
176      </dt>
177      <dd>
178        Adds a menu and a toolbar to the browser with various web
 > developer tools.
179      </dd>
180      <dt>
181        <a href="https://webmaker.org/en-US/tools/" title="https:
 >//webmaker.org/en-US/tools/">Webmaker Tools</a>
182      </dt>
183      <dd>
184        A set of tools developed by Mozilla, aimed at people gett
 >ing started with Web development.
185      </dd>
186      <dt>
187        <a href="http://www.w3.org/Status.html" title="W3C">W3C V
 >alidators</a>
188      </dt>
189      <dd>
190        The W3C website hosts a number of tools to check the vali
 >dity 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>.
191      </dd>
192      <dt>
193        <a href="http://www.jshint.com/" title="JSHint">JSHint</a
 >>
194      </dt>
195      <dd>
196        JavaScript code analysis tool.
197      </dd>
198    </dl>
199    <hr>
tt206    <h2 id="Subnav">
207      Subnav
208    </h2>
209    <ol>
210      <li>
211        <a href="/en-US/docs/Tools/Toolbox">Toolbox</a>
212        <ol>
213          <li>
214            <a href="/en-US/docs/Tools/Page_Inspector" title="Too
 >ls/Page_Inspector">Page Inspector</a>
215          </li>
216          <li>
217            <a href="/en-US/docs/Tools/Web_Console" title="Web Co
 >nsole">Web Console</a>
218          </li>
219          <li>
220            <a href="/en-US/docs/Tools/Style_Editor" title="Style
 > Editor">Style Editor</a>
221          </li>
222          <li>
223            <a href="/en-US/docs/Tools/Debugger" title="Debugger"
 >>Debugger</a>
224          </li>
225          <li>
226            <a href="/en-US/docs/Tools/Profiler" title="Profiler"
 >>Profiler</a>
227          </li>
228          <li>
229            <a href="/en-US/docs/Tools/Network_Monitor" title="Ne
 >twork Monitor">Network Monitor</a>
230          </li>
231        </ol>
232      </li>
233      <li>
234        <a href="#">Mobile</a>
235        <ol>
236          <li>
237            <a href="/en-US/docs/Tools/Remote_Debugging" title="R
 >emote Debugging">Remote Debugging</a>
238          </li>
239          <li>
240            <a href="/en-US/docs/Tools/Firefox_OS_Simulator" titl
 >e="Firefox OS Simulator">Firefox OS Simulator</a>
241          </li>
242          <li>
243            <a href="/en-us/docs/Tools/Responsive_Design_View" ti
 >tle="Responsive Design View">Responsive Design View</a>
244          </li>
245        </ol>
246      </li>
247      <li>
248        <a href="#">Standalone tools</a>
249        <ol>
250          <li>
251            <a href="/en-US/docs/Tools/Scratchpad" title="Scratch
 >pad">Scratchpad</a>
252          </li>
253          <li>
254            <a href="/en-us/docs/Tools/Browser_Console" title="Br
 >owser Console">Browser Console</a>
255          </li>
256          <li>
257            <a href="/en-US/docs/Tools/GCLI" title="GCLI">Develop
 >er Toolbar</a>
258          </li>
259          <li>
260            <a href="/en-US/docs/Tools/3D_View" title="3D View">3
 >D View</a>
261          </li>
262          <li>
263            <a href="/en-US/docs/Tools/Paint_Flashing_Tool" title
 >="Paint Flashing Tool">Paint Flashing Tool</a>
264          </li>
265          <li>
266            <a href="/en-US/docs/Tools/Network_Monitor" title="Ne
 >twork Monitor">Network Monitor</a>
267          </li>
268        </ol>
269      </li>
270    </ol>

Back to History