Firefox 开发者工具

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

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

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

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

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

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

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

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

注意：称呼开发者工具的 UI 的整体性的术语是 Toolbox（工具箱）。

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

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

对于有关拓展 Firefox 开发者工具的信息，详见在 MDN 的浏览器拓展板块的拓展开发者工具。

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

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

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