重新介绍 Firefox 开发者工具，第一部分：Web 控制台和 JavaScript 调试器

这是五部分中的第一部分，专注于 Firefox 中内置的开发者工具，它们的特性以及我们目前对它们所处的位置。其目的是向您展示所有可用功能，进度和我们正在努力的方向。

Firefox 4 推出了 Web 控制台，这是内置于 Firefox 的第一个新开发者工具。从那时起，我们一直在为开发者工具添加更多功能，这些工具现在可以执行各种功能，并可用于调试和分析桌面 Firefox、Firefox OS 和 Firefox for Android 上的 Web 应用程序。

cola1

这是我们一系列文章中的第一篇，我们将探讨自 Firefox 4 以来开发者工具所取得的进展。我们将在一个简短的屏幕录像中展示每个工具，然后用几个屏幕录像来结束，这些屏幕录像将演示特定的工作流程模式，这些模式将帮助您充分利用开发者工具。这些将包括移动开发、更改和调试基于 CSS 的应用程序等场景。

在这第一篇文章中，我们介绍了最新的 Web 控制台和 JavaScript 调试器。

Web 控制台

Web 控制台主要用于显示与当前加载的网页相关的的信息。这包括 HTML、CSS、JavaScript 以及安全警告和错误。此外，网络请求也会被显示，并且控制台会指示它们是成功还是失败。当检测到警告和错误时，Web 控制台还会提供指向导致问题的代码行的链接。通常，Web 控制台是调试未正常运行的 Web 应用程序的第一站。

webconsole

Web 控制台还允许您在页面上下文中执行 JavaScript。这意味着您可以检查页面定义的对象，在页面的范围内执行函数，并使用 CSS 选择器访问特定元素。以下屏幕录像介绍了 Web 控制台的功能概述。

有关更多信息，请查看 MDN Web 控制台文档。

JavaScript 调试器

JavaScript 调试器用于调试和优化 Web 应用程序当前使用的 JavaScript。调试器可用于调试在 Firefox OS 和 Firefox for Android 以及 Firefox 桌面中运行的代码。它是一个功能齐全的调试器，提供监视表达式、作用域变量、断点、条件表达式、单步执行、单步跳过和运行至结束的功能。此外，您可以在调试器暂停应用程序时更改运行时的变量值。

debugger

以下屏幕录像展示了 JavaScript 调试器的部分功能。

有关 JavaScript 调试器的更多信息，请查看 MDN 调试器文档。

了解更多

这些屏幕录像对这些工具的主要功能进行了简要介绍。有关所有开发者工具的完整详细信息，请查看完整的 MDN 工具文档。

即将推出

在本系列的下一篇文章中，我们将深入研究样式编辑器和 Scratchpad。请在评论中告诉我们您希望看到哪些功能的更详细解释。

技术布道者和 Mozilla Hacks 编辑。就 HTML5、JavaScript 和开放网络进行演讲和博客写作。Robert 坚信 HTML5 和开放网络，自 1999 年以来一直从事网页前端开发工作 - 在瑞典和纽约市。他还在 http://robertnyman.com 上定期写博客，喜欢旅行和结识新朋友。

更多 Robert Nyman [名誉编辑] 的文章…

57 条评论

jamEs

我几乎可以使用 Firefox 开发者工具，但我必须等到您实际展示像 Firebug 一样的边距和填充突出显示。我发现自己经常使用该功能，这是我在尝试使用 FF 开发者工具时首先注意到的缺失功能。

2013 年 9 月 24 日下午 06:55
1. Robert Nyman [编辑]
  
  感谢您的意见！我猜您指的是在 Inspector 选项卡中悬停元素时 - 很高兴知道！
  
  2013 年 9 月 24 日下午 07:06
  1. jamEs
    
    是的，就是这个。它们会显示为黄色和紫色。如果您想在 Firebug 或 Chrome 工具中添加一个功能，可以突出显示定位，这样您就可以直观地看到何时将 top、left、bottom 或 right 属性应用于元素。
    
    2013 年 9 月 24 日下午 07:09
    1. Andiio
      
      我支持 jamEs 的意见。
      
      2013 年 9 月 24 日下午 07:40
    2. Michael Beckwith
      
      虽然不是您完全需要或请求的，但有一个“盒子模型”选项卡，显示了其中大部分信息。它只是在点击时而不是悬停时显示。在 Aurora 中，目前还没有关于定位的信息。
      
      2013 年 9 月 24 日下午 08:44
    3. Nick Fitzgerald
      
      我们正在努力解决这个问题。请关注 https://bugzilla.mozilla.org/show_bug.cgi?id=663778
      
      2013 年 9 月 24 日下午 09:22
