vue devtools面板没有显示_DevTools（Chrome 85）的新功能

// 每日前端夜话 第371篇
// 正文共：2700 字
// 预计阅读时间：10 分钟

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

• Network 面板的 Timing 选项卡现在增添了 respondWith 事件，该事件记录了 service worker fetch 事件处理运行 promise 所达成的时间(issue #1066579^[1])
• 在 Console settings 中，Group similar 现在适用于重复的消息，并且控制台设置中的 Selected context only 设置现在仍然有效 (issues #1082963^[2] 和 #1055875^[3])
• 现在 Manifest 面板会在应用图标尺寸不正确或者不是正方形时显示应用快捷方式的警告 (issue #955497^[4])
• 计算窗格在跨多个视口时一致显示 (issue #1073899^[5])

这些都是有用的更改，但是在本文中，我将回顾与样式编辑和新的 JavaScript 功能相关的更改，以及 Source 和 Performance 面板中的改进。

在你阅读本文时，很可能 Chrome 85 将会成为主流的稳定版本。在撰写本文时(2020年7月30 日)，你只能通过下载 Chrome 的开发版本^[6]来获得 Chrome 85。你可以在 Chrome 发行渠道^[7] 页面上了解有关 Chrome 发行版本的更多信息。

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

通过即时编辑代码或样式来实时查看是 DevTools 最有用的功能之一。

使用 CSS 样式时，可以选择用 CSS 对象模型^[8](CSSOM)API 以编程的方式操作 CSS 规则：

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

但是，DevTools 不允许你编辑以这种方式创建的样式。

不过这在 Chrome 85 中已经得到改进^[9]。从此版本开始，你可以编辑用 CSSOM API 构建的样式，尤其是在使用 CSSStyleSheet.insertRule、CSSStyleSheet.deleteRule、CSSStyleDeclaration.setProperty 和  CSSStyleDeclaration.removeProperty 时。

这也适用于 LitElement 之类的库或 React Native for web。

即使在打开 DevTools 之后插入样式，这些样式也是可编辑的，这也适用于 Constructable Stylesheets^[10]，目前仅在 Chrome 中可用^[11]。

可构造样式表允许你通过调用 CSSStyleSheet() 构造函数，用 replace()和 `replaceSync()`^[12] 添加和更新样式表规则来创建样式表。

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