此页面由 Cloud Translation API 翻译。

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

Kayce Basques

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

抽屉式导航栏中的新问题标签页旨在帮助减少控制台中通知疲劳和杂乱无章的情况。目前，控制台是网站开发者、库、框架和 Chrome 本身可以记录消息、警告和错误的地方。“问题”标签页以结构化、汇总且可操作的方式显示浏览器发出的警告，并提供指向开发者工具中受影响资源的链接，并提供关于如何解决问题的指导。随着时间的推移，越来越多的 Chrome 警告将显示在“问题”标签页中，而不是显示在控制台中，这有助于减少控制台杂乱无章。

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

“问题”标签页。

Chromium bug：#1068116

检查模式提示现在会指明元素是否具有可访问的名称和角色，以及是否可由键盘聚焦。

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

Chromium bug：#1040025

性能面板更新

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

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

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

性能面板记录页脚中的“总阻塞时间”信息。

Chromium bug：#1054381

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

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

点击某个布局偏移事件，在摘要标签页中查看布局偏移的详细信息。将鼠标悬停在 Moved from 和 Moved to 字段上，即可直观地看到布局偏移。

布局偏移的详细信息。

控制台中的 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 键并点击颜色值）时，您会看到以空格分隔的参数语法。

在“Styles”窗格中使用以空格分隔的参数。

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

开发者工具使用的是新语法，因为即将推出的 CSS 功能（例如 color()）不支持已弃用的逗号分隔参数语法。

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

Chromium bug：#1072952

废弃了 Elements 面板中的 Properties 窗格

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

已弃用的“属性”窗格。

参考文献：

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

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

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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