MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

Firefox 开发工具

翻译正在进行中。

在 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 社区