Mindaugas

说到这个… 从 FF 24 开始，我们的附加组件添加的 CSS 不会在样式编辑器中注册。Firebug 可以正常检测到它。

2013 年 9 月 24 日下午 10:09
1. Robert Nyman [编辑]
  
  请您提交一个错误报告，并提供更多详细信息和示例？谢谢！
  
  2013 年 9 月 25 日上午 00:30
  1. Mindaugas
    
    我不认为这里需要例子。我已经描述了问题的本质。我只是不喜欢 Bugzilla 跟踪器，我无法花时间创建虚假的测试附加组件，抱歉。
    
    我们的附加组件没有什么特别之处，它向网站添加 DOM 和 CSS。它是一个老版本（不是用 SDK 制作的）。
    
    CSS 作为 USER_SHEET 从 data-URL 加载，并使用 nsIStyleSheetService。
    
    它使用带有 unpack:true 的 jar 存档。这不是重点。
    
    2013 年 9 月 25 日上午 10:26
    1. Jeff Griffiths
      
      我可以确认样式编辑器不适用于 SDK 的 page-mod/contentStyleFile。我会提交一个错误报告。
      
      2013 年 9 月 25 日上午 10:36
      1. Jeff Griffiths
        
        ….还有，错误报告在这里，如果有人想关注的话，请将自己添加到 CC 列表中：https://bugzilla.mozilla.org/show_bug.cgi?id=920665
        
        2013 年 9 月 25 日上午 11:38
Ivan Dejanovic

首先，我要感谢所有为改进 Firefox 开发者工具付出努力，并将继续努力的 Mozilla 成员。

我使用 Firebug 很长时间了，甚至在开发者工具成为 Firefox 的一部分之前，如果我没有记错的话。在我所在的公司，Firebug 仍然是“官方”的网页开发工具。但是，作为一名真正的 Firebug 粉丝，我看到了 Firefox 开发者工具的巨大进步，以及每个 Firefox 版本中它们是如何变得越来越好的。

我没有在我的家用电脑上安装 Firebug，所有业余时间开发工作都是使用 Firefox 开发者工具完成的。我这样做是为了给 Firefox 开发者工具一个公平的机会。没有其他备选方案，我必须使用 Firefox 开发者工具，并形成完全客观的意见。

我发现 Firebug 和 Firefox 开发者工具之间的差距越来越小。我相信 Firebug 仍然是一个更好的工具，但优势并不大。Firefox 开发者工具的一大优势是，它们明显比 Firebug 快。

祝愿 Firefox 开发者工具取得成功。请继续努力。

2013 年 9 月 24 日上午 11:15
1. Jeff Griffiths
  
  Ivan：感谢你的评论！我真的很感谢你的反馈，我同意我们在过去的一段时间里取得了长足的进步。
  
  如果你有时间，我们非常想知道 Firebug 中剩余哪些功能对你来说不是很有用，或者在 Firefox 开发者工具中完全缺失。这种反馈对我们非常重要。欢迎在这里发表评论，在 bugzilla 中记录 bug 或发帖到邮件列表。
  
  https://lists.mozilla.org/listinfo/dev-developer-tools
  
  2013 年 9 月 24 日下午 13:14
  1. Jeff Carlsen
    
    我一直想联系你们提供一些反馈，但我总是犹豫不决，因为注册邮件列表是一个巨大的障碍。你应该考虑建立一个类似于其他 Firefox 团队的 Google 群组（如果你已经有了，请原谅我的无知）。
    
    我经常使用内置的开发者工具，但关于检查器，有三个事情让我感到困扰
    
    1. 无法可视化突出显示边距和填充。
    2. 颜色值始终转换为 rgb() 颜色。我需要它们以原始格式显示。
    3. 我无法直接编辑 HTML。
    
    2013 年 9 月 25 日上午 09:05
    1. jamEs
      
      我上面提到了 #1，但这其他两个点绝对是好的。
      
      2013 年 9 月 26 日上午 05:33
      1. Mike Ratcliffe
        
        1. 无法可视化突出显示边距和填充。
        我将在完成当前任务后开始着手处理这个问题。
        
        2. 颜色值始终转换为 rgb() 颜色。我需要它们以原始格式显示。
        我们可能很快就会有方法获取原始格式，但在最新的夜间版中，你至少可以在选项面板中选择颜色类型。
        
        3. 我无法直接编辑 HTML。
        我们也有计划进行这方面的改进。
        
        2013 年 10 月 6 日下午 13:39
    2. Jeff Griffiths
      
      哦，抱歉没有提供完整的答案。我们有一个桥梁将所有讨论列表连接到 Google 群组，例如
      
      https://groups.google.com/forum/#!forum/mozilla.dev.developer-tools
      
      2013 年 9 月 26 日上午 08:45
