Compare Revisions

Firefox Developer Tools

Change Revisions

Revision 380537:

Revision 380537 by wbamberg on

Revision 393633:

Revision 393633 by wbamberg on

Title:
Tools
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 380537
Revision 393633
n8      The following is a list of tools and resources that will hen8      This page lists tools that help you develop and debug websi
>lp with your web development process, as well as potentially debu>tes and web apps. It's focused mostly on the tools developed and 
>gging your Firefox browser add-ons.>maintained at Mozilla, but we've listed other popular and useful 
 >tools under "More Resources".
n10    <h2 id="Web_Development" name="Web_Development">n10    <div class="cleared topicpage-table">
11      Web development11      <div class="section">
12        <h2 class="Documentation" id="Documentation" name="Docume
 >ntation">
13          MOZILLA DEVELOPER Tools
12    </h2>14        </h2>
13    <h3 id="Integrated_into_Firefox">15        <p>
14      Integrated into Firefox16          This section lists tools developed and maintained by Mo
 >zilla's Developer Tools team. These tools are all accessed from w
 >ithin Firefox, under the "Firefox" menu (or the "Tools" menu on O
 >S X and Linux), then "Web Developer".
15    </h3>17        </p>
18        <p>
19          Most of these tools are built into Firefox and are acce
 >ssible through the <a href="/en-US/docs/Tools/Toolbox" title="/en
 >-US/docs/Tools/Toolbox">Toolbox</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.
20        </p>
21        <dl>
22          <dt>
23            <a href="/en-US/docs/Tools/Page_Inspector" title="HTM
 >L/Element">Page Inspector</a>
24          </dt>
25          <dd>
26            View and modify the HTML and CSS for the selected ele
 >ment.
27          </dd>
28          <dt>
29            <a href="/en-US/docs/Tools/Web_Console" title="HTML/A
 >ttributes">Web Console</a>
30          </dt>
31          <dd>
32            See informational, warning and error messages emitted
 > by the browser or web content, and examine and manipulate the pa
 >ge using JavaScript.
33          </dd>
34          <dt>
35            <a href="/en-US/docs/Tools/Style_Editor" title="HTML/
 >HTML5">Style Editor</a>
36          </dt>
37          <dd>
38            View and edit CSS styles for the current page.
39          </dd>
40          <dt>
41            <a href="/en-US/docs/Tools/Scratchpad" title="HTML/Fo
 >rms">Scratchpad</a>
42          </dt>
43          <dd>
44            A text editor built into Firefox that lets you write 
 >and execute JavaScript.
45          </dd>
46          <dt>
47            <a href="/en-US/docs/Tools/Debugger" title="HTML/Bad_
 >copy_pasting_habits">JavaScript Debugger</a>
48          </dt>
49          <dd>
50            Step through JavaScript code that is running in the b
 >rowser and watch variables to help track down bugs.
51          </dd>
52          <dt>
53            <a href="/en-us/docs/Tools/Responsive_Design_View" ti
 >tle="/en-us/docs/Tools/Responsive_Design_View">Responsive Design 
 >View</a>
54          </dt>
55          <dd>
56            See how your website or app will look on different sc
 >reen sizes without changing the size of your browser window.
57          </dd>
58          <dt>
59            <a href="https://developer.mozilla.org/en-US/docs/Too
 >ls/GCLI" title="en/Tools/GCLI">Developer Toolbar</a>
60          </dt>
61          <dd>
62            A command-line interface to manipulate and work with 
 >the developer tools in Firefox, and buttons for quick access to t
 >he most commonly used tools.
63          </dd>
64          <dt>
65            <a href="https://developer.mozilla.org/en-US/docs/Err
 >or_Console" title="en/Error_Console">Error Console</a>
66          </dt>
67          <dd>
68            Reports JavaScript-related errors and warnings, CSS e
 >rrors and arbitrary messages from chrome and web content.
69          </dd>
70          <dt>
71            <a href="/en-US/docs/Tools/3D_View" title="en/Error_C
 >onsole">3D View</a>
