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

Google 用户调研。

全新的 CSS 网格调试工具

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

如果网页上的某个 HTML 元素应用了 display: grid 或 display: inline-grid，您可以在“元素”面板中看到该元素旁边的 grid 徽章。点击该标记可在页面上切换网格叠加层的显示状态。

新的布局窗格包含一个网格部分，其中提供了许多用于查看网格的选项。

如需了解详情，请参阅此文档。

Chromium 问题：1047356

新的 WebAuthn 标签页

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

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

在推出新的 WebAuthn 标签页之前，Chrome 上没有原生 WebAuthn 调试支持。 开发者需要使用实体身份验证器来测试其 Web 应用与 Web Authentication API 的搭配使用情况。

借助新的 WebAuthn 标签页，Web 开发者现在可以模拟这些身份验证器、自定义其功能并检查其状态，而无需任何实体身份验证器。这会使调试体验更加轻松。

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

Chromium 问题：1034663

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

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

例如，如果您想同时查看元素和来源面板，可以右键点击来源面板，然后选择移到底部，将其移到底部。

同样，您也可以通过右键点击某个底部标签页，然后选择移至顶部，将任何底部标签页移至顶部。

Chromium 问题：1075732

“元素”面板更新

在“样式”窗格中查看“计算”边栏窗格

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

样式窗格中的计算样式边栏窗格默认处于收起状态。点击相应按钮即可切换。

Chromium 问题：1073899

在“计算出的样式属性”窗格中对 CSS 属性进行分组

您现在可以在计算出的样式属性窗格中按类别对 CSS 属性进行分组。

借助这项新的分组功能，您可以更轻松地在计算出的样式属性窗格中浏览（减少滚动次数），并有选择地专注于一组相关属性以进行 CSS 检查。

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

Chromium 问题：1096230、1084673、1106251

Lighthouse 面板中的 Lighthouse 6.4

Lighthouse 面板现在运行的是 Lighthouse 6.4。如需查看完整的变更列表，请参阅版本说明。

Lighthouse 6.4 中的新审核：

• 预加载字体。验证是否预加载了所有使用 font-display: optional 的字体。
• 有效的源代码映射。审核页面是否包含大型第一方 JavaScript 的有效源代码映射。
• [实验性] 大型 JavaScript 库。大型 JavaScript 库可能会导致性能不佳。此审核会建议使用比 moment.js 等常见的大型 JavaScript 库更经济实惠的替代方案。

Chromium 问题：772558

“时间”部分中的 performance.mark() 个事件

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

“网络”面板中的新 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 已弃用。改为从主面板打开设置。

Chromium 问题：1121312

实验功能

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

CSS 概览面板现在会显示网页上低色彩对比度文本的列表。

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

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

Chromium 问题：1120316

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

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

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

如需重置所有快捷键，请点击恢复默认快捷键。

Chromium 问题：174309

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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