Fernando Briano

我已经使用 Firefox 开发者工具有一段时间了，并没有再回到 Firebug。使用 Aurora 有助于获得最前沿的功能 :)

我根据 CC 许可证在我的博客上将这篇文章翻译成了西班牙语。
http://picandocodigo.net/2013/firefox-developer-tools-parte-1-la-consola-web-y-el-debugger-javascript/

继续努力，谢谢！

2013 年 9 月 25 日上午 01:38
1. Robert Nyman [编辑]
  
  很高兴听到！再次感谢你的翻译！
  
  2013 年 9 月 25 日上午 04:50
pd

目前，至少在 Aurora 中，Firebug 存在一个严重的性能错误。每当你切换到/从带有启用 Firebug 的标签页，都会出现 5 到 10 秒的延迟。与此同时，原生工具在我看来，更丑陋，功能更少，而且不完整。在 Redmund，他们的工具从完全糟糕跃升到了远远领先于那些损坏/不完整的 Firefox 工具。内存分析，UI 响应工具。

*sigh*

我相信 Firebug 和原生 Dev Tools 开发者们正在努力，但领导层决定重新编写 Firebug（轮子），因此将资源分散到重复的项目中，目前正在扼杀 Firefox 提供曾经闻名业界的前沿开发者工具的能力。令人悲伤的现状。只有 Chrome 的原生工具更糟糕。请，对于所有目前仍在使用有 bug 的调试工具的开发者，看看这个：http://code.google.com/p/fbug/issues/detail?id=6086

2013 年 9 月 25 日上午 09:53
Rohit

哇！这是 Firebug 的一个很好的替代品，它非常快。我们能期待开发者工具中提供内存分析支持吗？即使在 Firebug 中，这一点也缺失了。

2013 年 9 月 25 日上午 10:33
Raymond Camden

原谅我，如果上面解释了这一点，但我错过了 - 但 Firefox 的开发者工具是否像 Chrome 的那样有扩展 API？

2013 年 9 月 26 日上午 03:54
1. Jeff Griffiths
  
  嗨，Raymond,
  
  是的，有！我们有一个最初的扩展 API，这里有文档
  
  https://mdn.org.cn/en-US/docs/Tools/DevToolsAPI
  
  此外，Victor Porof（开发者之一）在 gitub 上有一个用于创建新工具箱扩展的方便模板
  
  https://github.com/victorporof/Restartless-Template
  
  我们现在拥有的 API 与 Chrome 的 API 相比有点基础，但已经有一些扩展编写了出来，这些扩展可以实现相当强大的功能。你最感兴趣的是哪种功能？
  
  2013 年 9 月 26 日上午 08:50
  1. Raymond Camden
    
    没什么特别的，只是“可以做到吗” - 我很高兴看到它可以做到。感谢你的链接！
    
    2013 年 9 月 26 日下午 13:21
Jeremy Smith

这是我几年来第一次使用 FF，网页控制台实际上非常棒！它比 Chrome 开发者工具有更好的 UI！如果我能增加检查器的字体大小，我可以考虑全职切换到它。

有人知道是否有针对这种情况的破解方法吗？我尝试安装 Stylish，但声称可以增加检查器字体大小的附加组件却没有任何作用。