72          </dt>
73          <dd>
74            Also known as "Tilt", this provides a 3D visualisatio
 >n of the current page.
75          </dd>
76          <dt>
77            <a href="/en-US/docs/Tools/Firefox_OS_Simulator" titl
 >e="en/Error_Console">Firefox OS Simulator</a>
78          </dt>
79          <dd>
80            Run and debug your Firefox OS app on the desktop, wit
 >hout needing to use a real Firefox OS device.
81          </dd>
82        </dl>
83      </div>
84      <div class="section">
85        <h2 class="Community" id="Community" name="Community">
86          Getting help
87        </h2>
88        <p>
89          If you have any questions about the developer tools bui
 >lt into Firefox, please come and ask us on the <a href="https://l
 >ists.mozilla.org/listinfo/dev-developer-tools" title="https://lis
 >ts.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools<
 >/a> mailing list or in the <a href="http://mibbit.com/?channel=%2
 >3devtools&amp;server=irc.mozilla.org">#devtools</a> channel on <a
 > href="http://irc.mozilla.org/">Mozilla's IRC network</a>.
90        </p>
91        <h2 class="Related_Topics" id="Related_Topics" name="Rela
 >ted_Topics">
92          More resources
93        </h2>
94        <p>
95          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>.
96        </p>
97        <dl>
98          <dt>
99            <a href="https://www.getfirebug.com/" title="HTML/For
 >ms">Firebug</a>
100          </dt>
101          <dd>
102            A very popular and powerful web development tool, inc
 >luding a JavaScript debugger, HTML and CSS viewer and editor, and
 > network monitor.
103          </dd>
104          <dt>
105            <a href="https://developer.mozilla.org/en-US/docs/DOM
 >_Inspector" title="HTML/Forms">DOM Inspector</a>
106          </dt>
107          <dd>
108            Inspect, browse, and edit the DOM of web pages or XUL
 > windows.
109          </dd>
110          <dt>
111            <a href="https://addons.mozilla.org/en-US/firefox/add
 >on/web-developer/" title="HTML/Forms">Web Developer</a>
112          </dt>
113          <dd>
114            Adds a menu and a toolbar to the browser with various
 > web developer tools.
115          </dd>
116          <dt>
117            <a href="https://webmaker.org/en-US/tools/" title="ht
 >tps://webmaker.org/en-US/tools/">Webmaker Tools</a>
118          </dt>
119          <dd>
120            A set of tools developed by Mozilla, aimed at people 
 >getting started with Web development.
121          </dd>
122          <dt>
123            <a href="http://www.w3.org/Status.html" title="HTML/F
 >orms">W3C Validators</a>
124          </dt>
125          <dd>
126            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>.
127          </dd>
128          <dt>
129            <a href="http://www.jshint.com/" title="HTML/Forms">J
 >SHint</a>
130          </dt>
131          <dd>
132            JavaScript code analysis tool.
133          </dd>
134          <dt>
135            <a href="http://www.jslint.com/" title="HTML/Forms">J
 >SLint</a>
