开发者工具中的新功能 (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。有关 查看所有重大变更的摘要，或查看 v6.0.0 版本说明，获取所有变更的完整列表。

Lighthouse 6.0 为报告引入了三个新指标：Largest Contentful Paint (LCP)、 Cumulative Layout Shift (CLS) 和 Total Blocking Time (TBT)。LCP 和 CLS 是 Google 新推出的 Core Web Vitals，而 TBT 是另一项 Core Web Vitals (First Input) 指标的实验室衡量代理 延迟。

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

Lighthouse 6.0 中的新性能指标

Chromium 问题 #772558

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

Lighthouse 6.0 已弃用首次有效绘制 (FMP)。它还已从 “性能”面板。推荐使用 Largest Contentful Paint 来替代 FMP。请参阅 Meaningful Paint，以了解已弃用的原因。

Chromium 问题 #1096008

支持新 JavaScript 功能

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

  • 可选链语法自动补全 - 现在可在控制台中自动补全属性 支持可选的链式语法，例如现在，name?. 可与 name. 和 name[ 搭配使用。
  • 突出显示私有字段的语法 - 私有类字段现在正确无误 “Sources”面板中的语法突出显示和整齐输出。
  • Nullish coalescingoperator 的语法突出显示 - 开发者工具现在可以正确输出美观输出 “Sources”面板中的 nullish 合并运算符。

Chromium 问题 #1083214、#1073903、#1083797

“Manifest”（清单）窗格中的新应用快捷方式警告

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

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

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

应用快捷方式警告

Chromium 问题 #955497

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

“Network”面板的“Timing”标签页现在包含 Service Worker respondWith 事件。respondWith 表示 Service Worker fetch 事件处理脚本运行之前的时间， fetch 处理程序的 respondWith promise 已结清。

Service Worker `respondWith`

Chromium 问题 #1066579

一致地显示 Computed 窗格

现在，“元素”面板中的“计算”窗格在所有视口中都显示为一个窗格 尺寸。以前，当 开发者工具的视口太窄了。

Chromium 问题 #1073899

WebAssembly 文件的字节码偏移

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

字节码偏移

Chromium 问题 #1071432

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

在 Sources 面板编辑器中未做任何选择的情况下执行复制或剪切时，DevTools 将复制 或剪切当前行的内容。例如，在下面的视频中，光标位于 第 1 行。按下“剪切”键盘快捷键后，将整行内容复制到剪贴板，然后 已删除。

Chromium 问题 #800028

控制台设置更新

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

控制台设置中的类似群组切换开关现在适用于重复消息。之前是 只会应用于类似邮件

例如，之前，开发者工具不会将消息 hello 取消分组，即使将类似分组 处于未选中状态现在，hello 消息已取消分组：

Chromium 问题 #1082963

保留仅所选上下文设置

控制台设置中的 Selected context only（仅限所选情境）设置现在保持不变。之前的设置 每次关闭并重新打开开发者工具时都会重置。这项变更使设置行为 与其他控制台设置选项保持一致。

仅所选上下文

Chromium 问题 #1055875

性能面板更新

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

JavaScript 编译缓存信息现在始终显示在 “性能”面板。以前，如果代码 并没有进行缓存

JavaScript 编译缓存信息

Chromium 问题 #912581

“性能”面板，用于在标尺中显示录制开始时间。这包含 现在针对用户导航的记录发生了变化，其中开发者工具现在显示的是相对标尺时间 切换到导航栏

在“性能”面板中调整导航时间

我们还更新了 DOMContentLoaded、First Paint、First Contentful Paint 和 Largest 的时间 Contentful Paint 事件的位置与导航开始时间的关系，也就是说，它们与 显示时间由PerformanceObserver报告。

Chromium 问题 #974550

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

Sources 面板采用了新的断点、条件断点和日志点设计。 断点将获得焕然一新的标志设计，颜色更明亮、更友好。图标已添加到 区分条件断点和日志点。

断点

Chromium 问题 #1041830

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变更，或与开发者工具相关的任何其他内容。

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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