Firefox DevTools用户文档¶

Firefox Developer Tools是一组内置于Firefox中的web开发工具。您可以使用它们来检查、编辑和调试HTML、CSS和JavaScript。

本节包含所有工具的详细指南，以及有关如何调试Firefox for Android、如何扩展DevTools以及如何调试整个浏览器的信息。

如果您对DevTools有任何反馈或想为项目做出贡献，您可以加入DevTools社区.

注释

如果您刚刚开始web开发并使用开发工具，我们的学习文档将帮助您-请参阅Web入门和什么是浏览器开发工具？以获得良好的起点。

核心工具¶

您可以从菜单中选择打开Firefox Developer Tools工具>Web开发人员>Web开发工具或使用键盘快捷键Ctrl键+班次+我或2012财年在Windows和Linux上，或命令+选择+我在macOS上。

开发人员工具右侧的省略号菜单包含多个命令，可用于执行操作或更改工具设置。

	只有在第页。单击它可显示当前页面并选择要使用的对象。
	单击此按钮可截取当前页面的屏幕快照。(注：此功能未由启用默认，必须在设置中启用，图标才会出现。）
	切换响应式设计模式
	打开包含停靠选项的菜单，可以显示或隐藏拆分控制台和开发人员工具设置。菜单还包含指向Firefox文档的链接Web工具和Mozilla社区。
	关闭开发人员工具

页面检查器¶

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

Web控制台¶

查看网页记录的消息，并使用JavaScript与页面交互。

JavaScript调试器¶

停止、单步执行并检查页面上运行的JavaScript。

网络监视器¶

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

性能面板¶

分析站点的一般响应性、JavaScript和布局性能。

响应式设计模式¶

查看您的网站或应用程序在不同设备和网络类型上的外观和行为。

无障碍检查员¶

提供访问页面的辅助功能树的方法，允许您检查缺少的内容或其他需要注意的内容。

应用程序面板¶

提供用于检查和调试现代web应用程序（也称为渐进式Web应用程序). 这包括检查服务人员和web应用清单

注释

DevTools都在其中运行的UI的统称是工具箱

连接开发人员工具¶

如果使用打开开发人员工具键盘快捷键或等效的菜单项，它们将以当前活动选项卡承载的文档为目标。但您也可以在当前浏览器、不同浏览器甚至不同设备中将这些工具附加到各种其他目标。

关于：调试	调试浏览器中运行的插件、内容选项卡和工作线程。
连接Firefox for Android	将开发工具连接到Android设备上运行的Firefox实例。
连接到iframe	将开发人员工具连接到当前页面中的特定iframe。

调试浏览器¶

默认情况下，开发人员工具附加到网页或web应用程序。但您也可以将它们作为一个整体连接到浏览器。这对浏览器和附加组件开发很有用。

浏览器控制台	查看浏览器本身和插件记录的消息，并在浏览器范围内运行JavaScript代码。
浏览器工具箱	将开发人员工具附加到浏览器本身。

扩展DevTools¶

有关扩展Firefox DevTools的信息，请参阅扩展开发人员工具在扩充套件MDN部分。

从Firebug迁移¶

Firebug的寿命已到尽头（请参阅Firebug在Firefox DevTools中继续存在我们很感激有些人会发现迁移到另一组不太熟悉的DevTools是一项挑战。为了简化从Firebug到Firefox开发工具的过渡，我们编写了一个方便的指南-从Firebug迁移

贡献¶

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

参与进来	我们的社区网站解释了如何参与。
错误.ffirefox-dev.tools	帮助查找要处理的错误的工具。
读取源文档	Firefox DevTools源代码文档。

存储器	找出哪些对象正在使用内存。
存储检查员	检查页面中存在的cookie、本地存储、indexedDB和会话存储。
DOM属性查看器	检查页面的DOM属性、函数等。
滴管	从页面中选择颜色。
样式编辑器	查看和编辑当前页面的CSS样式。
截屏	拍摄整个页面或单个元素的屏幕截图。
测量页面的一部分	测量网页的特定区域。
标尺	在网页上叠加水平标尺和垂直标尺
自定义格式化程序	自定义对象在DevTools中的显示方式。
JavaScript跟踪程序	实时显示所有JavaScript函数调用。