Firefox 77 新特性:DevTool 增强和 Web 平台更新

注意:本文还提供以下语言版本:简体中文 (Chinese (Simplified))繁體中文 (Chinese (Traditional))Español (Spanish).


新的稳定版 Firefox 即将发布。版本 77 为 Web 开发者带来了一些新特性。

这篇文章只提供了一些亮点;如需了解更多详情,请查看以下内容:

开发者工具改进

让我们首先回顾一下 77 版本中最有趣的开发者工具改进和新增功能。如果您想提前体验更多正在进行的开发工作并提供反馈,请获取 Firefox DevEdition,以便抢先体验。

更快、更轻量的 JavaScript 调试

大型 Web 应用对 DevTools 来说是一个挑战,因为需要快速、准确地处理捆绑、实时重载和依赖项。在 77 版本中,Firefox 的调试器学习了一些新的技巧,可以让您专注于调试。

在多个版本中提高了调试性能之后,我们已经无法找到可操作的高影响力 bug。因此,为了找到最后剩下的瓶颈,我们一直积极地与社区联系。感谢收到的许多详细报告,我们能够实现性能改进,不仅提高了暂停和单步执行的速度,而且还减少了随时间推移的内存使用量。

JavaScript 和 CSS 源映射,让一切顺利

源映射是这次联系的重要内容之一,也获得了相应的性能提升。一些内联源映射的加载时间提高了 10 倍。更重要的是,我们提高了更多源映射配置的可靠性。由于您提供的关于特定类型的略微不正确的生成源映射案例的报告,我们能够调整解析和映射的回退机制。总的来说,您现在应该能够看到原本无法加载原始 CSS 和 JavaScript/TypeScript 等代码的项目正常工作。

在选定的堆栈帧中单步执行 JavaScript

单步执行是调试的重要组成部分,但并不直观。在函数之间以及库和自己的代码之间移动时,您很容易迷失方向,并且可能执行过多步操作。

调试器现在将在 单步执行 时尊重当前选择的堆栈。这在您进入函数调用或在堆栈中更低层的库方法中暂停时很有用。只需在 调用堆栈 中选择正确的函数即可跳转到其当前暂停的行,并从此处继续单步执行。

Navigating the call stack and continuing stepping further in that function

我们希望这能够使代码执行的单步操作更加直观,并减少您错过重要行的可能性。

网络和调试器的溢出设置

为了让工具栏更简洁,网络和调试器效仿控制台的例子,将现有和新的复选框合并到一个新的设置菜单中。这样,您可以轻松使用诸如“禁用 JavaScript”之类的强大选项,并在未来为更多功能强大的选项腾出空间。

Overflow settings menus in both Network and Debugger toolbar.

在属性读取和写入时暂停

理解状态更改是一个经常通过控制台日志或调试进行调查的问题。观察点(已在 Firefox 72 版本中发布)可以在脚本读取或写入属性时暂停执行。在暂停状态下,右键单击作用域面板中的属性以附加它们。

Right-click on object properties in Debugger's Scopes to break on get/set

贡献者 Janelle deMent 通过一个新的选项简化了观察点的使用,该选项将 get/set 结合在一起,因此任何脚本引用都会触发暂停。

改进的网络数据预览

在每个版本中逐步改进,网络详细信息面板都经过了重新设计。旧的界面存在事件处理错误,导致选择和复制文本变得非常不稳定。趁此机会,我们还提高了大型数据项的性能。

这是网络面板中更大规模的界面清理的一部分,我们一直在通过 Twitter 上的 @FirefoxDevToolsMozilla 的 Matrix 社区 对我们的社区进行调查。加入我们,说出您的想法。网络面板侧边栏重新设计的更多部分也已在 Firefox DevEdition 中提供,以便抢先体验。

Web 平台更新

Firefox 77 支持一些新的 Web 平台功能。

String#replaceAll

