从 Firebug 迁移¶
当您从 Firebug 迁移到 Firefox 开发者工具时，您可能想知道 Firebug 中您喜欢的功能在开发者工具中在哪里可用。以下列表旨在帮助 Firebug 用户找到进入开发者工具的方法。
有关最新的开发者工具和功能，请尝试使用 Firefox 开发者版。
下载 Firefox 开发者版常规¶
激活¶
Firebug 的激活是基于 URL 的，并遵守 同源策略。这意味着，当您在同一来源的不同选项卡中打开页面时，Firebug 会自动打开。当您在同一选项卡中打开不同来源的页面时，它会自动关闭。另一方面，DevTools 的激活是基于选项卡的。这意味着，当您在一个选项卡中打开 DevTools 时，即使您在不同的网站之间切换，它们也会保持打开状态。但是，当您切换到另一个选项卡时，它们会被关闭。
打开工具¶
可以通过按 F12 打开 Firebug。要打开它以检查元素，可以按 Ctrl + Shift + C / Cmd + Opt + C。DevTools 共享相同的快捷方式，但也提供 不同面板的快捷方式。例如，网络监视器 可以通过 Ctrl + Shift + Q / Cmd + Opt + Q 打开，Web 控制台 可以通过 Ctrl + Shift + K / Cmd + Opt + K 打开，调试器 可以通过 Ctrl + Shift + S / Cmd + Opt + S 打开。
Web 控制台¶
Web 控制台 等同于 Firebug 的控制台面板。它显示与网页关联的日志信息，并允许您通过其 命令行 执行 JavaScript 表达式。两者之间的显示方式略有不同。这可能会在 bug 1269730 中更改。
过滤日志消息¶
Firebug 提供两种过滤日志消息的方法，通过选项菜单和通过工具栏内的过滤按钮。开发者工具控制台通过其工具栏内部的 过滤按钮 提供类似的功能——集中在一个地方。
命令行 API¶
Firebug 中的命令行 API 为您的方便提供了一些特殊功能。开发者工具命令行 有一些共同的功能，但也有一些其他功能，并且缺少其他一些功能。
控制台 API¶
要将内容记录到网页内的控制台，Firebug 在页面内提供了一个控制台 API。开发者工具共享 相同的 API，因此您的 console.* 语句将继续有效。
保留日志¶
在 Firebug 中，您可以单击工具栏中的“保留”按钮以在页面导航和重新加载之间保留已记录的消息。在 DevTools 中，此选项称为 启用持久日志，可在工具箱选项面板中找到。
服务器日志¶
像 FirePHP 这样的 Firebug 扩展允许将服务器端消息记录到 Firebug 控制台。此功能已 集成到 DevTools 中，使用 ChromeLogger 协议，并且不需要安装任何扩展程序。
命令历史记录¶
通过 Firebug 命令行中的按钮提供的 命令历史记录，可以通过在 DevTools 命令行中按 ↑/↓ 来获得。
检查对象属性¶
通过单击控制台中记录的对象，您可以在 DOM 面板中检查对象的属性和方法。在 Firefox DevTools 中，您也可以检查对象。区别在于它们 在 Web 控制台内的侧边栏中显示属性和方法。
显示网络请求¶
Firebug 中的控制台面板允许记录 AJAX 请求（又名 XMLHttpRequest）。此选项也可在 DevTools Web 控制台中通过“网络”>“XHR”获得。此外，Web 控制台甚至允许通过“网络”>“日志”显示所有其他网络请求。
查看 JSON 和 XML 结构¶
要查看 AJAX 请求的 JSON 和 XML 响应，Firebug 在控制台面板中扩展请求时具有特殊的选项卡。DevTools Web 控制台在“响应”选项卡下直接显示这些结构。
多行命令行¶
Firebug 的控制台有一个名为命令编辑器的多行命令行。DevTools 有一个 侧边栏，就像命令编辑器一样。
响应预览¶
当网络请求记录到控制台并在 Firebug 中展开时，有一个“预览”选项卡。Web 控制台在“响应”选项卡中显示预览。目前缺少 HTML、XML 和 SVG 的预览，这在 bug 1247392 和 bug 1262796 中跟踪，但是当您单击请求的 URL 时，您将切换到 网络监视器，它有一个“预览”选项卡。
检查器¶
Firebug 有一个 HTML 面板，允许编辑 HTML/XML/SVG 及其相关的 CSS。在 DevTools 中，此功能由 页面检查器 提供。
编辑 HTML¶
在页面检查器中，标签属性和内容可以像在 Firebug 中一样内联编辑。除此之外，它还允许内联编辑标签名称。
您还可以直接编辑 HTML。在 Firebug 中，您可以通过右键单击节点并在上下文菜单中单击“编辑 HTML…”来执行此操作。在 DevTools 中，此选项也可通过上下文菜单获得。那里的选项称为 作为 HTML 编辑。目前仅缺少更改的实时预览，这在 bug 1067318 和 bug 815464 中跟踪。
编辑 CSS¶
这两个工具都允许以类似的方式查看和编辑与节点视图中选择的元素相关的 CSS 规则。Firebug 为此有一个样式侧边栏，DevTools 有一个 规则侧边栏。
在 Firebug 中，您可以通过右键单击并从上下文菜单中选择“添加规则…”来添加新规则。DevTools 也为此提供了上下文菜单选项，名为 添加新规则，此外在规则面板的工具栏中还有一个 + 按钮 以创建新规则。
要编辑元素样式，即元素的 style 属性的 CSS 属性，在 Firebug 中，您必须右键单击样式侧边栏并从上下文菜单中选择“编辑元素样式…”。DevTools 为此显示了一个 element {} 规则，只需单击它即可开始编辑属性。
CSS 自动完成¶
就像 Firebug 一样，规则视图为 CSS 属性名称及其值提供了自动完成功能。一些属性值尚未实现自动完成，此问题已在 bug 1337918 中跟踪。
复制和粘贴 CSS¶
Firebug 的样式侧边栏以及 DevTools 的规则侧边栏在其上下文菜单中提供了复制 CSS 规则或样式声明的选项。DevTools 还提供了复制规则选择器和将禁用属性声明复制为注释掉的选项。但是，它们缺少复制整个样式声明的选项，尽管可以通过在面板中选择它们并通过按 Ctrl + C 或通过上下文菜单复制选择来实现。
DevTools 的规则侧边栏在将 CSS 粘贴到其中时更加智能。您可以将整个样式声明粘贴到现有规则的属性声明中，注释掉的属性声明将自动禁用。
切换伪类¶
Firebug 允许您通过样式侧边栏的选项菜单切换 CSS 伪类 :hover、:active 和 :focus。在 DevTools 中，有两种方法可以执行相同的操作。第一种是通过规则侧边栏内的伪类面板切换它们。第二种是在节点视图中右键单击元素，并通过 上下文菜单 切换伪类。
检查 CSS 简写属性¶
CSS 简写属性 可以通过在样式侧边栏中设置“展开简写属性”选项拆分为其相关的完整属性。DevTools 的规则面板更加智能，允许您通过单击其旁边的展开按钮来展开单个简写属性。
仅显示应用的样式¶
Firebug 中的样式侧边栏有一个选项，可以仅显示应用于所选元素的 CSS 规则的属性，并隐藏所有被覆盖的样式。DevTools 的 规则侧边栏 中没有此功能，但在 bug 1335327 中有请求。
检查盒模型¶
在 Firebug 中，可以通过布局侧边栏检查 盒模型。在 DevTools 中，盒模型是计算侧边栏的一部分。当在盒模型视图中悬停时，这两个工具都会突出显示页面中盒模型的不同部分。此外，这两个工具都允许您通过单击它们来内联编辑不同的值。
检查计算样式¶
CSS 属性的计算值显示在 DevTools 的 计算侧边栏 中，就像 Firebug 的计算侧边栏一样。不同之处在于，在 DevTools 中，属性始终按字母顺序排列，而不是分组（请参阅 bug 977128），并且没有隐藏 Mozilla 特定样式的选项，因此有一个输入字段允许过滤属性。
检查事件¶
分配给元素的事件显示在 Firebug 的事件侧边栏中。在 DevTools 中，当单击节点视图中元素旁边的“ev”小图标时，它们会显示。这两个工具都允许显示包装的事件监听器（例如，包装在 jQuery 函数中的监听器）。为了改进 DevTools 的 UI，还有一个请求是在其中添加一个类似于 Firebug 中的事件侧边栏（请参阅 bug 1226640）。
在 DOM 变异时停止脚本执行¶
在 Firebug 中，您可以在 DOM 变异时中断，这意味着当元素发生更改时，脚本执行将在导致更改的 JavaScript 文件中的相关行处停止。此功能可以通过“中断在变异时”按钮全局启用，或者可以针对每个元素和不同类型的更改（如属性更改、内容更改或元素删除）单独启用。不幸的是，DevTools 还没有此功能（请参阅 bug 1004678）。要停止那里的脚本执行，您需要在 调试器面板 中修改行的代码处设置断点。
通过 CSS 选择器或 XPath 搜索元素¶
Firebug 允许通过 CSS 选择器或 XPath 在 HTML 面板中搜索元素。DevTools 的检查器面板也允许搜索 CSS 选择器。它甚至显示匹配的 ID 或类的列表。但是，不支持通过 XPath 搜索（请参阅 bug 963933）。
调试器¶
Firebug 中的脚本面板是什么，DevTools 中的 调试器面板 就是什么。两者都允许您调试在网站上执行的 JavaScript 代码。
在源之间切换¶
Firebug 有一个脚本位置菜单，其中列出了与网站相关的所有 JavaScript 源。这些源可以是静态的，即文件，也可以是动态生成的（即通过事件处理程序、eval()、new Function() 等执行的脚本）。在 DevTools 的调试器面板中，脚本列在左侧的 源侧边栏 中。仅当动态生成的脚本 通过 //# sourceURL 注释命名 时，才会在其中列出。
管理断点¶
在 Firebug 中，您可以设置不同类型的断点，这些断点都列在断点侧边栏中。在 DevTools 中，断点显示在 源侧边栏 中每个脚本源的下方。这些面板允许您启用和禁用单个或所有断点，以及删除单个断点或一次删除所有断点。它们目前仅允许设置脚本断点。XHR、DOM、Cookie 和错误断点尚不受支持（请参阅 bug 821610、bug 1004678、bug 895893 和 bug 1165010）。虽然没有单个 JavaScript 错误的断点，但在 调试器面板选项 中有一个“在异常时暂停”设置。
单步执行代码¶
脚本执行停止后，您可以使用继续（F8）、单步跳过（F10）、单步进入（F11）和单步跳出（Shift + F11）选项逐步执行代码。它们在两个工具中的工作方式相同。
检查调用堆栈¶
当脚本执行暂停时，Firebug 会在其堆栈侧边栏中显示函数调用堆栈。在其中，函数与它们的调用参数一起列出。在 DevTools 中，函数调用堆栈显示在 调用堆栈侧边栏 中。要在 DevTools 中查看调用参数，您需要查看 变量侧边栏。
检查变量¶
Firebug 中的监视侧边栏默认显示 window 对象（全局作用域）。当脚本执行停止时，它会显示当前调用堆栈帧中可用的不同变量作用域。此外，它允许您添加和操作监视表达式。DevTools 有一个 变量侧边栏，其工作原理基本相同。主要区别在于，当脚本执行未停止时，它是空的，即它不显示 window 对象。尽管您可以通过 DOM 属性查看器 或 Web 控制台 检查该对象。
样式编辑器¶
Firefox DevTools 中的 样式编辑器 允许您检查和编辑页面的不同 CSS 样式表，就像 Firebug 的 CSS 面板一样。除此之外，它还允许创建新的样式表，导入现有的样式表并将其应用于页面。它还允许您切换单个样式表。
在源之间切换¶
Firebug 的 CSS 面板允许使用 CSS 位置菜单在不同的 CSS 源之间切换。样式编辑器为此目的提供了一个 侧边栏。
编辑样式表¶
Firebug 的 CSS 面板提供了三种不同的编辑样式表的方法。默认方法是像在样式侧边栏中一样内联编辑它们。此外，它还具有源和实时编辑模式，允许像在文本编辑器中一样编辑选定的样式表。DevTools 的样式编辑器只有一种编辑样式表的方法，它对应于 Firebug 的实时编辑模式。
试用 CSS 选择器¶
Firebug 的选择器侧边栏提供了一种验证 CSS 选择器的方法。它列出了与输入的选择器匹配的所有元素。DevTools 还没有此功能，但已在 bug 1323746 中请求。
在样式表中搜索¶
Firebug 允许通过搜索字段在样式表中搜索。DevTools 中的样式编辑器也提供了一种在样式表中搜索的方法，尽管目前没有在多个表中搜索的选项（请参阅 bug 889571，并且也不支持通过正则表达式搜索（请参阅 bug 1362030）。
性能工具¶
Firebug 允许通过控制台面板中的“分析”按钮或 console.profile() 和 console.profileEnd() 命令来分析 JavaScript 性能。DevTools 提供了关于性能分析的先进工具。可以通过 console.profile() 和 console.profileEnd()（就像在 Firebug 中一样）或通过 性能工具 中的“开始记录性能”按钮创建分析。 调用树 的输出是最接近 Firebug 中输出的，但性能面板提供的不仅仅是 JavaScript 性能的信息。例如，它还提供了有关 HTML 解析或布局的信息。
这是 Firebug 和 DevTools 差异最大的部分，因为输出完全不同。虽然 Firebug 专注于 JavaScript 性能，并提供有关分析会话期间 JavaScript 函数调用的详细信息，但 DevTools 中的性能工具提供了关于网站性能的广泛信息，但没有深入到 JavaScript 函数调用的细节。
查看 JavaScript 调用性能¶
最接近 Firebug 分析器输出的是性能面板中的 调用树视图。就像在 Firebug 中一样，它在“总时间”下列出每个函数调用的总执行时间，以及在“样本”下的调用次数，“自身时间”下的函数内花费的时间以及相对于总执行时间的相关百分比。
注意
DevTools 的“调用树”视图中列出的时间和百分比与 Firebug 中显示的不相同，因为它使用不同的 API 对 JavaScript 代码的执行进行采样。
跳转到函数声明¶
与 Firebug 的分析器输出类似，DevTools 的“性能”工具的调用树视图允许跳转到定义被调用 JavaScript 函数的代码行。在 Firebug 中，函数的源代码链接位于控制台面板输出的右侧，而在 DevTools 中，链接位于调用树视图的右侧。
网络监视器¶
要监视网络请求，Firebug 提供了一个“网络”面板。Firefox DevTools 允许使用网络监视器检查网络流量。这两个工具都提供类似的信息，包括一个时间线，显示网络请求的请求和响应时间。
检查请求信息¶
Firebug 和 Firefox DevTools 的网络监视器都允许您通过单击请求来检查有关该请求的信息。唯一的区别是 Firebug 在请求下方显示信息，而网络监视器在侧边栏中显示信息。
在这两个工具中，都有不同的选项卡包含所选请求的不同类型的信息。它们包含“标头”、“参数”、“响应”和“Cookie”面板。响应的预览显示在专门命名的面板中，例如“HTML”。网络监视器为此目的提供了一个“预览”面板。它尚未提供有关缓存数据的信息（请参阅bug 859051），但除了 Firebug 的信息外，还提供了一个“安全”选项卡和一个显示网络时间详细信息的“时间”选项卡。
查看请求时间¶
Firebug 通过将鼠标悬停在其“网络”面板中的“时间线”列上，提供了有关与请求相关的网络时间详细的信息。网络监视器在选择请求时，在时间侧边栏中显示此信息。
查看远程地址¶
请求的远程地址显示在 Firebug 中的“远程 IP”列中。在网络监视器中，当选择请求时，地址显示在“标头”选项卡中的“远程地址”中。
在请求中搜索¶
Firebug 中的搜索字段允许在请求中搜索。Firefox DevTools 中的搜索字段按输入的字符串过滤请求。
Firebug 允许通过选中其搜索字段选项中的“响应主体”来搜索网络请求的响应主体。此功能在网络监视器中尚不可用，但在bug 1334408中已提出请求。虽然尚无法搜索响应主体，但网络监视器允许按不同的请求属性进行过滤。
存储检查器¶
Firebug 中的“Cookie”面板显示与页面创建的 Cookie 相关的信息，并允许操作它们存储的信息。在 DevTools 中，此功能位于存储检查器中。与 Firebug 不同的是，存储检查器不仅允许检查 Cookie，还允许检查其他类型的存储，例如本地存储和会话存储、缓存和IndexedDB 数据库。
反馈¶
我们始终乐于回应反馈和问题。如果您有任何疑问或观点，请随时在我们的DevTools Discourse 论坛上分享。