1. 首页
  2. >
  3. 技术信息
  4. >
  5. 技术资讯

DevTools(Chrome 85)的新功能

DevTools(Chrome 85)的新功能

原文:https://blog.logrocket.com/whats-new-in-devtools-chrome-85/,作者:Esteban Herrera Follow,翻译:公众号《前端全栈开发者》

毫无疑问,DevTools是我们在开发和测试Web应用程序时最有用的工具之一。在Chrome 85中,DevTools增加了几项改进,比如。

  • Network面板的Timing选项卡现在包括 responseWith 事件,该事件记录了服务工作者 fetch 事件处理程序运行前到承诺完成时的时间(issue#1066579)
  • Console settings中,Group similar切换现在适用于重复的消息,控制台设置中的 "只选择上下文(Selected context only) "设置现在被坚持下来了(issue#1082963和#1055875)。
  • 如果应用程序图标的大小不正确或不是正方形,Manifest面板现在会显示应用程序快捷方式的警告(问题#955497)
  • 在多个视口尺寸上一致地显示计算窗格(issue#1073899)

这些都是有益的变化,但在这篇文章中,我将回顾与样式编辑和新JavaScript功能相关的变化,以及SourcePerformance面板的变化。

很有可能,当你读到这篇文章的时候,Chrome 85将是主流的稳定版本。在写这篇文章的时候(2020年7月),你只能通过下载Chrome的开发版获得Chrome 85。你可以在Chrome发布渠道页面了解更多关于Chrome的发布版本。

DevTools(Chrome 85)的新功能

CSS-in-JS框架的样式编辑

就地编辑代码或样式,实时查看变化是DevTools最有用的功能之一。

在使用CSS样式时,你可以选择使用CSS对象模型(CSSOM)API对CSS规则进行编程操作。

const style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('#myDiv {background-color: blue; color: yellow}');

但是,DevTools不允许你编辑以此方式创建的样式。

这一点在Chrome 85中有所改变。从这个版本开始,你可以编辑用CSSOM API构建的样式,特别是在使用CSSStyleSheet.insertRule、CSSStyleSheet.deleteRule、CSSStyleDeclaration.setProperty和CSSStyleDeclaration.removeProperty时。

这也适用于LitElement(用这个例子试试)或React Native for web(用这个例子试试)等库。

Constructable Stylesheets允许你通过调用 CSSStyleSheet() 构造函数来创建样式表,通过 replace() replaceSync() 来添加和更新样式表规则。

const sheet = new CSSStyleSheet();
sheet.replaceSync('#myDiv {background-color: blue; color: yellow}');
document.adoptedStyleSheets = [sheet];

支持新的JavaScript功能

Chrome使用Acorn(https://github.com/acornjs/acorn在DevTools控制台中解析JavaScript。

在Chrome 85中,Acorn更新到了7.3.0版本,除其他改进外,还增加了对可选链式操作符( ?. )语法的支持。

使用可选的链式操作符,而不是像下面这样有一段代码。

if (user && user.name && user.name.last)
lastName = user.name.last.toUpperCase();

你可以只拥有这个。

lastName = user?.name?.last?.toUpperCase();

但在Chrome 84之前,这个操作符的自动完成被破坏了。

DevTools(Chrome 85)的新功能

现在,控制台中的属性自动补全可以使用这个操作符( user?.),就像你使用 user. user[ 一样。

DevTools(Chrome 85)的新功能

其他两个更改与“sources”面板中的语法突出显示有关。

在 Chrome 84 之前,私有字段和方法都是以白色文本显示的。在某些情况下,甚至行的其余部分也显示为白色。

DevTools(Chrome 85)的新功能

sources板使用 CodeMirror 来显示代码。

在Chrome 85中,CodeMirror更新到了5.54.0版本。这个版本改进了私有属性和类字段的解析。

DevTools(Chrome 85)的新功能

最后一个关于JavaScript新特性的变化是关于nullish coalescing操作符。

在Chrome 85之前,当代码中包含这个操作符时,漂亮打印格式就会被破坏。

DevTools(Chrome 85)的新功能

但现在修好了,格式也能正常使用。

DevTools(Chrome 85)的新功能

更多关于Sources面板的变化

Sources面板还有其他有用的变化。

现在我们可以在编辑器中复制或剪切当前行,即使你什么都不选择。

为此,请将光标定位在你要复制或剪切的行的末尾,然后按适当的键盘快捷键。

DevTools(Chrome 85)的新功能

另一项改进是,如果你使用WebAssembly文件,编辑器现在显示字节码(十六进制)偏移量来显示Wasm模块中的源位置,而不是用于其他格式的基于行的位置。

DevTools(Chrome 85)的新功能

最后,还新增了断点、条件断点和日志点的图标。

他们的样子如下:

DevTools(Chrome 85)的新功能

同样,这就是他们在黑暗模式下的样子:

DevTools(Chrome 85)的新功能

现在它们更加丰富多彩:

DevTools(Chrome 85)的新功能

我认为,这提高了断点图标的可读性,尤其是在启用暗模式时:

DevTools(Chrome 85)的新功能

Performance性能面板更新

DevTools的“性能(Performance)”面板中有两项重要更改。

关于第一个,在Chrome 84之前,如果给定的脚本没有被缓存,DevTools不会显示缓存信息。

DevTools(Chrome 85)的新功能

现在缓存信息总是显示在摘要选项卡中,显示缓存没有发生的原因。

第二个变化与录音规则中显示的时间有关。

在以前的版本中,时间是根据录音开始的时间来显示的。

DevTools(Chrome 85)的新功能

注意第二页FCP显示的时间戳,8907毫秒。这是事件发生的时间,因为记录开始。

现在,时间是相对于用户导航的地方。

DevTools(Chrome 85)的新功能

在上面的例子中,第二个页面的FCP的时间戳是901.1毫秒,即页面加载后事件发生的时间。

总结

在这篇文章中,我们回顾了Chrome 85中DevTools最重要的变化。我没有深入回顾帖子开头提到的四个变化,但你可以在这篇文章中了解更多关于它们的信息(也欢迎向开发团队反馈)。

帖子中还提到,Lighthouse面板在Chrome 85中更新为使用Lighthouse 6.0。幸运的是,Lighthouse 6.0是在Chrome 84中推出的,我们不必等到下一个版本。

最后,请记住,你可以下载Chrome Canary或Chrome的开发版来访问最新的DevTools功能。