Firefox 77 新功能:开发者工具改进与 Web 平台更新

全新的 Firefox 稳定版现已推出!第 77 版为开发者提供了更多新功能。

本文仅涵盖了一些亮点;如需了解详细信息,请参见以下资源:

开发者工具改进

让我们先来看看第 77 版开发者工具中最有趣的优化与创新。如果你想使用更多开发中的新功能,并提供建议,请安装 Firefox 开发者版本即可抢先体验。

更快、更有效的 JavaScript 调试

大型 Web 应用程式对开发者工具来说无疑是一项艰巨的挑战,因为需要快速而正确地处理捆绑(bundling)、实时重载(live reload)和相依性。Firefox 77 的调试器学习了一些新技巧,让你可以因此更加专注于调试。

在先前的许多版本中,我们持续致力於提升调试性能,也几乎除光了影响层面最严重、可处理的问题。为了找出剩余的瓶颈,我们一直积极地和社群保持联系。得益於我们收到的许多详细回报,我们终于能够改善调试的效率,不仅提升暂停和步进速度,也减少内存长期用量。

行之有效的 JavaScript 和 CSS 源映射

源映射也包含在此次社群访查中,在新版本速度表现也有所提升。部分内联的源映射的载入时间加快了 10 倍。更重要的是,我们改善了不同源映射设定的可靠性。感谢大家回报各种含有轻微错误的源映射案例,我们因此得以调整了解析和映射的 fallback 机制。整体而言,先前有些无法载入的 CSS 和 JavaScript / TypeScript 等原始码,现在应该就是会动了。

在选定的 JavaScript 调用栈帧内单步执行

单步执行是调试时很关键,但卻又不直观的一环。在进入和退出函数,或是在函式库和自己的代码之间转移时,往往很容易迷失方向或跳过头。

现在,调试器会在单步执行时,遵循当前选择的调用栈。这个功能在进入函数调用、或在调用栈中更下方的函式库中暂停时特别实用。只需在「调用栈」(Call Stack)中选择正确的函数,就可以跳至其当前暂停的行数,然后从那里继续单步执行。

查看呼叫堆疊並在同一個函式中繼續除錯

我们希望这可以使单步执行的过程更加直观,让你更不会错过重要的代码行。

网络和调试器溢出设置

为了使工具栏更加简洁,网络和调试器遵循主控制台的模式,将结合部分现有的选择功能选项框格和新的功能选取框格,并合并到新的设置菜单中。这使得如「禁用 JavaScript」等的强大功能触手可及,并为往后更强大的功能预留了更多空间。

網路和除錯器滿出來的工功能選項具欄溢出設置

在脚本读取属性或写入属性时暂停执行

了解状态的改变是常透过主控制台来记录或调试时经常检查的问题。Firefox 72 中推出的 监视点(Watchpoints)可以在程式脚本读取属性或写入属性时暂停执行。暂停执行时,你可以在 Scopes 窗格中的属性上单击右键,以新增监视点。

在除錯器的 Scopes 窗格中的物件屬性單擊右鍵以新增 get/set 監看檢查點

贡献者 Janelle deMent结合了 get / set ,让监视点在使用上更為方便。在新增这个选项之后,使任何程式参考(script reference)都能将触发暂停程序。

改进的网络数据预览

在先前的每个发行版本中,我们都针对网络的详细信息(Network details)面板窗格都有逐步进行了调整。因为旧的界面在具有事件处理有点的错误,在选择和复制文字文本时很不稳定。此外,我们也提升了大量数据条目性能。

这是大幅清理网络(Network)窗格的其中一步中较大幅的调整,而我们也不断透过 @FirefoxDevTools TwitterMozilla’s Matrix community 针对社群用户进行调查。欢迎加入我们,让我们了解你们的想法。只要取得 Firefox 开发者版本,就可以抢先体验更多网络面板窗格侧栏的新设计。

Web 平台更新

Firefox 77 开始支援一些 Web 平台的新功能。

String#replaceAll

Firefox 67 引入了 String#matchAll,这是用來迭代字串中所有取代 正则表达式匹配结果匹配更為便捷的方法。在 Firefox 77 中,我们让他更加方便是提升了整体的使用体验: String#replaceAll可以用來替換所有相符出現的字串字符串──这个功能你之前可能曾经搜寻过千百次了。(特别感谢超有帮助的 StackOverflow 的大力帮忙!)

