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的亮点!敬请体验全新功能,享受其中的乐趣!与过去一样,欢迎您随时留言反馈并提出疑问。

This post is also available in: 繁體中文 (繁体中文) English (英语) Español (西班牙语)

About Florian Scholz

Florian is the Content Lead for MDN Web Docs, writes about Web platform technologies and researches browser compatibility data. He lives in Bremen, Germany.

More articles by Florian Scholz…

About Harald Kirschner (digitarald)

Harald "digitarald" Kirschner is a Product Manager for Firefox's Developer Experience and Tools – striving to empower creators to code, design & maintain a web that is open and accessible to all. During his 8 years at Mozilla, he has grown his skill set amidst performance, web APIs, mobile, installable web apps, data visualization, and developer outreach projects.

More articles by Harald Kirschner (digitarald)…