在 PC 和移动设备上检查，编辑，调试 HTML，CSS 及 JavaScript。想使用最新版本的开发者工具的话请下载 Firefox 开发者版。
创作
网站与网页应用的编辑器
- Scratchpad（代码草稿纸）
- 一个集成在Firefox中的，用于编写与执行JavaScript的文本编辑器。
- Style Editor（样式编辑器）
- 预览或编辑在最新页面中的CSS（层叠样式表单）。
- Shader Editor
- 使用WebGL预览或编辑vertex与fragment shaders。
- Web音频编辑器
- 检查音频上下文中音频节点的图形，并修改其参数。
探索与调试
检查、探索、调试网站和网页应用
- 工具箱
- Toolbox 是火狐大多数內建工具所存在的地方。
- Console（控制台 ）
- 查看网页产生的日志，也可以使用 JavaScript 修改网页。
- 查看、修改 HTML 及 CSS。
- JavaScript Debugger（调试器）
- 中断，逐步运行，检查及修页面上正在运行的JavaScript。
- Network Monitor（网络监视器）
- 在网页加载时查看网络请求。
- Storage Inspector（存储查看器）
- 检查页面中存在的Cookie，本地存储，indexedDB 和会话存储。
- DOM Inspector（DOM查看器）
- 检查页面 DOM 属性，函数等等。
- 开发者工具栏
- 开发者工具的命令行。
- 远程调试
- 将开发工具连接到远程机器的 Firefox。
- Eyedropper（页面取色器）
- 从页面中选择一种颜色。
- about:debugging
- 调试附加组件 和 workers 的控制面板。
- Working with iframes
- 定位特定的 iframe。
移动平台
移动平台上的开发工具
- 响应设计模式
- 不需要改变浏览器窗口大小，就可以查看网页或者Web APP在不同屏幕尺寸的效果。
- 应用管理
- 已经被 WebIDE 替代了。
- WebIDE
- 使用 Firefox OS 模拟器或真实的Firefox OS 设备创建，编辑，运行和调试网络应用程序。WebIDE 是 App Manager 的替代品，从 Firefox 33 开始可以使用。
- Firefox OS 模拟器
- 在没有一个真实的 Firefox OS 装置的情况下，运行和调试你的 Firefox OS app
- 调试 Android 上的 Firefox
- 将开发者工具连接到 Android 上的 Firefox.
- Debugging Firefox for Android with WebIDE
- 对于 Desktop Firefox 36+ / Android Firefox 35+，有更简单的。
- Valence
- 将开发者工具连接到 Android 上的 Chrome 或者 iOS 上的 Safari。
性能
诊断和修复性能问题。
- Performance Tool
- 分析网站的响应能力，JavaScript 和布局效果。
- 内存
- 判断哪些对象正在使用内存。
- Frame rate graph
- 查看网站的帧率。
- Waterfall
- 查看浏览器在运行您的网站时在做什么。
- Call Tree
- 找出 JavaScript 费时的地方。
- Flame Chart
- 查看堆栈中函数的调用等。
- Paint Flashing Tool
- 高亮显示页面中因响应事件而重绘的部分。
- Reflow Event Logging
- 在控制台中查看 reflow 事件。
- 网络状况表现
- 查看网页加载各个部分耗费的时间。
为浏览器找出漏洞
默认地，开发工具被附加到 web 网页或者 web app。可以把开发工具附加到整个浏览器上，这样有助于浏览器和插件的开发。
浏览器控制台
- 查看浏览器和插件记录的日志，并可以在浏览器作用域中执行JavaScript代码。
-
浏览器工具箱
- 把开发工具附加到浏览器。
拓展开发工具
开发工具都是可拓展的。火狐插件可以访问开发工具和组件，拓展已经存在的工具或增加新的工具。通过远程调试协议，可以实现自定义的客户端和服务端调试。
- Add a new panel to the devtools
- 编写一个将一个新面板添加到开发者工具的附加组件。
- Remote Debugging Protocol 远程调试协议
- 用于将Firefox开发工具连接到调试目标（如Firefox实例或Firefox OS设备）的协议。
- 源码编辑器
- 火狐内置的代码编辑器，可以嵌入到插件中。
- 调试器界面
- 可以让 JavaScript 代码获取其他 JavaScript 代码执行信息的接口。火狐的开发工具使用该接口实现了JavaScript代码的调试。
- Web Console custom output
- 如何扩展及自定义 Web Console 和 Browser Console 的输出。
- Example devtools add-ons
- 通过例子来了解如何实现一个附加组件。
更多参考资源
本小结介绍了一些不是Mozilla开发者工具团队维护的一些资源。这些资源被web开发者广泛的使用，我们已经在火狐add-ons附加软件中加入了其中一些，完整的工具列表请看Web Development" category on addons.mozilla.org.。
- Firebug
- Firebug是一个功能非常强大的web开发工具，功能包括JavaScript代码调试，HTML和CSS代码的查看和编辑，还有网络的监控。
- DOM Inspector DOM检查器
- 检查，浏览和编辑网页或XUL窗口。
- Web Developer
- 将带有各种 Web 开发人员工具的菜单和工具栏添加到浏览器。
- Webmaker Tools
- Mozilla开发的一套工具，旨在帮助人们开始 Web 开发。
- W3C Validators
- W3C网站有很多校验 HTML 和 CSS 样式正确性的工具。
- ESHint
- JavaScript 代码分析工具。
加入 Developer tools 社区
请选择你喜欢的方式加入我们：
- IRC: #devtools (了解 IRC)
- Team info: Dev tools wiki
- Blog: Hacks blog