以前,如果想要用“dog”替換所有的“cat”时,必須使用全局正则表达式

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

或者,你也可以使用 split 再和 join

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

现在,利用 String#replaceAll 可以大幅提升语法的可读性:

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

IndexedDB 游标请求

Firefox 77 将公开源自 IDBCursor的起源(originated from),公开成请求为 该游标的属性。这是一个很好的改进,往后在编写包装如“升级”数据功能的包装函数等等的内容将变得更加容易。以前要在游标位置上进行升级时,必须传递游标对象(cursor object)及其起源的请求对象(request object),因为前者仰赖於后者。但是在此一改变新版本优化之后,因为请求对象已可透过在游标取得上,所以现在只需要传递游标对象。

Firefox 77 扩展功能:减少授权及等其他功能

自 Firefox 57 版本发行以来,用户会在附加元件的安装与更新过程中或是在更新过程中,当有请求新权限请求时,用户会看到附加元件扩展功能要使用访问的权限。这些提示的频率有时常多到令人感到不知所措,而且如果未能在附加元件扩展功能更新时,如果未能接受新的权限请求,这可能会使用户陷入卡在只能使用旧版本的困境扰。现在扩展开发人员可以将某一些权限设置成 可选权限,如此一来就可以轻松地避免触发过多的提示。可选权限不会在安装时,或在添加到扩展更新版本时触发权限请求。另外,可选权限也可以 在运行时进行请求,因此以便用户可以更加了解查看目前正在进行请求的权限的实际用途。

拜访 附加元件博客网站了解 Firefox 77 更多附加元件的相关更新其他的扩展功能!

总结

以上就是这次 Firefox 77 的精彩亮点!了解新功能并之后,记得动手亲身体验看看!与往常一样,欢迎随时留言反馈,或在评论区中提問。

关于 Florian Scholz

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

Florian Scholz 的更多文章…

关于 Harald Kirschner (digitarald)

Harald “digitarald” Kirschner 是 Firefox 开发者体验和工具的产品经理——努力赋予创作者权力,让他们能够编写、设计和维护一个对所有人开放且可访问的网络。在 Mozilla 工作的 8 年里,他在性能、Web API、移动设备、可安装 Web 应用程式、数据可视化和开发者推广项目等领域积累了丰富的技能。

Harald Kirschner (digitarald) 的更多文章…

Firefox 77新功能:开发工具改进和Web平台更新

全新Firefox稳定版现已推出。版本77为Web开发人员带来了诸多新功能。

本文只是归纳了一些亮点;如需了解详细信息,请参见以下资源:

开发人员工具改进

首先来看看版本77中最值得关注的开发人员工具改进和补充。若要进一步了解进行中的工作并提供反馈,请下载Firefox DevEdition来抢先体验。

JavaScript调试更快速、更精简

大型Web应用可能会给DevTools带来挑战,因为捆绑、实时重载和依赖项都需要得到快速、正确地处理。在版本77中,Firefox的调试器有了更多本领,让您能够专注于调试。

我们经过多个发行版本改进了调试性能,在寻找可动手的高影响力Bug错误方面即将达到终点。因此,为了能找到残留的瓶颈,我们积极与社区交流。我们收到了许多详细的报告,实现了诸多性能改进,不仅加快了暂停和分步执行,同时也降低了不同时间点上的内存占用。

行之有效的JavaScript和CSS源映射

源映射是这次扩展的组成部分,在性能增强方面功效显著。部分内联源映射在加载时间上提升了10倍。但更重要的是,我们加强了更多源映射配置的可靠性。我们解决了解析和映射的回退问题,而这要归功于大家提供的有关生成稍有差错的源映射的报告。总体而言,之前无法加载您的原始CSS和JavaScript/TypeScript/etc代码的项目如今应该可以正常运作了。

在选定堆栈帧内分步执行JavaScript

分步执行是调试的一个重要部分,但不够直观明了。在进入和退出函数以及在库和自有代码之间移动时,您可能很容易迷失方向并超出范围。