2013 年 9 月 27 日上午 09:01
1. Robert Nyman [编辑]
  
  感谢你的赞赏！我很高兴你问到字体大小！昨天我们在 Mozilla Hacks 上发布了一篇关于新功能的文章，其中 UI 放大就是其中之一。
  
  2013 年 9 月 27 日下午 13:03
Arno.Nyhm

不错的进步

但为什么会有两个类似的项目呢？

为什么不将 FireBug 和 FF DevTools 的知识和资源合并成一个呢？

2013 年 9 月 28 日上午 10:31
1. Robert Nyman [编辑]
  
  谢谢。我们计划在 Mozilla Hacks 上发布一篇文章来解释这一点。敬请关注。
  
  2013 年 9 月 30 日上午 01:42
Saje Dennis

Firefox 中内置的开发者工具非常出色，具有有趣的功能，为网页开发者和设计师提供了无限的可能性。这篇文章中解释的网页控制台和 JavaScript 调试器工具非常棒，拥有出色的用户界面。

2013 年 10 月 1 日上午 04:12
1. Jeff Griffiths
  
  我很高兴你享受使用它们！
  
  2013 年 10 月 1 日上午 08:52
Marian Kostadinov

一个明显但缺失的功能是网络标签的“清除”按钮。
这个想法是，当你按下按钮时，网络请求列表中的所有记录都会被删除。

另一个有用的功能是响应标签的“HTML 预览模式”。我知道这并不紧急，但在某些情况下，响应 HTML 无法读取时会很有帮助。

我不得不说，对于所有这些改进，你们做得很好。它越来越好，自从 F12 打开 DevTools 后，我甚至更加开心。

2013 年 10 月 1 日上午 04:42
1. Jeff Griffiths
  
  Marian：感谢你的评论！我们在以下 bug 中跟踪你的“清除按钮”想法
  
  https://bugzilla.mozilla.org/show_bug.cgi?id=859057
  
  我同意这将非常有用。你可以将自己添加到 cc 列表中以订阅该 bug 的活动。
  
  至于“HTML 预览模式” - 我很难理解你的用例 - 你能提供更多细节吗？
  
  2013 年 10 月 2 日上午 06:56
  1. Marian Kostadinov
    
    当然可以！
    1. 打开 Chrome。
    2. 访问一个使用 XMLHttpRequest 加载 HTML 内容的网站。
    3. 打开 Chrome 检查器。
    4. 切换到网络标签。
    5. 执行触发此 XMLHttpRequest 的操作。
    6. 点击出现的行。
    7. 在右侧有一个“预览标签”。
    
    这就是我的意思 - FF 开发者工具中缺少这个标签。
    
    2013 年 10 月 4 日上午 09:12
    1. Jeff Griffiths
      
      完美，感谢你的回复。:)
      
      2013 年 10 月 4 日上午 09:29
Arno.Nyhm

如果作为响应返回 HTML。并且你想查看此响应

也许，如果页面的片段被响应中的 HTML 替换了。

这样，与纯 HTML 相比，更容易在 HTML 预览中检查网络标签中的先前响应。

2013 年 10 月 2 日上午 08:25
João

你谈论开放，却使用封闭的。你就像多马，说一套做一套。使用封闭源代码技术，并在开放的环境中为它们进行免费宣传，这真是耻辱。这个博客就是一个耻辱。

2013 年 10 月 4 日上午 02:50
1. Robert Nyman [编辑]
  
  感谢你的反馈。但是，如果你能更具体地说明你不喜欢/不同意的内容，我们将进行一次适当的讨论。仅仅说你不喜欢某些东西并不是很有建设性。
  
  2013 年 10 月 9 日上午 02:57
Vytautas

您好,

随着新版本的发布，它越来越好，但它仍然缺少一个非常重要且有用的功能 - 在所有标签页中都可以访问的控制台。进入调试器，在某个执行点断点，然后切换到控制台执行一些自定义操作，这真的很烦人。

2013 年 10 月 6 日上午 12:27
jaborandi

我注意到工具的一些开发者在这里，所以发布一些反馈

1. 以前的“错误控制台”会引用发生错误的代码的精确行，甚至会指出符号。这始终非常有用，因为你可以立即看到问题，但这在行号检测错误的常见情况下尤其重要。

