blob: b54074b7cf37f695c4537a5e1b1aee1ffa8a3bf6 (
plain)
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: 工具箱
slug: Tools/Tools_Toolbox
translation_of: Tools/Tools_Toolbox
---
<div>{{ToolsSidebar}}</div><p>该工具箱集中提供了大部分开发工具并构建到了 Firefox 中。</p>
<p>你可以从 Web 开发者菜单（OS X 和 Linux 在“工具”菜单中，Windows 系统在“Firefox”菜单下）中选择“切换工具”打开它。或通过已激活的任何工具（如：调试器、查看器）切换打开。另外你可以按快捷键打开，Ctrl + Shift + I （Windows 和 Linux）、 Cmd + Opt + I （ OS X）。</p>
<p>默认情况下，工具箱窗口停靠在 Firefox 底边，但你可以根据自己喜好独立出来。下图为停靠在 Firefox 中的样子：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">窗口本身分为两个部分：顶部工具栏和下面的主面板：</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="工具栏"><a id="Toolbar" name="Toolbar">工具栏</a></h2>
<p>该工具栏包含几个控制部分：激活特定工具、停靠/独立窗口、关闭窗口。</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>在最左边有一个按钮来激活节点选择器。允许您从页面中选择一个元素进行查看。查看“<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择元素</a>”。</p>
<h3 id="工具箱托管的工具（Toolbox-hosted_tools）">工具箱托管的工具（Toolbox-hosted tools）</h3>
<p>然后有一组标签按钮，允许您在工具箱中的不同工具之间切换。其中可能包括了以下工具：</p>
<ul>
<li><a href="/zh-CN/docs/Tools/Web_Console" title="Web_Console">Web 控制台</a></li>
<li><a href="/zh-CN/docs/Tools/Debugger" title="Debugger">JavaScript 调试器</a></li>
<li><a href="/zh-CN/docs/Tools/Page_Inspector" title="Page_Inspector">页面查看器</a></li>
<li><a href="/zh-CN/docs/Tools/Style_Editor" title="Style_Editor">样式编辑器</a></li>
<li><a href="/zh-CN/docs/Tools/Profiler" title="Profiling_with_the_Built-in_Profiler">JavaScript 性能分析器</a></li>
<li><a href="/zh-CN/docs/Tools/Network_Monitor" title="Profiling_with_the_Built-in_Profiler">网络监视器</a></li>
</ul>
<p>注意：并不是所有集成的工具总是会完整的在这里列出：只有实际可用的工具才会在相应的情况下显示出来（例如，不是所有的工具都支持远程调试，所以如果调试目标不在当前 Firefox 中的实例，就不会显示所有的工具）。</p>
<p> </p>
<h3 id="附加工具（Extra_tools）">附加工具（Extra tools）</h3>
<p>接下来有一组按钮，可以从<a href="#Settings">开发者工具箱选项</a>添加或删除。在默认情况下这组按钮包含：</p>
<ul>
<li><a href="/zh-CN/docs/Tools/Web_Console#The_split_console">切换分离式控制台</a></li>
<li><a href="/zh-CN/docs/Tools/Responsive_Design_View">响应式设计模式</a></li>
</ul>
<p>在默认情况下，以下工具不包括在工具栏中，但是你可以从<a href="#Settings">设置</a>中将它们添加进来：</p>
<ul>
<li><a href="/zh-CN/docs/Tools/Paint_Flashing_Tool">高亮重绘的区域</a></li>
<li><a href="zh-CN/docs/Tools/Page_Inspector/3D_view">3D 视图</a></li>
<li><a href="/zh-CN/docs/Tools/Scratchpad">代码草稿纸</a></li>
<li><a href="/zh-CN/docs/Tools/Eyedropper">从页面中抓取一种颜色</a></li>
<li>进行整页截图： Firefox 32 新增。对一个完整的 web 页面进行截图并将它保存在您的下载目录</li>
<li><a href="/zh-CN/docs/tools/Working_with_iframes">选择一个 iframe 作为当前的目标文档</a>：Firefox 34 新增。</li>
</ul>
<h3 id="工具箱的控制（Toolbox_controls）">工具箱的控制（Toolbox controls）</h3>
<p>最后的一组按钮了：</p>
<ul>
<li>关闭窗口</li>
<li>在停靠在浏览器底部和侧边之间切换</li>
<li>在独立窗口和附加在浏览器窗口中显示之间切换</li>
<li>访问<a href="#Settings">开发者工具箱选项</a></li>
</ul>
<h2 id="选项"><a name="Settings">选项</a></h2>
<p>单击“选项”按钮（<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="display: inline-block; height: 22px; width: 30px;">）允许您访问工具箱本身和它所承载工具的设置项：</p>
<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/10411/devtools-settings.png" style="display: block; height: 669px; margin-left: auto; margin-right: auto; width: 644px;"></p>
<h3 id="默认的_Firefox_开发者工具">默认的 Firefox 开发者工具</h3>
<p>通过启用这组复选框决定了哪些工具显示在工具箱中。新工具通常已经包实装在 Firefox 中但默认不启用。</p>
<h3 id="可用的工具箱按钮">可用的工具箱按钮</h3>
<p>这组复选框决定“附加工具”<a href="#Toolbar">工具栏</a>中显示哪些按钮。默认启用节点选择器、切换分离式控制台和响应式设计模式。</p>
<p>Firefox 32 添加了一个按钮用于完成网页的截图，默认情况不启用。</p>
<h3 id="选择开发者工具箱主题">选择开发者工具箱主题</h3>
<p>允许您在亮色和暗色主题之间进行切换：</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="常用首选项">常用首选项</h3>
<p>该设置适用于多个工具。其中只有一个选项：</p>
<ul>
<li>启用持续日志：如果您启用此选项，Web 控制台将不会在您导航到新页面时清除已输出内容</li>
</ul>
<h3 id="查看器">查看器</h3>
<ul>
<li>控制是否显示浏览器样式：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/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. 该设置是在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/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</li>
<li>默认颜色单元：设置查看器的表现颜色
<ul>
<li>Hex</li>
<li>HSL(A)</li>
<li>RGB(A)</li>
<li>颜色名</li>
</ul>
</li>
</ul>
<h3 id="Web_控制台">Web 控制台</h3>
<ul>
<li>启用时间戳：控制 Web 控制台是否显示时间戳。从 Firefox 28 开始 Web 控制台默认为隐藏时间戳。</li>
</ul>
<h3 id="样式编辑器">样式编辑器</h3>
<ul>
<li>显示原始来源：当使用 CSS 预处理器支持源地图，这使得样式编辑器显示原始预处理器资源，而不是生成的 CSS。<a href="/zh-CN/docs/Tools/Style_Editor#Source_map_support">了解更多关于样式编辑器支持 CSS source maps</a>。选中与此项，<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">页面查看器的规则视图还将提供原始来源的链接</a>。</li>
<li>自动补全 CSS：使拥有样式编辑器提供自动补全建议功能。</li>
</ul>
<h3 id="JavaScript_分析器">JavaScript 分析器</h3>
<ul>
<li><em>显示 Gecko </em>平台数据：该设置用来控制配置文件是否应该包括 Gecko 平台符号表。</li>
</ul>
<h3 id="编辑器首选项">编辑器首选项</h3>
<p><a href="http://codemirror.net/">CodeMirror</a> 源代码编辑器偏好设置， 它包括在 Firefox 和几个开发人员所使用的工具，包括<a href="/zh-CN/docs/Tools/Scratchpad">代码草稿纸</a>和<a href="/zh-CN/docs/Tools/Style_Editor">样式编辑器</a>。</p>
<ul>
<li>检测缩进：基于当前内容进行新行自动缩进</li>
<li>自动关闭括号</li>
<li>使用空格缩进</li>
<li><em>缩进尺寸</em></li>
<li>快捷键绑定：选择默认 CodeMirror 快捷键或几种流行编辑器的快捷键
<ul>
<li>Vim</li>
<li>Emacs</li>
<li>Sublime Text</li>
</ul>
</li>
</ul>
<h3 id="高级设置">高级设置</h3>
<ul>
<li>禁用缓存：禁用浏览器缓存来模拟首次加载性能。从 Firefox 33 起该设置被加入进来，意味着如果它被开启，打开工具箱时缓存将被禁用。当工具箱关闭时缓存将被重新启用。</li>
<li>禁用 JavaScript：重新加载当前标签页，并禁用 JavaScript</li>
<li>使服务通过HTTP工作：enable Service Worker registrations from insecure websites</li>
<li>启用 chrome 及附加组件调试 （Firefox 38.0.5b3 及以下)）或 启用 chrome 及附加组件调试工具箱（Firefox 40.0 a2 及以上）：使您能够使用开发工具调试浏览器环境，不仅仅只是 Web 内容</li>
<li>启用远程调试：允许开发者工具<a href="/zh-CN/docs/Tools/Remote_Debugging">调试远端 Firefox 实例</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>
|
