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

Google 用户调研。

新的 CSS flexbox 调试工具

开发者工具现在提供了专用的 CSS Flexbox 调试工具！

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

在样式窗格中，您可以点击 display: flex 或 display: inline-flex 旁边的新图标，打开 Flexbox 编辑器。Flexbox 编辑器提供了一种快速编辑 flexbox 属性的方式。亲自尝试一下吧！

此外，“布局”窗格还包含一个“Flexbox”部分，用于显示网页上的所有 flexbox 元素。您可以切换每个元素的叠加层。

Chromium 问题：1166710、1175699

新的核心网页指标叠加层

借助新的核心网页指标叠加层，更好地直观呈现和衡量网页性能。

核心网页指标是 Google 推出的一项计划，旨在就哪些质量信号对提供出色的网站用户体验至关重要提供统一指南。

打开命令菜单，运行 Show Rendering 命令，然后选中 Core Web Vitals 复选框。

叠加层目前显示：

• Largest Contentful Paint (LCP)：衡量加载性能。为了提供良好的用户体验，应在网页首次开始加载的 2.5 秒内完成 LCP。
• First Input Delay (FID)：衡量互动性。为了提供良好的用户体验，网页的 FID 应控制在 100 毫秒以内。
• Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的用户体验，网页的 CLS 应低于 0.1。

Chromium 问题：1152089

“问题”标签页更新

将问题数量移至控制台状态栏

现在，控制台状态栏中添加了一个新的问题数量按钮，以提高问题警告的醒目程度。这会替换控制台中的问题消息。

Chromium 问题：1140516

报告 Trusted Web Activity 问题

“问题”标签页现在会报告 Trusted Web Activity 问题。此功能旨在帮助开发者了解并修复其网站的可信 Web 活动问题，从而提高其应用的质量。

打开 Trusted Web Activity。然后，点击控制台状态栏中的问题数量按钮，打开问题标签页，查看问题。观看 Andre 的这段讲座，详细了解如何创建和部署 Trusted Web Activity。

Chromium 问题：1147479

在控制台中将字符串格式化为（有效）JavaScript 字符串字面量

现在，控制台会将字符串格式化为控制台中的有效 JavaScript 字符串字面量。之前，控制台在打印字符串时不会转义双引号。

Chromium 问题：1178530

“应用”面板中的新“Trust Tokens”窗格

开发者工具现在会在应用面板下的新信任令牌窗格中显示当前浏览上下文中所有可用的信任令牌。

Trust Token 是一种新的 API，可帮助打击欺诈行为并将机器人与真人区分开来，而无需进行被动跟踪。了解如何开始使用 Trust Token。

Chromium 问题：1126824

模拟 CSS color-gamut 媒体功能

借助 color-gamut 媒体查询，您可以测试浏览器和输出设备支持的大致颜色范围。例如，如果 color-gamut: p3 媒体查询匹配，则表示用户的设备支持 Display-P3 色彩空间。

打开命令菜单，运行 Show Rendering 命令，然后设置 Emulate CSS media feature color-gamut 下拉菜单。

Chromium 问题：1073887

改进了渐进式 Web 应用工具

开发者工具现在会在控制台中显示更详细的渐进式 Web 应用 (PWA) 可安装性警告消息，并提供指向文档的链接。

如果清单说明超过 324 个字符，清单窗格现在会显示警告消息。

此外，如果 PWA 的屏幕截图不符合要求，清单窗格现在会显示警告消息。如需详细了解 PWA 屏幕截图属性及其要求，请点击此处。

Chromium 问题：1146450、1169689、965802

“网络”面板中的新 Remote Address Space 列

使用“网络”面板中的新 Remote Address Space 列可查看每个网络资源的 IP 地址空间。

Chromium 问题：1128885

提升了性能

现在，在打开开发者工具的情况下，网页加载性能得到了提升。在某些极端情况下，我们看到性能提升了 10 倍。

开发者工具会收集堆栈轨迹，并将其附加到控制台消息或异步任务中，以便开发者在出现问题时使用。由于此收集过程必须在浏览器引擎中同步进行，因此缓慢的堆栈轨迹收集可能会在开发者工具打开的情况下显著减慢页面速度。我们已成功大幅减少堆栈轨迹收集的开销。

敬请关注我们即将发布的工程博文，其中将详细介绍实现过程。

Chromium 问题：1069425、1077657

在框架详情视图中显示允许/不允许使用的功能

框架详情视图现在会显示由 Permissions 政策控制的允许和禁止的浏览器功能列表。

权限政策是一种 Web 平台 API，可让网站能够允许或阻止在其自己的框架或其嵌入的 iframe 中使用浏览器功能。

Chromium 问题：1158827

“Cookie”窗格中的新 SameParty 列

“应用”面板中的“Cookie”窗格现在会显示 Cookie 的 SameParty 属性。SameParty 属性是一个新的布尔属性，用于指示是否应在向同一 First-Party Set 的来源发出的请求中包含 Cookie。

Chromium 问题：1161427

弃用了非标准的 fn.displayName 支持

对非标准 fn.displayName 的支持已弃用。请改用 fn.name。

Chrome 历来支持非标准 fn.displayName 属性，以便开发者控制在 error.stack 和开发者工具堆栈轨迹中显示的函数的调试名称。在上面的示例中，调用堆栈之前会显示 noLongerSupport。

将 fn.displayName 替换为标准 fn.name，该属性在 ECMAScript 2015 中通过 Object.defineProperty 变为可配置，以替换非标准 fn.displayName 属性。

对 fn.displayName 的支持一直不太可靠，并且在不同浏览器引擎之间并不一致。它会减慢堆栈轨迹收集速度，而无论开发者是否实际使用 fn.displayName，都需要支付此费用。

Chromium 问题：1177685

弃用“设置”菜单中的 Don't show Chrome Data Saver warning

由于 Chrome 流量节省程序已被弃用，因此移除了 Don't show Chrome Data Saver warning 设置。

Chromium 问题：1056922

实验功能

在“问题”标签页中自动报告低对比度问题

开发者工具新增了实验性支持，可在“问题”标签页中自动报告对比度问题。

低对比度文本是网页上最常见的可自动检测到的无障碍功能问题。在“问题”标签页中显示这些问题有助于开发者更轻松地发现这些问题。

打开存在低对比度问题的网页（例如此演示）。然后，点击控制台状态栏中的问题数量按钮，打开问题标签页，查看问题。

Chromium 问题：1155460

“元素”面板中的完整无障碍功能树状视图

您现在可以切换到经过改进的新版完整无障碍功能树视图，查看网页的无障碍功能树。

当前的无障碍功能窗格仅显示从根节点到检查节点的直接祖先链，因此其节点显示有限。新的无障碍功能树状视图旨在改进这一点，让开发者能够更轻松地探索和使用无障碍功能树，从而提高其实用性。

启用实验后，元素面板中会显示一个新按钮，点击该按钮可在现有 DOM 树和完整无障碍树之间切换。

请注意，这是一项早期实验。我们计划逐步改进和扩展此功能。

Chromium 问题：887173

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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