Mozilla Hacks

Firefox 开发者工具的新功能：第 25 集

Avatar photo 作者 Nick Fitzgerald，Chris Heilmann

发布于 2013 年 8 月 13 日 在 开发者工具，特色文章，Firefox，以及 Firefox Aurora

Firefox 25 刚刚升级到 Aurora 发布渠道，这意味着我们将再次报告 Firefox 开发者工具中的新功能。

以下是其中一些最令人兴奋的新功能的摘要，要了解全部内容，您可以查看 已解决的 Bugzilla 票证的完整列表。

调试器中的黑盒库

在现代 Web 开发中，我们经常依赖于像 JQuery、Ember 或 Angular 这样的库，并且 99% 的时间我们都可以安全地假设它们“可以正常工作”。我们不关心这些库的内部实现：我们把它们当作 黑盒。但是，在调试会话期间，库的抽象会泄漏，因为您被迫遍历其堆栈帧才能到达自己的代码。为了缓解这个问题，我们引入了黑盒：一项功能，您可以告诉调试器忽略选定源的详细信息。

要黑盒化源，您可以一次标记一个，方法是在源列表中禁用它旁边的那个小眼睛
eyeball

或者，您可以使用 Shift+F2 调出开发者工具栏，并使用 dbg blackbox 命令一次黑盒化多个源

dbg blackbox --glob *-min.js[source]

当一个源被黑盒化时

  • 它可能具有的任何断点都将被禁用。
  • 当 “在异常时暂停” 启用时，调试器在黑盒化源中抛出异常时不会暂停；而是它会等到（如果有的话）堆栈展开到未被黑盒化的源中的帧。
  • 调试器在单步执行时会跳过黑盒化的源。

要查看它的实际操作并详细了解，请查看 YouTube 上的黑盒化屏幕录制。

在网络监视器中重放和编辑请求

您现在可以通过在重新发送之前修改标头来调试网络请求。右键单击现有请求并选择“重新发送”上下文菜单项

resend request

现在，您可以在再次发送请求之前调整 HTTP 方法、URL、标头和请求正文

tweak

检查器中的 CSS 自动完成

由于我们启用了 CSS 属性和值的自动完成，因此在检查器中编写 CSS 现在变得容易多了。

autocomplete

更重要的是，它甚至适用于内联样式属性

inline

顺便说一下：此功能由贡献者 Girish Sharma 和 Mina Almasry 实现。如果您也希望亲自动手使用这些工具，请查看我们关于 如何参与开发者工具 的维基页面。

在当前暂停的帧中执行 JS

我们反复听到的一个请求是，能够从 Web 控制台中在调试器中当前暂停的帧的范围内执行 JS，而不是全局范围。现在可以实现了。使用 Web 控制台在当前帧中执行 JS 可以使调试您的应用程序变得容易得多。

编辑： Web 控制台实际上从 Firefox 23 开始就在当前帧中执行，在 Firefox 25 中，Scratchpad 也将在当前帧中执行。

在分析器中导入和导出分析数据

在共享项目上进行黑客攻击，并且您认为您在朋友拥有的某些代码部分中发现了性能回归？不要只在 GitHub 上提交一个带有重现缓慢步骤的问题，而是导出并附加该代码的分析，该分析显示了确切的缓慢程度以及发生的位置。当您的朋友试图重现和调试回归时，他会感谢您。单击开始分析按钮旁边的“导入”按钮从磁盘加载分析，然后在现有分析上点击“保存”以导出它。

profileimport

我什么时候可以使用这些功能？

所有这些功能以及更多功能都可以在 Aurora 发布渠道 中使用。在接下来的 12 周内，这些功能将迁移到 Firefox 稳定版。

对开发者工具有任何反馈？在 Twitter 上联系 @FirefoxDevTools，或访问 #devtools on irc.mozilla.org。

关于 Nick Fitzgerald

我喜欢计算、自行车、嘻哈、书籍和绘图仪。我的代词是他/他。

更多 Nick Fitzgerald 的文章…

关于 Chris Heilmann

HTML5 和开放 Web 的布道者。让我们修复这个问题！

更多 Chris Heilmann 的文章…

