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

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 视频发表评论。

开发者工具的新变化

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