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

适用于 CSS-in-JS 框架的样式修改

现在,“Styles”窗格可以更好地支持修改使用 CSS Object Model (CSSOM) API 创建的样式。许多 CSS-in-JS 框架和库在后台使用 CSSOM API 来构建样式。

您也可以立即使用可构造的样式表修改通过 JavaScript 添加的样式。可构造的样式表是一种在使用 Shadow DOM 时创建和分发可重复使用的样式的新方式。

例如,之前使用 CSSStyleSheet 添加的 h1 样式 (CSSOM API) 无法修改。“样式”窗格中现在有可修改区域:

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 是另一个核心 Web 指标“First Input Delay”的实验室衡量代理。

性能得分公式也经过了重新加权,可以更好地反映用户的加载体验。

Lighthouse 6.0 中新的性能指标

Chromium 问题 #772558

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

Lighthouse 6.0 中废弃了首次有效绘制 (FMP)。此外,它还已从“效果”面板中移除。建议使用 Largest Contentful Paint 来替代 FMP。如需了解废弃原因,请参阅首次有效绘制

Chromium 问题 #1096008

支持新的 JavaScript 功能

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

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

Chromium 问题 #1083214#1073903#1083797

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

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

如果出现以下情况,“Manifest”窗格现在会显示警告:

  • 应用快捷方式图标小于 96x96 像素
  • 应用快捷方式图标和清单图标不是方形的(将被忽略)

应用快捷方式警告

Chromium 问题 #955497

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

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

Service Worker `respondWith`

Chromium 问题 #1066579

一致显示“Computed”窗格

现在,“Elements”面板中的“Computed”窗格在所有视口尺寸下均以窗格的形式显示。以前,当开发者工具的视口较窄时,“Computed”窗格会在“Styles”窗格中合并。

Chromium 问题 #1073899

WebAssembly 文件的字节码偏移量

现在,开发者工具使用字节码偏移来显示 Wasm 反汇编的行号。这样可让您更清楚地查看二进制数据,并且与 Wasm 运行时引用位置的方式更加一致。

字节码偏移量

Chromium 问题 #1071432

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

当您在“Sources”面板编辑器中在不做任何选择的情况下执行复制或剪切时,开发者工具会复制或剪切当前行内容。例如,在下面的视频中,光标位于第 1 行的结尾。按剪切键盘快捷键后,整行内容会复制到剪贴板并删除。

Chromium 问题 #800028

控制台设置更新

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

控制台设置中的群组类似群组切换开关现在适用于重复消息。以前,它仅应用于类似消息。

例如,以前,即使按如下方式分组,开发者工具也不会取消对消息 hello 的分组。现在,系统已取消将这 hello 封邮件分组:

Chromium 问题 #1082963

保留“仅限选定上下文”设置

控制台设置中的“仅限所选上下文”设置现已保留。以前,每次关闭并重新打开开发者工具时,系统都会重置设置。此更改使设置行为与其他控制台设置选项一致。

仅限所选上下文

Chromium 问题 #1055875

性能面板更新

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

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

JavaScript 编译缓存信息

Chromium 问题 #912581

“性能”面板用于根据录制开始时间在标尺中显示时间。对于用户导航到的记录,这种情况现在发生了变化,开发者工具现在会显示相对于导航的标尺时间。

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

我们还将 DOMContentLoaded、First Paint、First Contentful Paint 和 Largest Contentful Paint 事件的时间更新为相对于导航开始时间,这意味着它们与 PerformanceObserver 报告的时间相符。

Chromium 问题 #974550

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

Sources 面板针对断点、条件断点和日志点采用了新设计。断点采用了焕然一新的标志设计,颜色更鲜艳、更友好。添加了图标以区分条件断点和日志点。

断点

Chromium 问题 #1041830

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59