原文：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功能相关的变化，以及Source和Performance面板的变化。

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

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之前，这个操作符的自动完成被破坏了。

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

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

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

sources板使用 CodeMirror 来显示代码。

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

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

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

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

更多关于Sources面板的变化

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

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

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

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

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

他们的样子如下：

同样，这就是他们在黑暗模式下的样子：

现在它们更加丰富多彩：

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

Performance性能面板更新

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

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

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

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

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

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

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

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

总结

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

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

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