现在,调试器可以在分步执行时遵从当前选定的堆栈。当您进入某个函数调用后,或者在堆栈深处的某个库方法上暂停时,这特别有用。只需在调用堆栈中选择正确的函数,即可跳转到当前暂停的行并从那里继续分步执行。

前往调用堆栈并在相应函数中继续分步执行

请翻译:Alt文本:前往调用堆栈并在相应函数中继续分步执行

希望这能让代码分步执行变得更加直观明了,并降低您遗漏重要代码行的几率。

Network和Debugger的溢出设置

为了造就更简洁的工具栏,Network和Debugger沿用与Console相同的范例,将现有和新的复选框组合成一个全新的设置菜单。这不仅让您一手掌握“Disable JavaScript”等功能强大的选项,也给未来更强大的选项留出余地。

Network和Debugger工具栏中的溢出设置菜单。

请翻译:Alt文本:Network和Debugger工具栏中的溢出设置菜单。

暂停属性读写

了解状态变化是个问题,通常通过控制台调试日志来调查。观察点(Watchpoint)是Firefox 72中引入的功能,可以在脚本读取或写入属性的过程中暂停执行。暂停之后,右键单击Scopes面板中的属性即可关联它们。

右键单击Debugger的Scopes中的对象属性以在get/set上中断

请翻译:Alt文本:右键单击Debugger的Scopes中的对象属性以在get/set上中断

感谢Janelle deMent的贡献,组合了get/set的新选项使观察点变得更易使用,任何脚本引用皆可触发暂停。

改进的Network数据预览

Network详情面板在每次发行时都有进步,如今已得到重新架构。旧界面中存在事件处理Bug错误,使选择和复制文本容易出错。我们不仅解决了这一点,也提升了大型数据输入的性能。

这是Network面板中重要界面清理工作的一部分,我们已就此通过@FirefoxDevTools TwitterMozilla的Matrix社区向社区发出了问卷调查。欢迎您分享您的见解。您也可下载Firefox DevEdition,抢先体验Network面板边栏的更多新设计。

Web平台更新

Firefox 77支持多项新的Web平台功能。

String#replaceAll

Firefox 67引入了String#matchAll,这是一种更便于迭代regex结果匹配项的方式。在Firefox 77中,我们让便捷程度更进一步:通过String#replaceAll来帮助替换字符串的所有实例;这或许是您长久以来梦寐以求的运算(感谢StackOverflow做出的巨大贡献!)。

在过去,若要将所有cats替换成dogs,必须要使用全局正则表达式

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

或者,也可使用splitjoin

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

现在,因为有了String#replaceAll,这变得更加易读了:

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

IndexedDB光标请求

Firefox 77将IDBCursor所源自的请求作为光标上的属性来公开。这是一种精妙的改进,使得“升级”数据库功能的wrapper函数的编写变得更加轻松。在过去,如果要对光标进行这种升级,必须要传递光标对象和它所源自的请求对象,因为前者依赖于后者。有了这一改进,现在只需要传递光标对象,因为请求已在光标上可用。

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

从Firefox 57开始,用户在安装过程中或更新期间添加新权限时会看到扩展希望访问某些权限的提示。这些频繁出现的提示令人苦不堪言,假如在扩展更新过程中没有接受新的权限请求,用户便会滞留于旧版本中。我们减轻了扩展开发人员的负担,将更多权限作为可选权限提供,尽可能减少触发提示的次数。可选权限不会在安装期间或添加到扩展更新时触发权限请求,而且也可在运行时请求,因此用户可以在上下文中查看具体请求了哪些权限。

请访问加载项博客网站,进一步了解Firefox 77中的扩展更新!

总结

以上介绍了Firefox 77的亮点!敬请体验全新功能,享受其中的乐趣!与过去一样,欢迎您随时留言反馈并提出疑问。

关于 Florian Scholz

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

Florian Scholz 的更多文章…

关于 Harald Kirschner (digitarald)

Harald “digitarald” Kirschner 是 Firefox 开发者体验和工具的产品经理——努力赋予创作者权力,让他们能够编写、设计和维护一个对所有人开放且可访问的网络。在 Mozilla 工作的 8 年里,他在性能、Web API、移动设备、可安装 Web 应用程式、数据可视化和开发者推广项目等领域积累了丰富的技能。

Harald Kirschner (digitarald) 的更多文章…