在 PC 和移动设备上检查，编辑，调试 HTML、CSS 及 JavaScript。
如果你在寻找有关使用 Firefox 开发者工具的信息，你来对地方了——这个页面提供了核心工具和附加工具的详尽信息，以及更深层的信息，比如如何连接调试 Firefox 安卓版，如何拓展开发者工具和如何调试浏览器。
请探索侧边栏的链接，进一步浏览页面。如果你有任何有关开发者工具的反馈或问题，请在邮件列表或 IRC 频道（请查阅底部的社区链接）上向我们发送消息。如果你有任何特别关于文档的反馈或问题，MDN 讨论适合发帖。
注意：如果你是 Web 开发的初学者并且使用开发者工具，我们的学习 Web 开发文档可能会对你有所帮助 — 查看初识 Web和什么是浏览器开发者工具？ 作为一个较为合适的出发点。
核心工具
在右侧的开发工具, 在windows或者Linux使用 Ctrl + Shift + I , 或者在Mac OS X Cmd + Opt + I , 有几个按钮可用于执行操作或更改工具设置.
右手边的省略号菜单包括了若干命令，让你执行操作或改变工具设定。
 |
这个按钮只有在页面中包含多个 iframe 时才会显示。点击显示当前页面的 iframe 列表，选择你想操作的哪个。 |
 |
点击这个按钮来给当前页面截图。（注意：这个特性默认不会打开，只有在设置里开启，图标才会显示。） |
 |
切换至响应式布局设计。 |
 |
打开包括停靠模式、显示或隐藏分离式控制台和开发者工具设置的菜单。这个菜单还包括开发者工具的文档和 Mozilla 社区的链接。 |
 |
关闭开发者工具。 |
Page Inspector(页面检查器)
查看和编辑页面内容和布局。可视化页面的许多方面，包括盒子模型，动画和网格布局。
Web Console
查看由页面和JavaScript交互记录的信息
JavaScript Debugger
停止，浏览，检查和修改页面中运行的JavaScript。
Network Monitor(网络监视器)
查看加载页面时的网络请求。
Performance Tools(性能工具)
分析网站的响应，JavaScript程序和布局性能。
Responsive Design Mode(响应式设计)
查看网站或app在不同终端和网络类型上的外观和行为。
Accessibility inspector(无障碍环境)
提供了一种访问页面的无障碍树的方法，允许你查看遗漏或需要注意的东西。
注意：称呼开发者工具的 UI 的整体性的术语是 Toolbox（工具箱）。
更多工具
这些开发者工具也内置在Firefox中。 不像上面的“核心工具”一样常用。
- Memory(内存)
- 判断哪些对象正在使用内存。
- Storage Inspector(存储检查器)
- 检查存在于页面中的cookie，本地存储，indexedDB和session。
- DOM Property Viewer(DOM属性查看器)
- 检查页面上 DOM 属性，函数等.
- Eyedropper(页面取色器)
- 从页面中选择一种颜色。
- Scratchpad(便笺)
- Firefox内置的文本编辑器，可让您编写和执行JavaScript。
- Style Editor(样式编辑器)
- 查看和编辑当前页面的CSS样式。
- Shader Editor(着色器编辑器)
- 查看和编辑WebGL使用的顶点和片段着色器。
- Web Audio Editor(网络音频编辑)
- 检查音频上下文中音频节点的图形，并修改其参数。
- Taking screenshots(截图)
- 对整个页面或单个元素的屏幕截图。
- Measure a portion of the page(测量部分页面)
- 测量网页的特定区域。
- Rulers(标尺)
- 在网页上添加水平和垂直标尺的叠加层。
连接开发者工具
如果您使用快捷键或菜单打开开发者工具, 他们将定位由当前活动选项卡托管的文档。但是，你也可以将这些工具连接到其他目标上，无论是在当前的浏览器中，还是在不同的浏览器中，甚至是不同的设备上。
- about:debugging
- 在浏览器中运行附加组件。
- 连接到 Android 的 Firefox
- 将开发者工具连接到在 Android 设备上运行的 Firefox 。
- 连接到 iframe
- 将开发者工具连接到当前页面中的特定iframe。
- 连接到其他浏览器
- 将开发者工具连接到 Android 上的 Chrome 和 iOS 上的 Safari。
调试浏览器
默认情况下，开发者工具将附加到网页或Web应用程序。 但是，你也可以将它们连接到浏览器。 这对于浏览器和附加组件开发很有用。
扩展 devtools
开发者工具被设计为可扩展的。Firefox附加组件可以访问开发者工具，扩展现有工具和添加新工具。借助远程调试协议，你可以实现自己的调试工具，来调试网站，或使用Firefox工具调试不同的网站。
- devtools 附加组件示例
- 使用这些示例来了解如何实现devtools附加组件。
- devtools 中添加新的面板
- 编写一个组件，添加一个新的面板到工具箱。
- 远程调试协议
- 用于将Firefox开发者工具连接到调试目标的协议，例如Firefox或Firefox OS设备的实例。
- 源码编辑器
- Firefox中内置的代码编辑器，可嵌入你的附加组件中。
Debugger接口- 一个JavaScript代码观察其他JavaScript代码的执行的API。 Firefox开发者工具使用这个API来实现JavaScript调试器。
- Web Console自定义输出
- 如何扩展和自定义 Web Console 和 Browser Console的输出。
从 Firebug 迁移
Firebug 即将寿终正寝(Firebug lives on in Firefox DevTools)，我们明白，有些人会发现迁移到另一个不太熟悉的 DevTools 是具有挑战性的。 为了简化从 Firebug 到 Firefox 开发者工具的转换，我们写了一个简便的指南 — Firebug 迁移。
贡献
如果你想帮助改进开发者工具，这些资源将帮助你入门。
- 参与其中
- Mozilla Wiki 页面解释如何参与我们。
- firefox-dev.tools
- 一个帮助发现bug的工具。
加入 Developer tools 社区
- IRC: #devtools (了解 IRC)
- Team info: Dev tools wiki
- Blog: Hacks blog