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

Jecelyn Yeen

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

Styles 窗格现在更好地支持修改使用 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 项新核心 Web 指标，而 TBT 是另一项核心 Web 指标“首次输入延迟时间”的实验室衡量代理。

我们还重新调整了效果评分公式，以更好地反映用户的加载体验。

Lighthouse 6.0 中的新性能指标

Chromium 问题 #772558

首次有效绘制时间 (FMP) 指标弃用

Lighthouse 6.0 已废弃首次有效绘制 (FMP)。我们还将其从“效果”面板中移除。我们建议用 Largest Contentful Paint 替代 FMP。如需了解为何弃用该指标，请参阅首次有效绘制时间。

Chromium 问题 #1096008

支持新的 JavaScript 功能

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

  • 可选链接语法自动补全 - 管理中心中的属性自动补全功能现在支持可选链接语法，例如，除了 name. 和 name[ 之外，name?. 现在也适用。
  • 私有字段的语法突出显示 - 私有类字段现在会在“Sources”面板中正确突出显示语法并以美化格式输出。
  • Null 合并运算符的语法突出显示 - DevTools 现在会在“Sources”面板中正确美化显示 Null 合并运算符。

Chromium 问题 #1083214、#1073903、#1083797

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

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

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

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

应用快捷方式警告

Chromium 问题 #955497

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

“Network”面板的“Timing”标签页现在包含 Service Worker respondWith 事件。respondWith 是指从服务工作器 fetch 事件处理脚本运行前立即到 fetch 处理脚本的 respondWith promise 解决时的时间。

Service Worker“respondWith”

Chromium 问题 #1066579

“计算”窗格的一致显示

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

Chromium 问题 #1073899

WebAssembly 文件的字节码偏移量

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

字节码偏移量

Chromium 问题 #1071432

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

在 Sources 面板编辑器中执行复制或剪切操作时，如果未选择任何内容，DevTools 将复制或剪切当前行内容。例如，在下面的视频中，光标位于第 1 行的末尾。按下剪切键盘快捷键后，系统会将整行复制到剪贴板并将其删除。

Chromium 问题 #800028

控制台设置更新

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

现在，Search Console 设置中的对类似消息进行分组切换开关也适用于重复消息。以前，该功能仅适用于类似邮件。

例如，以前，即使未选中将类似消息分组，DevTools 也不会取消分组消息 hello。现在，hello 消息已取消分组：

Chromium 问题 #1082963

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

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

仅限所选上下文

Chromium 问题 #1055875

性能面板更新

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

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

JavaScript 编译缓存信息

Chromium 问题 #912581

“效果”面板会根据录制开始时间在标尺中显示时间。对于用户进行导航的录制内容，现在已发生变化，DevTools 现在会显示与导航相关的标尺时间。

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

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

Chromium 问题 #974550

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

Sources 面板对断点、条件断点和日志点进行了全新设计。 断点采用了经过更新的标志设计，颜色更亮、更易于辨识。添加了图标来区分条件断点和日志点。

断点

Chromium 问题 #1041830

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。