此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

新的 CSS 网格调试工具

开发者工具现在可以更好地支持 CSS 网格调试！

CSS 网格调试

当您网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid 时，您可以在 Elements 面板中看到该元素旁边有一个 grid 标记。点击该标志可切换页面上网格叠加层的显示状态。

新的 Layout 窗格有一个 Grid 部分，提供许多用于查看网格的选项。

请参阅文档了解详情。

Chromium 问题：1047356

新的 WebAuthn 标签页

您现在可以使用新的 WebAuthn 标签页模拟身份验证器并调试 Web Authentication API。

依次选择更多选项 > 更多工具 > WebAuthn，打开 WebAuthn 标签页。

WebAuthn 标签页

在新的 WebAuthn 标签页之前，Chrome 没有原生的 WebAuthn 调试支持。开发者需要实体身份验证器，以便使用 Web Authentication API 测试其 Web 应用。

借助新的 WebAuthn 标签页，网络开发者现在可以模拟这些身份验证器、自定义其功能并检查其状态，而无需使用任何物理身份验证器。这会大大简化调试体验。

如需详细了解 WebAuthn 功能，请参阅我们的文档。

Chromium 问题：1034663

在顶部和底部面板之间移动工具

开发者工具现在支持在顶部面板和底部面板之间移动开发者工具中的工具。这样，您就可以同时查看任意两个工具。

例如，如果您希望同时查看 Elements 和 Sources 面板，您可以右键点击 Sources 面板，然后选择 Move to bottom 将其移至底部。

移至底部

同样，您可以通过右键点击某个标签页并选择 Move to top，将任意底部标签页移至顶部。

移至顶部

Chromium 问题：1075732

元素面板更新

您现在可以在“样式”窗格中切换计算的边栏窗格。

默认情况下，Styles 窗格中的 Computed 边栏窗格处于收起状态。点击此按钮即可切换

计算结果边栏窗格

Chromium 问题：1073899

在“Computed”窗格中对 CSS 属性进行分组

您现在可以在 Computed 窗格中按类别对 CSS 属性进行分组。

借助这项新的分组功能，您可以更轻松地在 Computed 窗格中导航（滚动更少），并选择性地关注一组相关属性以进行 CSS 检查。

在元素面板上，选择一个元素。切换 Group 复选框可对 CSS 属性进行分组/取消分组。

对 CSS 属性进行分组

Chromium 问题：1096230、1084673、1106251

Lighthouse 面板中的 Lighthouse 6.4

Lighthouse 面板现已运行 Lighthouse 6.4。如需完整的更改列表，请参阅版本说明。

Lighthouse 6.4 中的新审核：

预加载字体。验证是否预加载使用 font-display: optional 的所有字体。
有效的源代码映射。审核网页是否包含适用于大型第一方 JavaScript 的有效源代码映射。
[实验性] 大型 JavaScript 库。大型 JavaScript 库可能会导致性能不佳。此项审核针对常见的大型 JavaScript 库（例如 moment.js）提供了更便宜的替代方案。

Chromium 问题：772558

“计时”部分中的 `performance.mark()` 事件

现在，性能记录的“计时”部分会标记 performance.mark() 事件。

Performance.mark 事件

“Network”面板中新增了 `resource-type` 和 `url` 过滤条件

在“网络”面板中使用新的 resource-type 和 url 关键字来过滤网络请求。

例如，使用 resource-type:image 可专注于作为图片的网络请求。

资源类型过滤条件

请查看按属性过滤请求，以发现更多特殊关键字，例如 resource-type 和 url。

Chromium 问题：1121141、1104188

帧详情视图更新

显示 COEP 和 COOP `reporting to` 端点

您现在可以在安全与隔离部分下查看跨源嵌入器政策 (COEP) 和跨源打开器政策 (COOP)reporting to 端点。

Reporting API 定义了一个新的 HTTP 标头 Report-To，它使 Web 开发者能够指定供浏览器向其发送警告和错误的服务器端点。

向端点报告

请阅读这篇文章，详细了解如何启用 COEP 和 COOP 并使您的网站“跨源隔离”。

Chromium 问题：1051466

显示 COEP 和 COOP `report-only` 模式

现在，开发者工具会针对设置为 report-only 模式的 COEP 和 COOP 显示 report-only 标签。

仅用于报告的标签

观看此视频，了解如何防止信息泄露，以及如何在您的网站上启用 COOP 和 COEP。

Chromium 问题：1051466

在“更多工具”菜单中弃用了 `Settings`

“更多工具”菜单中的 Settings 已弃用。请改为从主面板中打开 Settings。

主面板中的设置

Chromium 问题：1121312

实验功能

在“CSS 概览”面板中查看并修正色彩对比度问题

CSS Overview（CSS 概览）面板现在会显示您网页中色彩对比度较低的文字的列表。

在此示例中，演示页面存在色彩对比度较低的问题。点击问题，即可查看存在问题的元素的列表。

色彩对比度低问题

点击列表中的元素即可在 Elements 面板中打开相应元素。开发者工具提供自动颜色建议，可帮助您解决对比度较低的文本问题。

Chromium 问题：1120316

在开发者工具中自定义键盘快捷键

您现在可以在开发者工具中为常用命令自定义键盘快捷键。

依次前往设置 > 快捷键，将鼠标悬停在某个命令上，然后点击修改按钮（笔图标）以自定义键盘快捷键。

自定义键盘快捷键

要重置所有快捷方式，请点击恢复默认快捷方式。

Chromium 问题：174309

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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