此页面由 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 新推出的核心网页指标之一。

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

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

Chromium bug：#1054381

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

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

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

布局偏移的详细信息。

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

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

控制台示例：使用旧版“resolved”术语。

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

控制台使用新“fulfill”的示例术语。

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”提示中看到相应语法。

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

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

Chromium bug：#1072952

废弃了 Elements 面板中的 Properties 窗格

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

已弃用的“属性”窗格。

参考文献：

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

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

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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