1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: Toolbox
slug: Narzędzia/Tools_Toolbox
translation_of: Tools/Tools_Toolbox
---
<p>The Toolbox provides a single home for most of the developer tools that are built into Firefox. You can open it by selecting "Toggle Tools" from the Web Developer menu (under "Tools" on OS X and Linux, or "Firefox" on Windows), or by activating any tool hosted in it (for example, the JavaScript Debugger or the Page Inspector). Alternatively you can press Ctrl + Shift + I on Windows and Linux, or Cmd + Opt + I on OS X.</p>
<p>By default, the window appears docked to the bottom side of the Firefox window, but you can detach it if you like. This is what it looks like when it's docked:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">The window itself is split into two parts: a toolbar along the top, and a main pane underneath:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Toolbar">Toolbar</h2>
<p>The toolbar contains controls to activate a particular tool, to dock/float the window, and to close the window.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Node_picker">Node picker</h3>
<p>On the far left there's a button to activate the node picker. This lets you select a page element for inspection. See <a href="/en-US/docs/Tools/Page_Inspector#Selecting_elements">"Selecting elements"</a>.</p>
<h3 id="Toolbox-hosted_tools">Toolbox-hosted tools</h3>
<p>Then there is an array of labeled buttons which enables you to switch between the different tools hosted by the Toolbox. The array may include the following tools:</p>
<ul>
<li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li>
<li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li>
<li><a href="/en-US/docs/Tools/Page_Inspector" title="/en-US/docs/Tools/Page_Inspector">Page Inspector</a></li>
<li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li>
<li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Profiler</a></li>
<li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Network Monitor</a></li>
</ul>
<p>Note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the Firefox instance that launched the window, not all the hosted tools will be shown).</p>
<h3 id="Extra_tools">Extra tools</h3>
<p>Next there's an array of buttons that can be added or removed in the <a href="#Settings">developer tool settings</a>. By default this array includes:</p>
<ul>
<li><a href="/en-US/docs/Tools/Web_Console#The_split_console">Toggle split console</a></li>
<li><a href="/en-US/docs/Tools/Responsive_Design_View">Responsive Design Mode</a></li>
</ul>
<p>The following tools are not included in the toolbar by default, but you can add them in the <a href="#Settings">settings</a>:</p>
<ul>
<li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Highlight painted area</a></li>
<li><a href="/en-US/docs/Tools/3D_View">3D view</a></li>
<li><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></li>
<li><a href="/en-US/docs/Tools/Eyedropper">Grab a color from the page</a></li>
<li>Take a full-page screenshot: this is new in Firefox 32. It takes a screenshot of the complete web page and saves it in your Downloads directory</li>
<li><a href="/en-US/docs/tools/Working_with_iframes">Select a frame as the currently targeted document</a>: this is new in Firefox 34.</li>
</ul>
<h3 id="Toolbox_controls">Toolbox controls</h3>
<p>Finally there's a row of buttons to:</p>
<ul>
<li>close the window</li>
<li>toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window</li>
<li>toggle the window between standalone and attached to the browser window</li>
<li>access <a href="#Settings" title="#Settings">developer tool settings</a></li>
</ul>
<h2 id="Settings_2"><a name="Settings">Settings</a></h2>
<p>Clicking the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="width: 30px; height: 22px; display: inline-block;">) gives you access to settings for the Toolbox itself and for the tools it hosts:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/8619/devtools-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3>
<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p>
<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3>
<p>This group of checkboxes determines which "standalone tools" get buttons in the <a href="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>. This defaults to the node picker, the split console, and responsive design mode.</p>
<p>Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.</p>
<h3 id="Choose_DevTools_theme">Choose DevTools theme</h3>
<p>This enables you to switch between a light and a dark theme:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6933/light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/6931/dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h3 id="Common_preferences">Common preferences</h3>
<p>Settings that apply to more than one tool. There's just one of these:</p>
<ul>
<li><em>Enable persistent logs</em>: a setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</li>
</ul>
<h3 id="Inspector">Inspector</h3>
<ul>
<li><em>Show browser styles</em>: a setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a>. This setting is new in Firefox 32. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Computed_view">Computed view</a>.</li>
<li><em>Default color unit</em>: a setting to control how colors are represented in the inspector:
<ul>
<li>Hex</li>
<li>HSL(A)</li>
<li>RGB(A)</li>
<li>name.</li>
</ul>
</li>
</ul>
<h3 id="Web_Console">Web Console</h3>
<ul>
<li><em>Enable timestamps</em>: controls whether the Web Console displays timestamps. From Firefox 28 the Web Console defaults to hiding timestamps.</li>
</ul>
<h3 id="Style_Editor">Style Editor</h3>
<ul>
<li><em>Show original sources</em>: when a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</li>
<li><em>Autocomplete CSS</em>: enable the Style Editor to offer <a href="/en-US/docs/Tools/Style_Editor#Autocomplete">autocomplete suggestions</a>.</li>
</ul>
<h3 id="JavaScript_Profiler">JavaScript Profiler</h3>
<ul>
<li><em>Show Gecko platform data</em>: a setting to control whether or not profiles should include Gecko platform symbols.</li>
</ul>
<h3 id="Editor_Preferences">Editor Preferences</h3>
<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
<ul>
<li><em>Detect indentation</em>: auto-indent new lines based on the current indentation</li>
<li><em>Autoclose brackets</em></li>
<li><em>Indent using spaces</em></li>
<li><em>Tab size</em></li>
<li><em>Keybindings</em>: choose the default CodeMirror keybindings, or keybindings from one of several popular editors:
<ul>
<li>Vim</li>
<li>Emacs</li>
<li>Sublime Text</li>
</ul>
</li>
</ul>
<h3 id="Advanced_settings">Advanced settings</h3>
<ul>
<li><em>Disable cache</em>: disable the browser cache to simulate first-load performance. From Firefox 33 onwards this setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed.</li>
<li><em>Disable JavaScript</em>: reload the current tab with JavaScript disabled</li>
<li><em>Enable chrome debugging</em>: enable you to use developer tools in the context of the browser itself, and not only web content</li>
<li><em>Enable remote debugging</em>: enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a></li>
</ul>
<h2 id="Main_Pane">Main Pane</h2>
<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p>
|