2. Dev Tools 顶部菜单项 - NET / CSS / JS / 等等 - 是“复选框”。据我所知，开发人员在调试特定问题时通常只需要 NET 或者 CSS 或者 JS。 “复选框”机制使该过程变得繁琐，会分散你的注意力（你感兴趣的是 JS，但需要检查其他哪些内容已打开并将其关闭，你的注意力被破坏），并且窗口的内容默认情况下会变得拥挤。

3. 同样的 NET/CSS/JS… - 指示开/关的样式：1) 彩色圆盘总是很突出，并使带有它们的任何内容看起来都处于活动状态；2) 深色表示活动状态（我猜你选择了“浅色”表示非活动状态，但结果是，正常的亮度表示“关闭”，深色表示“打开”）；请参考旧的“错误控制台” - 它非常易于使用。无论是在外观上还是在工作方式上。

2013 年 10 月 9 日上午 04:34
Raymond Camden

你能解释一下 FF 工具选项面板中的“启用 Chrome 调试”是什么意思吗？

2013 年 10 月 10 日上午 03:58
1. Robert Nyman [编辑]
  
  它是针对浏览器 chrome 中的内容。
  来自Firefox 23 的 Firefox 开发者工具功能
  
  如果你启用了 Chrome 调试，请查看浏览器控制台。它是对旧的错误控制台的替代，并为你提供一个 Chrome 上下文命令行，用于针对浏览器执行 JavaScript。它很好，应该在 Firefox 24 中默认启用。
  
  2013 年 10 月 10 日上午 04:49
Raymond Camden

好的……我可能有点慢，但我已经读了两遍了，我仍然不明白你的意思。你是说控制台默认情况下不允许你运行代码吗？比如输入一个变量名来查看其值？因为我没有开启这个选项，而且我可以在控制台中运行代码。

哦……我在用 Firefox 25。我甚至没有意识到。23 是标准版本吗？

2013 年 10 月 10 日上午 04:57
1. Mike Ratcliffe
  
  “启用 Chrome 调试”允许你调试 Firefox 本身。Chrome 一直以来都是浏览器内部 JavaScript 和 XUL 的名称，与内容区域无关，并且与 Google 的 Chrome 浏览器无关。
  
  当启用该选项时，你可以转到 Web 开发人员 > 浏览器控制台，并查看来自浏览器本身的消息，而不是仅仅来自网页。
  
  我们有四个发布渠道：夜间版、Aurora 版、测试版和正式版。请看这张图表
  http://media.askvg.com/articles/images2/Mozilla_Firefox_Channels.png
  
  因此，如果我在夜间版中添加代码，它将在 6 周后在 Aurora 版中可用。6 周后，它将在测试版中可用，再过 6 周后，它将发布。这是为了确保稳定性。
  
  2013 年 10 月 10 日上午 08:31
