乐趣区

关于前端:DevToolsChrome-85的新功能

jiezi

DevTools（Chrome 85）的新性能

作者：Esteban Herrera

翻译：疯狂的技术宅

原文：https://blog.logrocket.com/wh…

未经容许严禁转载

DevTools 是开发和测试 Web 利用时最有用的工具之一。在 Chrome 85 中，DevTools 做了一些改良，例如：

  • Network 面板的 Timing 选项卡当初削减了 respondWith 事件，该事件记录了 service worker fetch 事件处理运行 promise 所达成的工夫 (issue #1066579)
  • 在 Console settings 中，Group similar 当初实用于反复的音讯，并且控制台设置中的 Selected context only 设置当初依然无效 (issues #1082963 和 #1055875)
  • 当初 Manifest 面板会在利用图标尺寸不正确或者不是正方形时显示利用快捷方式的正告 (issue #955497)
  • 计算窗格在跨多个视口时统一显示 (issue #1073899)

这些都是有用的更改，然而在本文中，我将回顾与款式编辑和新的 JavaScript 性能相干的更改，以及 Source 和 Performance 面板中的改良。

在你浏览本文时，很可能 Chrome 85 将会成为支流的稳固版本。在撰写本文时（2020 年 7 月 30 日），你只能通过下载 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。

即便在关上 DevTools 之后插入款式，这些款式也是可编辑的，这也实用于 Constructable Stylesheets，目前仅在 Chrome 中可用。

可结构样式表容许你通过调用 CSSStyleSheet() 构造函数，用 replace() 和 replaceSync() 增加和更新样式表规定来创立样式表。

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

反对新的 JavaScript 性能

Chrome 应用 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 合并运算符。

在 Chrome 85 之前的版本中，当代码蕴含以下运算符时，代码格局会被毁坏：

然而当初它被修改了，并且格局能够失常应用：

对 Sources 面板进行更多更改

Sources 面板还有其余有用的更改。

当初，咱们有了即便没有抉择任何内容，也能够在编辑器中复制或剪切以后行的性能。

只须要把光标放在要复制或剪切的行的开端，而后按相应的键盘快捷键：


另一个改良是，如果你应用 WebAssembly 文件，则编辑器会显示 Wasm 模块字节码（十六进制）偏移量：

最初是断点，条件断点和日志断点的新图标。

他们的样子如下：

同样，这就是他们在深色模式下的样子：

当初它们更加丰富多彩：

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

Performance 面板更新

DevTools 的 Performance 面板中有两项重要更改。

对于第一个脚本，直到 Chrome 84，如果未缓存给定脚本，DevTools 不会显示缓存信息：

当初，缓存信息总是显示在摘要标签中，显示了未进行缓存的起因：

第二个变动与录制规定中显示的工夫无关。

在以前的版本中，工夫是依据录制的开始工夫显示的：

请留神，第二页的 FCP 显示的工夫戳为 8907 毫秒。这是从录制开始到事件产生的工夫。

当初，工夫与用户导航的地位无关：

在下面的例子中，第二页 FCP 的工夫戳为 901.1 毫秒，即该事件在页面加载后产生的工夫。

总结

在本文中，咱们浏览了 Chrome 85 中 DevTools 的最重要更改。然而我没有深入探讨本文结尾所提到的四项改良，然而你能够在这里查看相干的内容。

最初，请记住，你能够通过下载 Chrome Canary 或 Chrome 开发版来应用最新的 DevTools 性能。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解 Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13 个帮你进步开发效率的古代 CSS 框架
  • 疾速上手 BootstrapVue
  • JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
  • WebSocket 实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30 分钟用 Node.js 构建一个 API 服务器
  • Javascript 的对象拷贝
  • 程序员 30 岁前月薪达不到 30K，该何去何从
  • 14 个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把 HTML 转成 PDF 的 4 个计划及实现
  • 更多文章 …
退出移动版