在 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 社区的链接。
关闭开发者工具。

页面查看器

The all-new Inspector panel in Firefox 57.

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

Web 控制台

The all-new Console in Firefox 57.

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

JavaScript 调试器

The all-new Firefox 57 Debugger.html

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

网络监视器

The all-new Firefox 57 Debugger.html

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

性能工具

Performance Tools in Firefox 57 Developer Tools

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

响应式设计模式

Responsive Design mode in Firefox 57.

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

无障碍环境

Performance Tools in Firefox 57 Developer Tools

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

 

注意:称呼开发者工具的 UI 的整体性的术语是 Toolbox(工具箱)。

更多工具

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

内存
判断哪些对象正在使用内存。
存储检查器
检查存在于页面中的 cookie、本地存储、indexedDB 和 session。
DOM 属性查看器
检查页面上 DOM 属性,函数等。
页面取色器
从页面中选择一种颜色。
便笺
Firefox 内置的文本编辑器,可让您编写和执行 JavaScript。
样式编辑器
查看和编辑当前页面的 CSS 样式。
着色器编辑器
查看和编辑 WebGL 使用的顶点和片段着色器。
网络音频编辑器
检查音频上下文中音频节点的图形,并修改其参数。
截图
对整个页面或单个元素的屏幕截图。
测量部分页面
测量网页的特定区域。
标尺
在网页上添加水平和垂直标尺的叠加层。

 

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

下载 Firefox 开发者版本

连接开发者工具

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

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

调试浏览器

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

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

扩展开发者工具

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

开发者工具附加组件示例
使用这些示例来了解如何实现开发者工具附加组件。
在开发者工具中添加新的面板
编写一个组件,添加一个新的面板到工具箱。
远程调试协议
用于将 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),我们明白,迁移到一个不太熟悉的开发者工具是具有挑战性的。 为了简化从 Firebug 到 Firefox 开发者工具的转换,我们写了一个简便的指南 — Firebug 迁移

贡献

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

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

加入 Developer tools 社区

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