136          </dt>
137          <dd>
138            Another JavaScript code analysis tool.
139          </dd>
140        </dl>
141        <p>
142          &nbsp;
143        </p>
144      </div>
145    </div>
t17      Tools and resources that are built into Firefox and are in t147      &nbsp;
>heavy development. 
18    </p>
19    <dl>
20      <dt>
21        <a href="/en-US/docs/Tools/Page_Inspector" title="en/Tool
>s/Page_Inspector">Page Inspector</a> {{ fx_minversion_inline("10. 
>0") }} 
22      </dt>
23      <dd>
24        A useful tool that shows you the HTML of the element you'
>re currently pointing at with your mouse, in context. 
25      </dd>
26    </dl>
27    <dl>
28      <dt>
29        <a href="/en-US/docs/Tools/Web_Console" title="en/Tools/W
>eb_Console">Web Console</a> {{ fx_minversion_inline("4.0") }} 
30      </dt>
31      <dd>
32        A console that lets you interactively output information,
> run JavaScript snippets, and experiment with your content. 
33      </dd>
34    </dl>
35    <dl>
36      <dt>
37        <a href="/en-US/docs/Tools/Scratchpad" title="en/Tools/Sc
>ratchpad">Scratchpad</a> {{ fx_minversion_inline("6.0") }} 
38      </dt>
39      <dd>
40        A text editor built into Firefox that lets you edit and r
>un JavaScript code. 
41      </dd>
42      <dt>
43        <a href="/en-US/docs/Tools/Style_Editor" title="en/Tools/
>Style Editor">Style Editor</a> {{ fx_minversion_inline("11.0") }} 
44      </dt>
45      <dd>
46        Lets you edit CSS styles for the current page in real tim
>e; in addition, you can toggle them on and off. A fantastic way t 
>o work in real time with the look and feel of web content! 
47      </dd>
48      <dt>
49        <a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/T
>ools/Debugger">JavaScript Debugger</a> {{ fx_minversion_inline("1 
>5.0") }} 
50      </dt>
51      <dd>
52        Step through JavaScript code that is running in the brows
>er (or even on a remote browser!) and watch variables to help tra 
>ck down bugs. This documentation also covers the Remote Debugger, 
> which you can use to debug code running on a Firefox OS device o 
>r in Firefox on an Android device. 
53      </dd>
54      <dt>
55        <a href="/en-us/docs/Tools/Responsive_Design_View" title=
>"/en-us/docs/Tools/Responsive_Design_View">Responsive Design View 
></a> {{ fx_minversion_inline("15.0") }} 
56      </dt>
57      <dd>
58        See how your designs will look on different screen sizes 
>without changing the overall size of your browser window. 
59      </dd>
60      <dt>
61        <a href="/en-US/docs/Tools/Using_the_Source_Editor" title
>="en/Tools/Using the Source Editor">Using the Source Editor</a> 
62      </dt>
63      <dd>
64        The Source Editor isn't a standalone tool; instead, it's 
>the underlying editor used by Scratchpad and the Style Editor. Th 
>is article provides information common to all tools that make use 
> of the <a href="/en-US/docs/JavaScript_code_modules/source-edito 
>r.jsm" title="source-editor.jsm">Source Editor API</a>. 
65      </dd>
66      <dt>
67        <a href="/en-US/docs/Tools/GCLI" title="en/Tools/GCLI">De
>veloper Toolbar</a> {{ fx_minversion_inline("16.0") }} 
68      </dt>
69      <dd>
70        The Developer Toolbar provides a command-line interface t
>o manipulate and work with the developer tools in Firefox, and bu 
>ttons for quick access to the most commonly used tools. 
71      </dd>
72    </dl>
73    <h3 id="Extensions" name="Extensions">
74      Extensions
75    </h3>
76    <dl>
77      <dt>
78        <a class="link-https" href="https://addons.mozilla.org/en
>-US/firefox/addon/1843">Firebug</a> 
79      </dt>
80      <dd>
81        Integrates a wealth of development tools to edit, debug, 
>and monitor CSS, HTML, and JavaScript live in any web page (<a cl 
>ass="external" href="http://www.getfirebug.com/">details</a>) 
82      </dd>
83    </dl>
84    <dl>
85      <dt>
86        <a href="/en-US/docs/DOM_Inspector" title="en/DOM_Inspect
>or">DOM Inspector</a> 
87      </dt>
88      <dd>
89        A developer tool used to inspect, browse, and edit the DO
>M of documents - usually web pages or XUL windows. 
90      </dd>
91    </dl>
92    <dl>
93      <dt>
94        <a class="link-https" href="https://addons.mozilla.org/en
>-US/firefox/addon/60">Web Developer</a> 
95      </dt>
96      <dd>
97        Adds a menu and a toolbar to the browser with various web
> developer tools. (<a class="external" href="http://chrispederick 
>.com/work/web-developer/">details</a>) 
98      </dd>
99    </dl>
100    <dl>
101      <dt>
102        <a class="link-https" href="https://addons.mozilla.org/en
>-US/firefox/addon/4111">Aardvark</a> 
103      </dt>
104      <dd>
105        Reveals DOM elements as you scrub the mouse over a page. 
>(<a class="external" href="http://www.karmatics.com/aardvark/">de 
>tails</a>) 
106      </dd>
107    </dl>
108    <dl>
109      <dt>
110        <a class="link-https" href="https://addons.mozilla.org/en
>-US/firefox/browse/type:1/cat:4">More on Firefox Add-ons</a> 
111      </dt>
112      <dd>
113        Web development category in the Firefox Add-ons site
114      </dd>
115    </dl>
116    <h2 id="Validators" name="Validators">
117      App development
118    </h2>
119    <dl>
120      <dt>
121        <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="e
>n/Tools/Page_Inspector">Firefox OS Simulator</a> 
122      </dt>
123      <dd>
124        Enables you to run and debug your <a href="/en-US/docs/Ap
>ps" title="/en-US/docs/Apps">Firefox OS app</a> on the desktop. 
125      </dd>
126    </dl>
127    <h2 id="Validators" name="Validators">
128      Validators
129    </h2>
130    <dl>
131      <dt>
132        <a href="/en-US/docs/Tools/Validators" title="en/Tools/Va
>lidators">List of validators</a> 
133      </dt>
134      <dd>
135        Various validators for things like HTML, CSS, RDF, Firefo
>x extensions, and many others. 
136      </dd>
137    </dl>
138    <h2 id="Authoring_Software" name="Authoring_Software">
139      Authoring Software
140    </h2>
141    <dl>
142      <dt>
143        <a class="external" href="http://tidy.sourceforge.net/">H
>TMLTidy</a> 
144      </dt>
145      <dd>
146        Tool used to fix or point out invalid HTML as well as imp
>rove the layout and indentation style of the resulting markup. 
147      </dd>
148    </dl>
149    <h2 id="JavaScript" name="JavaScript">
150      JavaScript
151    </h2>
152    <dl>
153      <dt>
154        <a href="/en-US/docs/Error_Console" title="en/Error_Conso
>le">Error Console</a> 
155      </dt>
156      <dd>
157        Tool used for reporting errors in the application chrome 
>and user-opened web pages. Also reports JavaScript-related errors 
> and warnings, CSS errors and arbitrary messages from chrome code 
>. 
158      </dd>
159    </dl>
160    <dl>
161      <dt>
162        <a href="/en-US/docs/Venkman" title="en/Venkman">Venkman<
>/a> 
163      </dt>
164      <dd>
165        Mozilla's JavaScript Debugger
166      </dd>
167      <dt>
168        <a class="external" href="http://www.jshint.com/">JSHint<
>/a> 
169      </dt>
170      <dd>
171        JavaScript Static Analysis and Code Quality Tool
172      </dd>
173    </dl>
174    <dl>
175      <dt>
176        <a class="external" href="http://www.jslint.com/">JSLint<
>/a> 
177      </dt>
178      <dd>
179        JavaScript Code Quality Tool
180      </dd>
181    </dl>
182    <dl>
183      <dt>
184        <a class="external" href="http://jsdoc.sourceforge.net/">
>JSDoc</a> 
185      </dt>
186      <dd>
187        Tool used for generation of (usually HTML) documentation 
>from code comments (similar to JavaDoc). 
188      </dd>
189    </dl>
190    <h2 id="DOM" name="DOM">
191      DOM
192    </h2>
193    <dl>
194      <dt>
195        <a href="/en-US/docs/DOM_Inspector" title="en/DOM_Inspect
>or">DOM Inspector</a> 
196      </dt>
197      <dd>
198        Developer tool used to inspect, browse, and edit the Docu
>ment Object Model of documents 
199      </dd>
200    </dl>
201    <dl>
202      <dt>
203        <a class="external" href="http://slayeroffice.com/tools/m
>odi/v2.0/modi_help.html">MODI</a> 
204      </dt>
205      <dd>
206        Mouseover DOM Inpector is a bookmarklet that allows you t
>o view and manipulate the DOM of a web page simply by mousing aro 
>und the document. 
207      </dd>
208    </dl>
209    <h2 id="Localization" name="Localization">
210      Localization
211    </h2>
212    <dl>
213      <dt>
214        <a class="external" href="http://www.mozilla.org/projects
>/l10n/mlp_tools.html">Localization and Leveraging Tools</a> 
215      </dt>
216      <dd>
217        Tools and resources to help localize and translate your e
>xtensions to other languages. 
218      </dd>
219    </dl>
220    <h2 id="Accessibility" name="Accessibility">
221      Accessibility
222    </h2>
223    <h3 id="Policy">
224      Policy
225    </h3>
226    <dl>
227      <dt>
228        <a class="external" href="http://www.w3.org/WAI/intro/ari
>a" target="external" title="WAI-ARIA Overview">WAI-ARIA Overview< 
>/a> 
229      </dt>
230      <dd>
231        An overview of WAI-ARIA, the Accessible Rich Internet App
>lications Suite; a set of documents that lay out how to make Web  
>2.0 sites and applications more accessible. 
232      </dd>
233    </dl>
234    <h3 id="Testing_Tools">
235      Testing Tools
236    </h3>
237    <dl>
238      <dt>
239        <a class="external" href="http://achecker.ca/checker/inde
>x.php" target="external" title="AChecker">AChecker</a> 
240      </dt>
241      <dd>
242        AChecker is a tool that allows you to type in a url and t
>est for accessibility. 
243      </dd>
244      <dt>
245        <a class="external" href="http://www.w3.org/WAI/ER/tools/
>complete" target="external" title="W3C Complete list of tools">W3 
>C complete list of tools</a> 
246      </dt>
247      <dd>
248        A Complete list of web accessibility evaluation tools
249      </dd>
250    </dl>
251    <p>
252      A more comprehensive list of accessibility resources, see: 
><a class="external" href="http://wiki.fluidproject.org/display/fl 
>uid/Accessibility+Resources" target="external" title="Accessibili 
>ty resources">Fluid Project accessibility resources</a> and <a hr 
>ef="/en-US/docs/Accessibility/ARIA" title="ARIA">ARIA</a> 
253    </p>
254    <h2 id="Tree_and_branch_management" name="Tree_and_branch_man
>agement"> 
255      Tree and branch management
256    </h2>
257    <dl>
258      <dt>
259        <a href="/en-US/docs/Using_cross_commit" title="en/Using_
>cross_commit"><code>cross-commit</code> script</a> 
260      </dt>
261      <dd>
262        Concurrent Versions System(CVS) script that allows a sing
>le patch to be easily checked in on multiple branches. 
263      </dd>
264    </dl>
265    <h2 id="User_Profile_Tools" name="User_Profile_Tools">
266      User profile tools
267    </h2>
268    <p>
269      <a href="/en-US/docs/Mozilla/Multiple_Firefox_Profiles" tit
>le="Multiple Firefox profiles">Multiple Firefox profiles</a> 
270    </p>
271    <h2 id="Navigating_the_Mozilla_Codebase">
272      Navigating the Mozilla Codebase
273    </h2>
274    <p>
275      <a class="external" href="http://mxr.mozilla.org/" title="h
>ttp://mxr.mozilla.org/">MXR</a> (if you use vim, mxr-vim speeds u 
>p the process) 
276    </p>
277    <p>
278      <a class="external" href="http://dxr.mozilla.org/clang/" ti
>tle="http://dxr.mozilla.org/clang/">DXR</a> 
279    </p>
280    <dl>
281      <dt>
282        <a class="external" href="/en-US/docs/Profile_Manager" ti
>tle="en/Profile_Manager">Profile Manager</a> 
283      </dt>
284    </dl>
285    <p>
286      <span class="comment">Categories</span>
287    </p>
288    <p>
289      <span class="comment">Interwiki Language Links</span>

Back to History