开发者工具中的新功能 (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 视频发表评论。

开发者工具的新变化

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

Chrome 128

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