37 条评论

  1. phi2x

    我错过的调试工具中的一件事是，无法列出 JavaScript 引擎已取消优化的 JS 函数，以及这些取消优化决定的原因。

    这样的工具将非常有助于优化我们的 JS 代码。

    2013 年 8 月 14 日 凌晨 01:46

    1. Nick Fitzgerald

      关注此错误：https://bugzilla.mozilla.org/show_bug.cgi?id=897455

      2013 年 8 月 14 日 凌晨 03:01

  2. Niloy Mondal

    W00h00！黑盒化太棒了。终于可以与 Blink 竞争了。

    2013 年 8 月 14 日 凌晨 03:04

  3. Bradley Meck

    是否有根据脚本请求方式（如源映射或）进行黑盒化，然后在调试时根据需要删除黑盒化的方式？

    2013 年 8 月 14 日 凌晨 05:24

    1. Nick Fitzgerald

      我们有一个错误，要添加一个“//# blackbox”注释编译指示，它会告诉调试器默认情况下应该将源黑盒化。

      https://bugzilla.mozilla.org/show_bug.cgi?id=905263

      2013 年 8 月 15 日 上午 10:39

  4. Markus Koller

    不错，但开发者工具中仍然困扰我的一件事是，检查器使用了一个非常小的字体来显示 HTML 树和右侧的样式框，大约 8 像素左右。控制台、调试器和样式编辑器都使用了一个更合理的字体大小。

    您可以添加一个字体设置，确保所有开发者工具都使用相同的字体大小，或者至少尊重我设置的 11 像素的最小字体大小吗？

    2013 年 8 月 14 日 凌晨 05:50

    1. Markus Koller

      哦，我使用的是 Linux，如果我没记错的话，这个问题在 Windows 上不会出现。

      2013 年 8 月 14 日 凌晨 05:51

      1. Lin

        您检查过您的操作系统字体设置吗？
        开发者工具在这里的这些部分使用等宽字体，而其他字体用于 chrome。

        2013 年 8 月 14 日 上午 09:50

    2. Kevin Newman

      在 FireBug 中，您可以独立于主页面缩放该区域。如果您可以在捆绑的检查器中执行此操作，那会很棒。

      2013 年 8 月 14 日 上午 10:46

    3. Ken Saunders

      同意，文本太小，与浏览器的 chrome 文本不匹配。

      2013 年 8 月 15 日 凌晨 04:43

    4. Nick Fitzgerald

      它在我们 radar 上 :)

      2013 年 8 月 15 日 上午 10:40

  5. Blaise Kal

    你们是否正在开发类似 Firebug 的“使用错误显示堆栈跟踪”的东西？

    Firefox 开发者工具中的堆栈跟踪/单步执行不是一个有用的替代方案，因为没有快速的方法查看调用堆栈。

    我真的很想放弃 Firebug，因为它太慢了。这是我现在唯一真正想念的东西。

    2013 年 8 月 14 日 上午 08:28

    1. Nick Fitzgerald

      如果单击错误，您应该会在弹出的侧边栏中获得堆栈跟踪。

      我们正在努力改进控制台输出：https://bugzilla.mozilla.org/show_bug.cgi?id=778766

      2013 年 8 月 15 日 上午 10:42

      1. Blaise Kal

        哇，这是一个雄心勃勃的修复！祝您好运，谢谢回复 :)

        2013 年 8 月 18 日 上午 09:53

  6. Ken Saunders

    不是说有人真的需要屏幕截图，但是…
    http://www.accessfirefox.org/tmp-images/font-size.png

    2013 年 8 月 15 日 凌晨 05:12

  7. Jingyu Wang

    看起来黑盒化只有在人们没有连接他们的 JavaScript 文件时才有用。

    2013 年 8 月 15 日 上午 10:30

    1. Nick Fitzgerald

      您可以执行以下两件事之一

      1. 在您的开发环境中不连接 js 文件，而只在您构建用于生产时进行连接。

      2. 使用源映射将合并后的文件翻译回原始源代码（虽然你必须等待 https://bugzilla.mozilla.org/show_bug.cgi?id=901712）。

      2013年8月15日 下午11:24

  8. Postmodern

    你能在将视频上传到 YouTube 之前，先将它们编码为 WebM 格式吗？

    2013年8月15日 下午13:54

    1. Nick Fitzgerald

      我使用 QuickTime 和 iMovie 分别录制和编辑了屏幕截图。有没有简单的方法可以从 iMovie 导出 WebM 格式？

      2013年8月15日 下午13:58

    2. Chris Heilmann

      为什么？YouTube 会以正确的格式将其发送到浏览器。你使用的是 YouTube 的 HTML5 版本吗？http://www.youtube.com/html5

      2013年8月15日 下午16:10

  9. Jeremy Walton

    我个人在使用内置工具方面遇到了很多问题，特别是对于中等或大型的 Web 应用项目。Firebug 似乎会导致很多内存膨胀，但至少我从未遇到过它无法工作的情况。如果你有超过 500 个 JavaScript 源文件（开发环境，而非生产环境），一段时间后，像性能分析器和控制台（当错误出现时）这样的工具会显示指向 JS 文件/行号的链接，然后它会显示整个文件（例如，我现在尝试了 25 个文件，并运行了性能分析器，它说我 47% 的时间花在了 core.js 上，所以我想，好吧，点击它旁边的箭头，它会显示… print.php？等等？这个文件中根本没有 JavaScript 代码。接下来，我在 JavaScript 代码中放置了调试器语句，但在运行时从未触发调试器。此外，我放置了手动断点，它们只触发了一次，但之后再也没有触发，即使我知道后面的代码已经工作了（console.log）。我甚至尝试过关闭并重新开启断点，但没有用。有趣的是，重新启动 Firefox 可以使断点再次工作。我一直在尝试新的开发工具的每次新迭代，但我不得不回到 Firebug，因为我不能信任 Web 开发工具给我提供的信息（或者说没有给我提供信息）。所有这一切都发生在运行 Firefox 25 的 10 分钟内… 在 24 版和当前发布的 23 版中也是如此。

    2013年8月15日 下午16:05

  10. Brandon

    哇，太棒了！感谢你们的辛勤工作，这些功能将让 Firefox 的调试体验再次变得很棒。每个功能都是非常实用的。我读完前几个功能的时候还在想“听起来不错，但我什么时候才能在当前上下文中使用控制台进行调试？”，结果，它就出现在了清单上。太好了，干得好。

    2013年8月15日 下午19:27

  11. pd

    “在现代 Web 开发中，我们经常依赖于 JQuery、Ember 或 Angular 等库……”

    没错，它们无处不在。那么，为什么浏览器供应商不通过将这些库与浏览器捆绑在一起，来为 Web（特别是移动 Web）提供巨大的性能提升呢？这比我读过的任何性能技巧都要快。任何 CDN 都无法与已存储在本地计算机上的文件相提并论。想象一下，如果用户在开发网站时不必下载（通常未压缩的）大约 100KB 的库，移动 Web 会得到多大的改善。许多开发人员都必须依赖这些库。

    所有的宣传、更快的标准协商和快速发布都无法超越那些积极开发的工具，这些工具旨在弥补浏览器实现中不可避免的缺陷，更不用说提供一大堆标准开发人员似乎没有关注的实用功能了。

    这真的毫无疑问，所以，我再次问，为什么浏览器不将最常用的 JavaScript 库与浏览器一起分发？

    2013年8月16日 下午20:02

    1. Niloy Mondal

      因为不同的应用使用不同的版本，在我看来，这似乎不可行。

      2013年8月19日 上午00:42

      1. pd

        请原谅我的突然冒犯，因为我真的在挠头，想知道为什么有人会认为浏览器不可能下载一个以上的 JavaScript 库版本！你不是认真的吧？你的回复是想要讽刺一下吗？我希望如此。

        用户每小时都会间接地指示他们的浏览器下载并存储许多不同的 JavaScript 库。如果我没有弄错的话，Firefox 的内存管理系统最近还进行了调整，如果内存相同，则会在两个不同的站点/标签页之间使用相同的内存空间。换句话说，我认为，如果站点 a 下载了 jQuery 1.10.1，站点 b 也下载了，Firefox 会明智地只在内存中存储一份该库的副本。因此，就下载、存储和内存占用方面而言，浏览器已经共享了这些库。然而，由于某种原因——可能是自尊心？——浏览器供应商迫使用户每天多次下载这些库，而他们可以简单地从缓存中访问这些库。

        说实话，我希望我的回复不会显得粗鲁，我只是不明白你的回复。也许我需要更多视角。有人吗？

        2013年8月19日 上午03:16

        1. Niloy Mondal

          当你说“将这些库与浏览器捆绑在一起”时，我以为你是想让这些库内置在浏览器中。你的最后一段也暗示了这一点。请原谅我误解了你的意思。

          你在第二篇文章中提到的，这不是已经可以实现了吗？如果多个网站使用同一个 CDN 上的 jQuery，它们不都是从缓存中使用它吗？浏览器从不查看文件内部以判断它们是否相同（这样做是正确的，因为对大型文件的字符串比较会过于密集）。相反，它们依赖于 URL 来确定资源是否相同。在我看来，这是很合理的。

          2013年8月20日 上午05:03

          1. Mauro

            考虑一下，你可以禁用缓存并自动删除其内容。因此，许多用户在每次导航时都会获得文件的最新副本。此外，请考虑这样一个事实，即许多开发人员将他们的库存储在自己的服务器上，他们不会每次都从同一个服务器获取它们（第三方服务器甚至可能导致最终下载问题，暂时中断网站）。同一个页面上可能会有很多库。捆绑库这种解决方案的理由有很多，而我找不到太多反对这种功能的理由。

            2013年9月11日 上午00:09

    2. Mauro

      @pd，我也有同样的疑问，很多时候我都难以置信！:-) 目前，这将是任何浏览器都应该拥有的功能。它可以像一个普通的插件一样工作：库会在有新版本发布时更新（当然，库应该始终向后兼容）。也许可以有一些默认包含在浏览器中的库（例如，jQuery），以及用户可以自由添加的其他库。这在移动环境中特别有用，但桌面环境也会从中受益。

      2013年9月10日 下午23:58

  12. Misha Reyzlin

    与当前帧交互的 UI 仍然不是最理想的——我希望能够在同一个视图中同时查看正在运行的代码和控制台。

    调用堆栈的呈现方式也存在限制——水平堆叠无法提供清晰的概览。

    2013年8月19日 上午03:25

    1. Nick Fitzgerald

      我们一直在邮件列表中探索让控制台在任何地方都可用的最佳方法，并且有一个关于此的公开 Bug：https://bugzilla.mozilla.org/show_bug.cgi?id=862558

      还有一个让堆栈帧更传统的 Bug，但我现在记不起 Bug 号了。

      2013年8月19日 下午10:38

  13. Cynthia

    一个标记验证器会让我兴奋不已。

    2013年8月20日 上午08:15

  14. Mark

    Inspector 的自动完成功能简直太棒了。有没有办法可以覆盖 Inspector 的主题颜色？我已经将它设置为深色主题，但我希望行高亮颜色更醒目，比如蓝色背景上的白色文本，这样更容易看到。

    2013年8月23日 下午18:39

  15. Gene Vayngrib

    自从“在异常处暂停”开始在与 Firefox 打包的 js 代码中停止，而这并不属于我的应用程序，我在调试方面遇到了很多麻烦。所以黑盒功能对解决这个问题很有帮助，谢谢。如果它可以在 Firefox 重启后持久化，那就更好了。

    另一个很大的不便之处是缺少“只在未捕获异常处暂停”功能。例如，jQuery 会进行一些特定于浏览器的检查，这些检查会导致异常，然后捕获错误。因此，我从不希望在那里停止，也不想每次都费心黑盒化它。

    希望这些功能正在计划中。

    希望这些功能正在计划中。

    2013年8月23日 下午22:56

  16. Gene Vayngrib

    @Jeremy，我也遇到了断点无法命中，或者只命中一次就再也不命中的问题。不幸的是，我不能使用 Firebug，因为我正在为 FirefoxOS 进行调试。也许有人可以建议一个解决方法？

    2013年8月23日 下午23:00

  17. Mark

    我真的很喜欢 Inspector 的深色主题。我总是发现很难看到当前选中的元素，所以我删除了元素周围那些令人眼花缭乱的点状边框，并使用了一个明亮的下划线来提高清晰度。这里有一个截图：http://markbokil.com/images/screenshots/inspector-dark.png

    2013年8月24日 下午15:58

  18. leandrw

    太好了！总有一天，Firebug 会不再无用。

    2013年8月27日 上午09:01

  19. 紫云飞

    “在当前暂停帧中执行 JS”，我不明白，你能做一个屏幕截图吗？

    2013年9月4日 下午17:50

本文的评论已关闭。