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

Kayce Basques

利用新的“问题”标签页修复网站问题

抽屉式导航栏中的新问题标签页旨在帮助减少通知疲劳和杂乱无章 控制台。目前，管理中心是网站开发者、库 框架和 Chrome 本身来记录消息、警告和错误。“问题”标签页 以结构化、汇总、可操作的方式从浏览器发出的警告， 资源，并提供关于如何解决问题的指导。随着时间推移，越来越多 的 Chrome 警告将显示在“问题”标签页而非“控制台”中，这应该能 化繁为简

要开始使用，请参阅使用 Chrome 开发者工具“问题”标签页查找和解决问题。

Chromium bug：#1068116

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

检查模式提示现在会指明元素是否具有可访问的名称和角色 并且支持键盘聚焦。

Chromium bug：#1040025

性能面板更新

在页脚中查看总阻塞时间 (TBT) 信息

记录加载性能后，“性能”面板现在会显示总阻塞时间 (TBT) 信息。TBT 是一个加载性能指标，有助于量化 需要一个页面才能变得可用。实质上，它用于衡量网页看起来可供使用多长时间 （因为其内容已渲染到屏幕上）但实际上不可用，因为 JavaScript 阻塞主线程，因此页面无法响应用户输入。TBT 是主要的实验 指标，用于近似于 First Input Delay，这是 Google 新推出的核心网页指标之一。

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

Chromium bug：#1054381

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

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

点击某个布局偏移事件，在摘要标签页中查看布局偏移的详细信息。悬停 已移到和已移到字段上，以便直观显示布局偏移的位置。

控制台中的 promise 术语更加准确

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

控制台现在使用 fulfilled 这个术语，此术语符合 Promise 规范：

V8 bug：#6751

“Styles”窗格更新

支持 revert 关键字

现在，“Styles”窗格的自动补全界面会检测 revert CSS 关键字，这会还原 如果不对属性进行更改， 元素样式设置。

Chromium bug：#1075437

图片预览

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

Chromium bug：#1040019

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

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

当您使用颜色选择器选择颜色时，或在 只需按住 Shift 键并点击颜色值，即可看到以空格分隔的 参数语法。

您还可以在“Computed”窗格和“Inspect Mode”提示中看到相应语法。

DevTools 之所以使用新语法，是因为即将推出的 CSS 功能（如 color()）不支持 已弃用的逗号分隔参数语法。

以空格分隔的参数语法在大多数浏览器上已得到支持。请参阅我能否使用 是否使用空格分隔函数颜色表示法？

Chromium bug：#1072952

废弃了 Elements 面板中的 Properties 窗格

元素面板中的属性窗格已被弃用。在console.dir($0) 改为控制台。

参考文献：

• console.dir()
• $0

Manifest 窗格中的应用快捷方式支持

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

如需了解详情，请参阅利用应用快捷方式快速完成事务。

下载预览渠道

请考虑将 Chrome Canary、开发者版或 Beta 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

• 请通过 crbug.com 提交建议或反馈。
• 使用���多选项报告开发者工具问题 >帮助 >在开发者工具中报告开发者工具问题。
• 请发送电子邮件至 @ChromeDevTools。
• 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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