开发者工具的新变化 (Chrome 84)

Kayce Basques

使用新的“问题”标签页解决网站问题

抽屉式导航栏中新增的问题标签页旨在减少通知疲劳，并让管理中心保持整洁有序。目前，控制台是网站开发者、库、框架和 Chrome 本身记录消息、警告和错误的中心位置。“问题”标签页以结构化、汇总且切实可行的形式显示浏览器中的警告，提供指向 DevTools 中受影响资源的链接，并提供有关如何解决问题的指南。随着时间的推移，越来越多的 Chrome 警告将显示在“问题”标签页中，而不是在“控制台”中，这应该有助于减少“控制台”中的杂乱信息。

如需开始使用，请参阅使用 Chrome DevTools“问题”标签页查找和解决问题。

“问题”标签页。

Chromium bug：#1068116

在“检查模式”提示中查看无障碍信息

“检查”模式提示现在会指明元素是否具有无障碍的名称和角色，以及是否可通过键盘获得焦点。

包含无障碍信息的“检查模式”提示。

Chromium bug：#1040025

性能面板更新

在页脚中查看 Total Blocking Time (TBT) 信息

记录加载性能后，效果面板现在会在页脚中显示 Total Blocking Time (TBT) 信息。TBT 是一个加载性能指标，有助于量化页面变为可用状态所需的时间。它本质上衡量的是网页看起来可用（因为其内容已渲染到屏幕上）但实际上不可用（因为 JavaScript 阻塞了主线程，因此网页无法响应用户输入）所需的时间。TBT 是用于近似估算 First Input Delay 的主要实验室指标，后者是 Google 新推出的 Core Web Vitals 指标之一。

如需获取总阻塞时间信息，请勿使用重新加载网页 重新加载页面 工作流记录网页加载性能。请改为点击录制图标 录制，手动重新加载网页，等待网页加载，然后停止录制。如果您看到 Total Blocking Time: Unavailable，则表示 DevTools 未从 Chrome 的内部性能分析数据中获取所需的信息。

“效果”面板录制的页脚中的总屏蔽时间信息。

Chromium bug：#1054381

新版“体验”部分中的布局偏移事件

“效果”面板中新增的体验部分可帮助您检测布局偏移。 累计布局偏移 (CLS) 是一项指标，可帮助您量化不必要的视觉不稳定性，也是 Google 新推出的核心网页指标之一。

点击布局偏移事件，即可在摘要标签页中查看布局偏移的详细信息。将鼠标悬停在从哪里移出和移至哪里字段上，直观了解布局偏移的位置。

布局偏移的详细信息。

控制台中更准确的 promise 术语

在记录 Promise 时，控制台之前会错误地将 Promise 的状态描述为 resolved：

控制台使用旧版“已解决”术语的示例。

控制台现在使用 fulfilled 一词，该术语与 Promise 规范保持一致：

使用新“已完成”术语的 Play 管理中心示例。

V8 bug：#6751

“样式”窗格更新

支持 revert 关键字

“样式”窗格的自动补全界面现在会检测 revert CSS 关键字，该关键字会将属性的级联值还原为在未对元素的样式进行任何更改的情况下该值的预期值。

将某个属性的值设置为还原。

Chromium bug：#1075437

图片预览

将鼠标悬停在“Styles”窗格中的 background-image 值上，即可在提示中查看图片的预览。

将鼠标悬停在 background-image 值上。

Chromium bug：#1040019

颜色选择器现在使用以空格分隔的函数颜色表示法

CSS 颜色模块级别 4 指定 rgb() 等颜色函数应支持以空格分隔的参数。例如，rgb(0, 0, 0) 等同于 rgb(0 0 0)。

现在，当您使用颜色选择器选择颜色，或在“样式”窗格中按住 Shift 键并点击颜色值以在颜色表示法之间切换时，您会看到以空格分隔的参数语法。

在“样式”窗格中使用空格分隔的参数。

您还会在“Computed”窗格和“Inspect Mode”工具提示中看到该语法。

由于color() 等即将推出的 CSS 功能不支持已废弃的分号分隔参数语法，因此开发者工具使用了新语法。

大多数浏览器已经支持用空格分隔的参数语法一段时间了。请参阅我可以使用以空格分隔的功能性颜色表示法吗？

Chromium bug：#1072952

弃用“元素”面板中的属性窗格

元素面板中的属性窗格已废弃。请改为在 Console 中运行 console.dir($0)。

已废弃的“属性”窗格。

参考文献：

“清单”窗格中支持应用快捷方式

应用快捷方式可帮助用户在 Web 应用中快速启动常用或推荐的任务。应用快捷方式菜单仅针对安装在用户桌面设备或移动设备上的渐进式 Web 应用显示。

如需了解详情，请参阅使用应用快捷方式快速处理事务。

“清单”窗格中的应用快捷方式。

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。