blob: 141a9dbed724b551870748f6e3a3194f7878055b (
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
---
title: Firefox 开发者工具
slug: Tools
tags:
- Mozilla 开发
- Web 开发
- 'Web 开发:工具'
- 向导
- 工具
- '本地化:优先级'
- 网页开发
- '网页开发:工具'
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>
<p class="summary">Firefox 开发者工具是指Firefox集成的一系列web开发者工具，可用于在 PC 和移动设备上对HTML、CSS 及 JavaScript进行测试，编辑和调试</p>
<p class="summary">这段内容包括所有关于如何在Android调试Firefox、扩展DevTools以及整个浏览器调试相关的工具和知识的详细索引。</p>
<p>如果你在寻找有关使用 Firefox 开发者工具的信息，你来对地方了——这个页面提供了核心工具和附加工具的详尽信息，以及更深层的信息，比如如何连接调试 Firefox 安卓版，如何拓展开发者工具和如何调试浏览器。</p>
<p>请探索侧边栏的链接，进一步浏览页面。如果你有任何有关开发者工具的反馈或问题，请在邮件列表或 IRC 频道（请查阅<a href="/zh-CN/docs/Tools#Join_the_Developer_tools_community">底部的社区链接</a>）上向我们发送消息。如果你有任何特别关于文档的反馈或问题，<a href="https://discourse.mozilla.org/c/mdn">MDN 讨论</a>适合发帖。</p>
<div class="note">
<p><strong>注意</strong>：如果你是 Web 开发的初学者并且使用开发者工具，我们的<a href="/zh-CN/docs/Learn">学习 Web 开发</a>文档可能会对你有所帮助 — 查看<a href="/zh-CN/docs/Learn/Getting_started_with_the_web">初识 Web</a> 和 <a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">什么是浏览器开发者工具？ </a>作为一个较为合适的出发点。</p>
</div>
<h2 id="核心工具">核心工具</h2>
<p>在右侧的开发工具, 在 Windows 或者 Linux 使用 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 或<kbd>F12</kbd>, 或者在 Mac OS X <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> , 有几个按钮可用于执行操作或更改工具设置.</p>
<p>右手边的省略号菜单包括了若干命令，让你执行操作或改变工具设定。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p>
<table class="standard-table" style="height: 178px; width: 840px;">
<tbody>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td>
<td>这个按钮只有在页面中包含多个 iframe 时才会显示。点击显示当前页面的 iframe 列表，选择你想操作的哪个。</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td>
<td>点击这个按钮来给当前页面截图。（<strong>注意：</strong>这个特性默认不会打开，只有在设置里开启，图标才会显示。）</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td>
<td>切换至响应式布局设计。</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td>
<td>打开包括停靠模式、显示或隐藏分离式控制台和开发者工具设置的菜单。这个菜单还包括开发者工具的文档和 Mozilla 社区的链接。</td>
</tr>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td>
<td>关闭开发者工具。</td>
</tr>
</tbody>
</table>
<div class="column-container">
<div class="column-half">
<h3 id="页面查看器">页面查看器</h3>
<p><a href="/zh-CN/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>查看和编辑页面内容和布局。可视化页面的许多方面，包括盒子模型，动画和网格布局。</p>
</div>
<div class="column-half">
<h3 id="Web_控制台">Web 控制台</h3>
<p><a href="/zh-CN/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>查看由页面和 JavaScript 交互记录的信息</p>
</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="JavaScript_调试器">JavaScript 调试器</h3>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>停止，浏览，检查和修改页面中运行的 JavaScript。</p>
</div>
<div class="column-half">
<h3 id="网络监视器">网络监视器</h3>
<p><a href="/zh-CN/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>查看加载页面时的网络请求。</p>
</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="性能工具">性能工具</h3>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>分析网站的响应，JavaScript 程序和布局性能。</p>
</div>
<div class="column-half">
<h3 id="响应式设计模式">响应式设计模式</h3>
<p><a href="/zh-CN/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>查看网站或 app 在不同终端和网络类型上的外观和行为。</p>
</div>
</div>
<div class="column-container">
<div class="column-half">
<h3 id="无障碍环境">无障碍环境</h3>
<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p>
<p>提供了一种访问页面的无障碍树的方法，允许你查看遗漏或需要注意的东西。</p>
</div>
<div class="column-half">
<h3 id="应用面板">应用面板</h3>
<p><a href="/zh-CN/docs/Tools/Application"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/17307/just-application-panel.jpg"></a></p>
<p>提供现代web应用（或者叫改进web应用）预览和调试工具。包括服务工和web应用清单的预览。</p>
</div>
</div>
<div class="note">
<p><strong>注意</strong>：称呼开发者工具的 UI 的整体性的术语是 Toolbox（工具箱）。</p>
</div>
<h2 id="更多工具">更多工具</h2>
<p>这些开发者工具也内置在 Firefox 中。但不像上面的“核心工具”一样常用。</p>
<div class="twocolumns">
<dl>
<dt id="Memory"><a href="/zh-CN/docs/Tools/Memory">内存</a></dt>
<dd>判断哪些对象正在使用内存。</dd>
<dt id="Storage_Inspector"><a href="/zh-CN/docs/Tools/存储查看器">存储查看器</a></dt>
<dd>查看存在于页面中的 cookie、本地存储、indexedDB 和 会话存储。</dd>
<dt id="DOM_Property_Viewer"><a href="/zh-CN/docs/Tools/DOM_Property_Viewer">DOM 属性查看器</a></dt>
<dd>检查页面上 DOM 属性，函数等。</dd>
<dt id="Eyedropper"><a href="/zh-CN/docs/Tools/Eyedropper">页面取色器</a></dt>
<dd>从页面中选择一种颜色。</dd>
<dt id="Scratchpad"><a href="/zh-CN/docs/Tools/Scratchpad">便笺</a></dt>
<dd>Firefox 内置的文本编辑器，可让您编写和执行 JavaScript。</dd>
<dt id="Style_Editor"><a href="/zh-CN/docs/Tools/Style_Editor">样式编辑器</a></dt>
<dd>查看和编辑当前页面的 CSS 样式。</dd>
<dt id="Shader_Editor"><a href="/zh-CN/docs/Tools/Shader_Editor">着色器编辑器</a></dt>
<dd>查看和编辑 <a href="/zh-CN/docs/Web/WebGL">WebGL</a> 使用的顶点和片段着色器。</dd>
<dt id="Web_Audio_Editor"><a href="/zh-CN/docs/Tools/Web音频编辑器">网络音频编辑器</a></dt>
<dd>检查音频上下文中音频节点的图形，并修改其参数。</dd>
<dt id="Screenshot"><a href="/en-US/docs/Tools/Taking_screenshots">截图</a></dt>
<dd>对整个页面或单个元素的屏幕截图。</dd>
<dt id="Measure_a_portion_of_the_page"><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">测量部分页面</a></dt>
<dd>测量网页的特定区域。</dd>
<dt id="Rulers"><a href="/zh-CN/docs/Tools/Rulers">标尺</a></dt>
<dd>在网页上添加水平和垂直标尺的叠加层。</dd>
</dl>
</div>
<div class="column-container">
<div class="column-third">
<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p>
<p style="text-align: center;">体验最新的开发者工具和特性，试一试 Firefox 开发者版本吧！</p>
<p><a href="https://www.mozilla.org/zh-CN/firefox/developer/">下载 Firefox 开发者版本</a></p>
</div>
</div>
<h2 id="连接开发者工具">连接开发者工具</h2>
<p>如果您使用<a href="/zh-CN/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">快捷键</a>或菜单打开开发者工具, 他们将定位由当前活动选项卡托管的文档。但是，你也可以将这些工具连接到其他目标上，无论是在当前的浏览器中，还是在不同的浏览器中，甚至是不同的设备上。</p>
<div class="twocolumns">
<dl>
<dt id="about:debugging"><a href="/zh-CN/docs/Tools/about:debugging">调试工具</a></dt>
<dd>调试在浏览器中运行的插件、内容页签及工作者线程。</dd>
<dt id="Connecting_to_Firefox_for_Android"><a href="/zh-CN/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">连接到 Android 的 Firefox</a></dt>
<dd>将开发者工具连接到在 Android 设备上运行的 Firefox。</dd>
<dt id="Connecting_to_iframes"><a href="/zh-CN/docs/Tools/Working_with_iframes">连接到 iframe</a></dt>
<dd>将开发者工具连接到当前页面中的特定iframe。</dd>
<dt id="Connecting_to_other_browsers"><a href="/zh-CN/docs/Tools/Firefox_Tools_Adapter">连接到其他浏览器</a></dt>
<dd>将开发者工具连接到 Android 上的 Chrome 和 iOS 上的 Safari。</dd>
</dl>
</div>
<h2 id="调试浏览器">调试浏览器</h2>
<p>默认情况下，开发者工具将附加到网页或Web应用程序。 但是你也可以将它们连接到浏览器。 这对于浏览器和附加组件开发很有用。</p>
<div class="twocolumns">
<dl>
<dt id="Browser_Console"><a href="/zh-CN/docs/Tools/Browser_Console">浏览器控制台</a></dt>
<dd>查看由浏览器本身和插件记录的信息，并在浏览器里运行 JavaScript 代码。</dd>
<dt id="Browser_Toolbox"><a href="/zh-CN/docs/Tools/Browser_Toolbox">浏览器工具箱</a></dt>
<dd>将开发工具附加到浏览器本身。</dd>
</dl>
</div>
<h2 id="扩展开发者工具">扩展开发者工具</h2>
<p>对于有关拓展 Firefox 开发者工具的信息，详见在 MDN 的<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">浏览器拓展</a>板块的<a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">拓展开发者工具</a>。</p>
<h2 id="从_Firebug_迁移">从 Firebug 迁移</h2>
<p>Firebug 已经寿终正寝（若想了解原因，请查看页面<a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug 存在于 Firefox 开发者工具</a>），我们明白，迁移到一个不太熟悉的开发者工具是具有挑战性的。 为了简化从 Firebug 到 Firefox 开发者工具的转换，我们写了一个简便的指南 — <a href="/zh-CN/docs/Tools/Migrating_from_Firebug">Firebug 迁移</a>。</p>
<h2 id="贡献">贡献</h2>
<p>如果你想帮助改进开发者工具，这些资源将帮助你入门。</p>
<div class="twocolumns">
<dl>
<dt><a href="https://devtools-html.github.io/#getting-in-touch">参与其中</a></dt>
<dd>我们的开发者文档解释了如何参与。</dd>
<dt><a href="http://firefox-dev.tools/">提交故障</a></dt>
<dd>一个可用来帮助发现故障的工具。</dd>
</dl>
</div>
|
