开发者工具的新变化 (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

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

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

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

移至底部

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

移至顶部

Chromium 问题：1075732

元素面板更新

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

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

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

计算结果边栏窗格

Chromium 问题：1073899

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

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

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

在元素面板上，选择一个元素。切换分组复选框，以对 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，供网站开发者用来 指定浏览器要向其发送警告和错误的服务器端点。

向端点报告

阅读这篇文章，详细了解如何启用 COEP 和 COOP 以及如何让您的网站 “cross-origin standalone”。

Chromium 问题：1051466

显示 COEP 和 COOP report-only 模式

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

仅用于报告的标签

观看此视频，了解如何防止信息泄露，以及如何在 Google Cloud 中 。

Chromium 问题：1051466

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

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

主面板中的设置

Chromium 问题：1121312

实验功能

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

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

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

色彩对比度低问题

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

Chromium 问题：1120316

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

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

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

自定义键盘快捷键

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

Chromium 问题：174309

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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