在 PC 和移动设备上检查,编辑,调试 HTML,CSS 及 JavaScript。


有关最新的开发者工具和功能,请尝试Firefox开发者版本。

下载Firefox 开发者版本


核心工具

Page Inspector(页面检查器)

The all-new Inspector panel in Firefox 57.

查看和编辑页面内容和布局。可视化页面的许多方面,包括盒子模型,动画和网格布局。

Web Console

The all-new Console in Firefox 57.

查看由页面和JavaScript交互记录的信息

JavaScript Debugger

The all-new Firefox 57 Debugger.html

停止,浏览,检查和修改页面中运行的JavaScript。

Network Monitor(网络监视器)

The Network panel in Firefox 57 DevTools.

查看加载页面时的网络请求。

Performance Tools(性能工具)

分析网站的响应,JavaScript程序和布局性能。

Responsive Design Mode(响应式设计)

Responsive Design mode in Firefox 57.

查看网站或app在不同终端和网络类型上的外观和行为。


更多工具

这些开发者工具也内置在Firefox中。 不像上面的“核心工具”一样常用。

Memory(内存)
判断哪些对象正在使用内存。
Storage Inspector(存储检查器)
检查存在于页面中的cookie,本地存储,indexedDB和session。
DOM Property Viewer(DOM属性查看器)
检查页面上 DOM 属性,函数等.
Developer Toolbar(开发者工具栏)
开发者工具的命令行界面。
Eyedropper(页面取色器)
从页面中选择一种颜色。
Scratchpad(便笺)
Firefox内置的文本编辑器,可让您编写和执行JavaScript。
Style Editor(样式编辑器)
查看和编辑当前页面的CSS样式。
Shader Editor
查看和编辑WebGL使用的顶点和片段着色器。
Web Audio Editor
检查音频上下文中音频节点的图形,并修改其参数。
Taking screenshots(截图)
对整个页面或单个元素的屏幕截图。

See what your users see in their browsers. Test your sites in up to 800 browser and OS combinations with our cross-browser testing tutorial.

Made just for you by Mozilla and Sauce labs.


连接开发者工具

如果您使用快捷键或菜单打开开发者工具, 他们将定位由当前活动选项卡托管的文档。但是,你也可以将这些工具连接到其他目标上,无论是在当前的浏览器中,还是在不同的浏览器中,甚至是不同的设备上。

关于:调试
在浏览器中运行附加组件。
连接到Android的Firefox
将开发者工具连接到在Android设备上运行的Firefox。
连接到iframe
将开发者工具连接到当前页面中的特定iframe。
连接到其他浏览器
将开发者工具连接到Android上的Chrome和iOS上的Safari。

在浏览器调试

默认情况下,开发者工具将附加到网页或Web应用程序。 但是,你也可以将它们连接到浏览器。 这对于浏览器和附加组件开发很有用。

浏览器控制台
查看由浏览器本身和插件记录的信息,并在浏览器里运行JavaScript代码。
浏览器工具箱
将开发工具附加到浏览器本身。

扩展devtools

开发者工具被设计为可扩展的。Firefox附加组件可以访问开发者工具,扩展现有工具和添加新工具。借助远程调试协议,你可以实现自己的调试工具,来调试网站,或使用Firefox工具调试不同的网站。

devtools附加组件示例
使用这些示例来了解如何实现devtools附加组件。
devtools中添加新的面板
编写一个组件,添加一个新的面板到工具箱。
远程调试协议
用于将Firefox开发者工具连接到调试目标的协议,例如Firefox或Firefox OS设备的实例。
源码编辑器
Firefox中内置的代码编辑器,可嵌入你的附加组件中。
Debugger 接口
一个JavaScript代码观察其他JavaScript代码的执行的API。 Firefox开发者工具使用这个API来实现JavaScript调试器。
Web Console自定义输出
如何扩展和自定义 Web ConsoleBrowser Console的输出。

 

Firebug迁移

 

Firebug即将寿终正寝( Firebug lives on in Firefox DevTools),我们明白,有些人会发现迁移到另一个不太熟悉的DevTools是具有挑战性的。 为了简化从Firebug到Firefox开发者工具的转换,我们写了一个简便的指南 — Firebug迁移


贡献

如果你想帮助改进开发者工具,这些资源将帮助你入门。

参与其中
Mozilla维基页面解释如何参与我们。
firefox-dev.tools
一个帮助发现bug的工具。

加入 Developer tools 社区

请选择你喜欢的方式加入我们: