开发者工具中的新功能 (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 新推出的两项核心网页指标，而 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 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 窗格

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

Chromium 问题 #1073899

WebAssembly 文件的字节码偏移

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

字节码偏移

Chromium 问题 #1071432

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

在“Sources”面板编辑器中未做任何选择的情况下执行复制或剪切时，开发者工具会复制或剪切当前行的内容。例如，在下面的视频中，光标位于第 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 视频发表评论。

开发者工具的新变化

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

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