开发者工具中的新功能 (Chrome 85)

Jecelyn Yeen

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

“样式”窗格现在可以更好地支持使用 CSS 对象模型 (CSSOM) API 创建的样式的编辑。许多 CSS-in-JS 框架和库在底层使用 CSSOM API 来构建样式。

您现在还可以使用可构造样式表修改在 JavaScript 中添加的样式。可构造样式表是一种在使用 Shadow DOM 时创建和分发可重用样式的新方式。

例如，之前无法修改通过 CSSStyleSheet (CSSOM API) 添加的 h1 样式。现在，您可以在“样式”窗格中修改以下内容：

Chromium 问题 #946975

Lighthouse 面板中的 Lighthouse 6

Lighthouse 面板现在运行的是 Lighthouse 6。如需查看所有重大变更的摘要，请参阅 Lighthouse 6.0 中的新功能；如需查看所有变更的完整列表，请参阅 v6.0.0 版本说明。

Lighthouse 6.0 在报告中引入了三个新指标：Largest Contentful Paint (LCP)、Cumulative Layout Shift (CLS) 和 Total Blocking Time (TBT)。LCP 和 CLS 是 Google 新推出的核心网页指标中的 2 项，而 TBT 是一项实验室测量指标，可作为另一项核心网页指标（首次输入延迟时间）的代理指标。

此外，我们还重新调整了性能得分公式的权重，以便更好地反映用户的加载体验。

Chromium 问题 #772558

弃用首次有效渲染时间 (FMP)

Lighthouse 6.0 中已弃用首次有效渲染时间 (FMP)。它也已从“效果”面板中移除。建议使用 Largest Contentful Paint 来取代 FMP。如需了解该指标为何被弃用，请参阅首次有效绘制时间。

Chromium 问题 #1096008

支持新的 JavaScript 功能

开发者工具现在可以更好地支持一些最新的 JavaScript 语言功能：

• 可选链式调用语法自动补全 - 控制台中的属性自动补全现在支持可选链式调用语法，例如，除了 name. 和 name[ 之外，name?. 现在也可以正常使用。
• 私有字段的语法突出显示 - 现在，“来源”面板中会正确突出显示私有类字段的语法并进行美化打印。
• Nullish 合并运算符的语法突出显示 - 开发者工具现在可以在“来源”面板中正确地美化打印 nullish 合并运算符。

Chromium 问题 #1083214、#1073903、#1083797

清单窗格中的新应用快捷方式警告

应用快捷方式可帮助用户在 Web 应用中快速启动常用或推荐的任务。

如果出现以下情况，清单窗格现在会显示警告：

• 应用快捷方式图标小于 96x96 像素
• 应用快捷方式图标和清单图标不是正方形（因为它们会被忽略）

Chromium 问题 #955497

“Timing”标签页中的 Service Worker respondWith 事件

“网络”面板的“时间”标签页现在包含 service worker respondWith 事件。respondWith 是指从服务工作线程 fetch 事件处理程序运行之前的时间到 fetch 处理程序的 respondWith promise 得到解决的时间。

Chromium 问题 #1066579

“计算”窗格的显示保持一致

“元素”面板中的“计算后”窗格现在会始终显示为跨所有视口大小的窗格。以前，当开发者工具视口的宽度较窄时，“计算后”窗格会合并到“样式”窗格中。

Chromium 问题 #1073899

WebAssembly 文件的字节码偏移量

DevTools 现在使用字节码偏移量来显示 Wasm 反汇编的行号。这样可以更清楚地表明您正在查看的是二进制数据，并且与 Wasm 运行时引用位置的方式更加一致。

Chromium 问题 #1071432

在“来源”面板中逐行复制和剪切

在“来源”面板编辑器中执行复制或剪切操作时，如果未选择任何内容，开发者工具将复制或剪切当前行的内容。例如，在下面的视频中，光标位于第 1 行的末尾。按下剪切键盘快捷键后，整行内容会被复制到剪贴板并删除。

Chromium 问题 #800028

控制台设置更新

取消对相同控制台消息的分组

控制台设置中的对类似消息进行分组切换开关现在也适用于重复消息。之前，此功能仅适用于类似的消息。

例如，以前，即使取消选中对类似消息进行分组，开发者工具也不会取消对消息 hello 的分组。现在，hello 条消息已取消分组：

Chromium 问题 #1082963

保留仅限已选择的上下文设置

控制台设置中的仅限所选情境设置现在会保留。以前，每次关闭并重新打开 DevTools 时，设置都会重置。此更改使设置行为与其他控制台设置选项保持一致。

Chromium 问题 #1055875

性能面板更新

“性能”面板中的 JavaScript 编译缓存信息

JavaScript 编译缓存信息现在始终显示在“性能”面板的“摘要”标签页中。以前，如果未发生代码缓存，开发者工具不会显示任何与代码缓存相关的内容。

Chromium 问题 #912581

“性能”面板中的导航时间对齐

性能面板过去会在标尺中显示时间，具体取决于录制开始的时间。现在，对于用户导航的录制内容，情况已发生变化，开发者工具现在会显示相对于导航的标尺时间。

我们还更新了 DOMContentLoaded、First Paint、First Contentful Paint 和 Largest Contentful Paint 事件的时间，使其相对于导航开始时间，这意味着它们与 PerformanceObserver 报告的时间一致。

Chromium 问题 #974550

断点、条件断点和日志点的新图标

来源面板针对断点、条件断点和日志点采用了新设计。 断点采用全新的旗帜设计，颜色更鲜艳、更友好。添加了图标，用于区分条件断点和日志点。

Chromium 问题 #1041830

下载预览渠道

不妨考虑使用 Chrome Canary 版、开发者版或 Beta 版作为默认开发浏览器。通过这些预览渠道，您可以访问最新的 DevTools 功能，测试最前沿的 Web 平台 API，并在用户发现问题之前帮助您找到网站上的问题！

与 Chrome 开发者工具团队联系

您可以使用以下选项讨论新功能、更新或与开发者工具相关的任何其他内容。

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

开发者工具的新变化系列中涵盖的所有内容。