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

新的 CSS 网格调试工具

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

CSS 网格调试

当您页面上的某个 HTML 元素应用了 display: griddisplay: inline-grid 后,在 Element 面板中,您会在该元素旁边看到 grid 标志。点击该标志可切换页面上网格叠加层的显示。

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

如需了解详情,请参阅文档

Chromium 问题:1047356

新的 WebAuthn 标签页

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

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

WebAuthn 标签页

在新的 WebAuthn 标签页推出之前,Chrome 未提供原生 WebAuthn 调试支持。 开发者需要使用物理身份验证器来使用 Web Authentication API 测试其 Web 应用。

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

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

Chromium 问题:1034663

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

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

例如,如果您想同时查看 ElementsSources 面板,可以右键点击 Sources 面板,然后选择 Move to bottom 以将其移至底部。

移至底部

同样,您可以通过右键点击某个标签页,然后选择 Move to top 来将任何底部标签页移到顶部。

移至顶部

Chromium 问题:1075732

元素面板更新

在“Styles”窗格中查看“Computed”边栏窗格

现在,您可以在“Styles”窗格中切换“Computed”边栏窗格。

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

“计算出的”边栏窗格

Chromium 问题:1073899

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

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

借助这项新的分组功能,您可以更轻松地在 Computed 窗格(滚动更少)中导航,并有选择地关注用于 CSS 检查的一组相关属性。

元素面板上,选择一个元素。切换分组复选框以将 CSS 属性分组/取消分组。

将 CSS 属性分组

Chromium 问题:109623010846731106251

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() 事件。

Performance.mark 事件

“网络”面板中新增了 resource-typeurl 过滤条件

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

例如,使用 resource-type:image 聚焦于图片形式的网络请求。

资源类型过滤条件

如需发现更多特殊关键字,例如 resource-typeurl,请查看按资源过滤请求

Chromium 问题:11211411104188

帧详情视图更新

显示 COEP 和 COOP reporting to 端点

您现在可以在安全和隔离部分下查看跨域嵌入器政策 (COEP) 和跨域 Opener 政策 (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 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

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

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。

开发者工具的新变化

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 浏览器 112

Chrome 111

Chrome 浏览器 110

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 入门指南

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 已取消

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59