Firefox 67 引入了 String#matchAll,这是一种更方便的方法,可以迭代 正则表达式 结果匹配项。在 Firefox 77 版本中,我们添加了更多便利性:String#replaceAll 有助于替换字符串的所有出现次数,这可能是您过去多次搜索过的操作之一(感谢 StackOverflow 提供了如此多的帮助!)。

之前,如果您想将所有猫替换成狗,需要使用全局正则表达式

.replace(/cats/g, 'dogs');

或者,可以使用 splitjoin

.split('cats').join('dogs');

现在,由于 String#replaceAll 的出现,这一操作变得更加易读

.replaceAll('cats', 'dogs');

IndexedDB 游标请求

Firefox 77 将 IDBCursor 发起的请求作为 该游标的属性 公开。这是一个很好的改进,可以简化诸如“升级”数据库功能的包装器函数的编写。之前,要在游标上进行此类升级,您需要传入游标对象及其发起的请求对象,因为前者依赖于后者。随着这一变化,您现在只需要传入游标对象,因为请求在游标上可用。

Firefox 77 中的扩展:更少的权限请求,更多功能

自从 Firefox 57 版本以来,用户会在安装扩展或在更新期间添加任何新权限时看到扩展需要访问的权限。这些提示的频率可能让人难以忍受,并且如果在扩展更新期间未能接受新的权限请求,用户可能会被困在旧版本上。我们通过提供更多权限作为 可选权限,使扩展开发者更容易避免触发过多的提示。可选权限在安装或添加到扩展更新时不会触发权限请求,也可以在 运行时请求,以便用户在上下文中看到正在请求的权限。

访问 插件博客,查看 Firefox 77 中扩展的更多更新!

总结

这些是 Firefox 77 的亮点!体验新功能,玩得开心!一如既往,欢迎您在评论区提供反馈并提出问题。

关于 Florian Scholz

Florian 是 MDN Web 文档的内容主管,他撰写有关 Web 平台技术的文章并研究浏览器兼容性数据。他住在德国不来梅。

更多 Florian Scholz 的文章...

关于 Harald Kirschner (digitarald)

Harald "digitarald" Kirschner 是 Firefox 开发者体验和工具的产品经理 - 致力于赋能创作者编写、设计和维护一个对所有人开放和可访问的 Web。在加入 Mozilla 的 8 年时间里,他在性能、Web API、移动设备、可安装 Web 应用、数据可视化和开发者推广项目中提升了技能水平。

更多 Harald Kirschner (digitarald) 的文章...


4 条评论

  1. Michael Dougall

    感谢您关注源映射问题!似乎它并没有解决我提出的源映射错误(请参见:https://bugzilla.mozilla.org/show_bug.cgi?id=1631296)。

    如果有人能看一下,那就太好了 - 这将为在 Firefox 中编写 CSS 的开发人员带来巨大的帮助。

    2020 年 6 月 2 日 下午 4:10

    1. Harald Kirschner (digitarald)

      嗨,Michael,我们在过去几天改进了 SCSS,我们想等到验证其影响后再发布。我已经在您链接的错误中添加了评论,以吸引更多关注,因为它仍然存在明显的错误,而且很容易重现。

      2020 年 6 月 9 日 上午 10:00

  2. maxidoine alliance

    它是免费的吗?

    2020 年 6 月 11 日 上午 11:25

  3. Doug Dyer

    苹果正在积极追求在 iPad Pro 上实现完整的桌面功能,这注定会成为软件开发的主要设备。(我现在已经在使用它了!)Firefox 77 能否提供这些新开发人员工具,特别是用于 iPad Pro 上的 JS 调试?

    顺便说一句,MDN Web 文档学习者教程是我遇到过的最实用的教学工具,我对所有投入到其中的工作和努力表示衷心的感谢。干得好!

    2020 年 6 月 11 日 下午 1:54

本文的评论已关闭。