开发者版 49:网络请求堆栈跟踪等

本周发布了 Firefox 开发者版 49!这篇文章涵盖了此版本中的一些重大变化。

网络监控器中的请求堆栈跟踪

网络监控器现在有一个新的“原因”列,显示了如何发起给定的网络请求。该列显示请求类型,包括加载文档的工具提示,最重要的是,如果 JavaScript 堆栈跟踪可用,您可以在弹出泡泡中看到它。

JavaScript 堆栈跟踪对于 XHR 请求最有用,但对于任何直接或间接由脚本发起的请求也可用,例如当脚本插入一个<script><img>元素到页面中。

如果您想弄清楚为什么以及从页面上的哪个位置发出特定的 HTTP 请求,此功能很有用。(见 bug 1134073。)

image00

检查器中的动画性能信息

您可以使用检查器面板来调查 CSS 和 DOM 动画的详细信息。在 Firefox 49 中,您现在可以获得动画的详细性能信息。如果动画属性无法在合成器上运行(即无法硬件加速),则在展开的动画视图中会将其下划线,并且相关的工具提示会解释正在发生的事情。

在下面的示例中,transform 和 width 属性无法同时加速。使用检查器中的这个新工具,您现在可以发现性能不佳的动画并了解需要进行哪些更改来加速它们。

如果您想详细了解动画在 Gecko 中如何优化,请阅读 David Baron 的 博客文章。(见 bug 1254408 获取更多详细信息。)

image05

重新组织的标记视图上下文菜单

检查器有一个包含许多操作的上下文菜单,它变得越来越长和难以使用。贡献者 Moaaz Sidat 重新组织了菜单,将其分为多个子菜单。(见 bug 1211613。)

image03

检查器面板中的其他改进

Firefox 49 添加了对#rrggbbaa#rgba颜色值语法的支持。开发者工具中的检查器现在也支持此语法。(见 bug 1271191。)

image07

在 CSS 规则编辑器中,自动完成现在在可滚动的列表中显示更多可能的属性。因此,找到与您相关的值或了解以前不熟悉的新的 CSS 属性变得容易多了。(见 bug 1260419。)

image06

在标记视图中,自闭合 标签,如<br>现在显示为<br></br>仅当文档类型为 XHTML 时。对于普通 HTML,标记现在以更准确、更简洁的形式显示。(见 bug 820926。)

从控制台 JavaScript 错误到 MDN 参考文档的链接

当您在控制台中看到一个不熟悉的错误消息时,您不再需要复制消息并在网上搜索文档。您可以简单地点击错误消息的一部分,该部分链接到有关该错误的 MDN 参考页面。阅读 博客文章,作者是 @floscholz@mrrrgn,以详细了解此功能以及如何为改进它做出贡献。(见 bug 1179876。)

image01

语法高亮显示的新配色方案

我们认为我们的语法高亮显示颜色看起来有点过时了,因此我们在开发者版 Firefox 的浅色和深色主题版本中都对其进行了更改。新的颜色针对可访问性进行了优化:它们具有更好的对比度,并且在所有情况下都更容易区分。

image04

image02

可访问性改进

我们在整个版本中都做出了重要的可访问性改进。大多数开发者工具 UI 元素现在都有一个清晰可见的焦点指示器,可以使用键盘导航 UI,并且改进了检查器面板中的可访问性语义。(见 bug 124269412427151242851。)

其他值得注意的变化

除了上述改进之外,我们还完善了开发者工具中的各个方面,特别是

  • Theabout:debugging页面在服务工作者被禁用时显示警告,无论是由私人浏览模式还是由首选项禁用。(见 bug 1266415。)
  • 逐步地,存储检查器变得更加可编辑。在此版本中,我们添加了一个上下文菜单选项来删除 IndexedDB 数据库。(见 bug 1205123。)
  • 网络检查器现在显示确切的字节数,如果响应大小小于 1KB。(见 bug 1263945。)
  • 在检查器面板中按“h”键,这是隐藏所选元素的快捷键,现在也会使元素标记变灰。(见 bug 1127572。)

感谢所有为这个开发者版版本做出贡献的人!现在获取 最新开发者版 的副本,并让我们知道您的想法。

关于 Jarda Snajdr

Firefox 贡献者,喜欢了解浏览器内部机制并解决复杂问题。

Jarda Snajdr 的更多文章…


7 条评论

  1. Gerd Neumann

    很高兴看到进步,干得好!作为用户,我要感谢你!

    我非常感谢你花了很多心思写这些发布文章。但我发现有点遗憾的是这些图片不可读。一张图片胜过千言万语。而且在这种情况下,它们只是模糊的,例如 https://hacks.mozilla.ac.cn/wp-content/uploads/2016/06/image00-500×218.png 我更愿意看这些截图,而不是阅读文本。

    既然这是一个普通的 WordPress 博客,上传未缩放的图片,然后在点击时打开(在弹出窗口中或在额外的选项卡中打开),应该不是太麻烦。

    2016 年 6 月 16 日 凌晨 1:24

    1. Havi Hoffman [编辑]

      编辑评论:@Gerd Neumann - 感谢您提出的建设性意见。我们已更新图片链接,以便在点击时在新标签页中打开全尺寸图片。

      2016 年 6 月 17 日 下午 4:49

      1. Gerd Neumann

        感谢更新。

        我还有另一个评论,但这次更像是信息性的,而不是关于布局方面的:我注意到很多人不知道 http://firefox-dev.tools/

        “本周 Servo 动态”在吸引新贡献者方面做得非常好。请看一看。每篇博文都以新贡献者列表以及指向适合初学者的 bug 的链接结束。例如,请参见 https://blog.servo.org/2016/05/30/twis-65/#new-contributorshttps://blog.servo.org/2016/05/30/twis-65/#get-involved

        所有这些信息都已存在,例如,也在 https://blog.mozilla.org/community/2016/06/04/firefox-47-new-contributors/ 上,只要告诉潜在的新贡献者就可以了。我认为在 Firefox *开发者* 版的这些发布说明的结尾添加这样一段简短的文字非常合适。

        2016 年 6 月 20 日 凌晨 2:37

        1. Adam

          > http://firefox-dev.tools/

          太酷了!我以前也不知道!

          此外,about:performance 也非常酷

          2016 年 6 月 21 日 凌晨 4:26

  2. Xavier Dutel

    您好,感谢您的文章,以及对这个新版本的辛勤付出。

    我们有选项将新的语法高亮显示改为旧的版本吗?我喜欢旧的版本,不想放弃它!

    谢谢

    2016 年 6 月 20 日 凌晨 0:05

    1. Jens

      @Xavier @Quentin:不幸的是,没有(作为用户,我本人对此感到遗憾)。为了让您了解,您可能想关注 https://bugzilla.mozilla.org/show_bug.cgi?id=1273130 上的 bug 报告,并在那里提出建设性的批评。

      2016 年 6 月 20 日 下午 2:29

  3. Quentin

    感谢您的辛勤付出。

    新的配色方案很好,但我希望能够选择使用哪一种。我更习惯于使用旧的配色方案。

    2016 年 6 月 20 日 凌晨 1:26

本文的评论已关闭。