2. Will Bamberg
  
  关于运行代码：有两个不同的控制台，一个是网页控制台 (https://mdn.org.cn/docs/Tools/Web_Console)，另一个是浏览器控制台 (https://mdn.org.cn/docs/Tools/Browser_Console).
  
  正如 Mike 所说，浏览器控制台只有在选择“启用 Chrome 调试”时才会可用。
  
  这两个控制台都允许你运行代码。但网页控制台在当前页面的上下文中评估代码，因此你只能用它来与加载到该页面的网页内容进行交互。浏览器控制台在浏览器本身的上下文中评估代码，因此你可以用它来控制浏览器，甚至与浏览器的用户界面进行交互。
  
  2013 年 10 月 10 日上午 09:56
Raymond Camden

所以我刚下载了正式版 - 版本号是 24。那么“标准”版 FF 现在是 24 还是 23？

我也在 Twitter 上问了这个问题，但你能解释一下 24、25、夜间版和 Aurora 版之间的区别吗？

2013 年 10 月 10 日上午 05:02
1. Robert Nyman [编辑]
  
  我们之前在 Firefox 和发布渠道中对此进行了介绍，我们还在维基百科上列出了即将发布的版本。
  
  2013 年 10 月 10 日下午 01:32
Rohit

我无法复制网络请求的 JSON 响应。这很糟糕。

2013 年 10 月 10 日上午 05:46
Raymond Camden

Rohit，我不确定你指的是什么。我刚刚查看了一个 XHR 响应。我查看了 JSON，选择了所有内容，并成功复制。

2013 年 10 月 10 日上午 07:12
Raymond Camden

尽管公平地说，FF 在响应中“隐藏”了右键菜单，这似乎……很奇怪且没有必要。许多人 - 比如你可能 - 会认为他们无法复制。我将提交一个错误报告。

2013 年 10 月 10 日上午 07:13
Marian Kostadinov

还有两件事 -
1 - 检查器中没有“DOM 监听器”选项卡。我知道这里的重点是样式，但 DOM 监听器也很重要。此功能在 Google Chrome 检查器中可用。
2 (我认为是一个错误) - 当你选择一个元素时，页面中的这个元素会以相对于父元素的偏移量进行高亮/显示，并且“位于”选择元素上方选项的下方。对于较小的选择项，这没问题，但如果你有 100 个选项，最后一个选项会一直往下延伸到页面底部。

2013 年 10 月 14 日上午 03:46
1. Mike Ratcliffe
  
  > 1 - 检查器中没有“DOM 监听器”选项卡。
  
  我们正在努力实现这个功能。
  
  > 2 - 当你选择一个元素时，页面中的这个元素会以相对于父元素的偏移量进行高亮/显示，并且“位于”选择元素上方选项的下方。
  
  我不确定你指的是什么……你有图片或视频吗？你建议我们怎么做。
  
  2013 年 10 月 14 日上午 08:45
  1. Marian Kostadinov
    
    是的，这里有两个屏幕截图
    
    1. http://crop-factor.net/ff-dev-screen1.png
    2. http://crop-factor.net/ff-dev-screen2.png
    
    你明白我的意思了吗？还是需要更多屏幕截图？
    
    2013 年 10 月 14 日上午 11:48
    1. Jeff Griffiths
      
      Marian：感谢你的报告，我已经记录了这个错误
      
      https://bugzilla.mozilla.org/show_bug.cgi?id=927105
      
      请添加/更正我的描述中的任何内容，并随时在错误中添加你的 CC，以便跟踪进度。特别地，我已经推测了我们可能会采取的其他措施 - 非常希望听到你的想法，并将它们添加到错误中。
      
      2013 年 10 月 15 日下午 01:41
Andrés Correa Casablanca

阻止我使用 Firefox 开发者工具的唯一一点是调试器没有选项可以展开和/或美化 js 代码（在处理压缩代码时非常有用）。

这将是一个不错的功能，可以包含在浏览器中，因为它已经在 Chromium 和 Chrome 中实现了。

2013 年 10 月 17 日上午 02:50
Mike Ratcliffe

从 Firefox 27 开始，已经添加了美化打印功能。

2013 年 10 月 17 日上午 06:45
Ethan Marcotte

我只想赞扬你们对开发者工具的改进工作：说真的，它们进展得很顺利，我很期待看到它们的发展。

我现在真正缺少的两项功能是

1. 在检查器中编辑 HTML 代码块。
2. 在检查器中编辑 CSS 选择器。

对我来说，就这些了。我还在熟悉它们，但到目前为止，我真的很喜欢它们。感谢你们的辛勤工作！

2013 年 10 月 17 日下午 03:21
1. Mike Ratcliffe
  
  > 1. 在检查器中编辑 HTML 代码块
  我们已经很好地实现了这个功能，很快就会发布。
  
  > 2. 在检查器中编辑 CSS 选择器
  我之前没有意识到规则视图中没有这个功能。错误已记录
  https://bugzilla.mozilla.org/show_bug.cgi?id=928517
  
  2013 年 10 月 18 日下午 01:24

本文评论已关闭。

Hacks

由 Robert Nyman [名誉编辑]

Web 控制台

JavaScript 调试器

了解更多

即将推出

关于 Robert Nyman [名誉编辑]

57 条评论

重新介绍 Firefox 开发者工具，第一部分：Web 控制台和 JavaScript 调试器

由 Robert Nyman [名誉编辑]

Web 控制台

JavaScript 调试器

了解更多

即将推出

关于 Robert Nyman [名誉编辑]

探索网页开发的优秀资源

谢谢！请查看您的收件箱以确认您的订阅。