Compare Revisions

Tools draft

Revision 390699:

Revision 390699 by wbamberg on

Revision 393643:

Revision 393643 by wbamberg on

Title:
Tools draft
Tools draft
Slug:
Tools/Tools_draft
Tools/Tools_draft
Content:

Revision 390699
Revision 393643
t8      This page lists tools that help you develop and debug websit8      REDIRECT <a class="redirect" href="/en-US/docs/tools">Tools
>tes and web apps. It's focused mostly on the tools developed and ></a>
>maintained at Mozilla, but we've listed other popular and useful  
>tools under "More Resources". 
9    </p>
10    <div class="cleared topicpage-table">
11      <div class="section">
12        <h2 class="Documentation" id="Documentation" name="Docume
>ntation"> 
13          MOZILLA DEVELOPER Tools
14        </h2>
15        <p>
16          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". 
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>
146    <p>
147      &nbsp;

Back to History