在 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(页面检查器)

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 all-new Firefox 57 Debugger.html

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

Performance Tools(性能工具)

Performance Tools in Firefox 57 Developer Tools

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

Responsive Design Mode(响应式设计)

Responsive Design mode in Firefox 57.

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

Accessibility inspector(无障碍环境)

Performance Tools in Firefox 57 Developer Tools

提供了一种访问页面的无障碍树的方法,允许你查看遗漏或需要注意的东西。

 

注意:称呼开发者工具的 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(标尺)
在网页上添加水平和垂直标尺的叠加层。

 

体验最新的开发者工具和特性,试一试 Firefox 开发者版本吧!

下载 Firefox 开发者版本

连接开发者工具

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

about:debugging
在浏览器中运行附加组件。
连接到 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 Wiki 页面解释如何参与我们。
firefox-dev.tools
一个帮助发现bug的工具。

加入 Developer tools 社区

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