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

Jecelyn Yeen

新的 CSS flexbox 调试工具

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

CSS Flexbox 调试工具

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

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

此外，布局窗格中有一个 Flexbox 部分，用于显示页面上的所有 Flexbox 元素。您可以切换每个元素的叠加层。

“布局”窗格中的“Flexbox”部分

Chromium 问题：1166710、1175699

新的 Core Web Vitals 叠加层

借助新的 Core Web Vitals 叠加层，更好地直观呈现和衡量网页性能。

核心网页指标是 Google 推出的一项计划，旨在针对出色网站用户体验不可或缺的质量信号提供统一指南。

打开命令菜单，运行显示渲染命令，然后选中核心网页指标复选框。

叠加层目前显示：

核心网页指标叠加层

Chromium 问题：1152089

“问题”标签页更新

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

现在，控制台状态栏中新增了一个问题数按钮，以提高问题警告的可见度。这将替换 Play 管理中心中的问题消息。

控制台状态栏中的问题数

Chromium 问题：1140516

报告 Trusted Web Activity 问题

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

打开一个 Trusted Web Activity。然后，点击 Console 状态栏中的 Issues count 按钮打开 Issues 标签页，查看问题。观看 Andre 的此演讲，详细了解如何创建和部署 Trusted Web Activity。

“问题”标签页中的 Trusted Web Activity 问题

Chromium 问题：1147479

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

现在，Play 管理中心会在 Play 管理中心内将字符串格式化为有效的 JavaScript 字符串字面量。以前，控制台在输出字符串时不会对双引号进行转义。

将字符串格式化为（有效的）JavaScript 字符串字面量

Chromium 问题：1178530

“应用”面板中新增了“信任令牌”窗格

现在，DevTools 会在新的信任令牌窗格（位于应用面板下）中显示当前浏览上下文中的所有可用信任令牌。

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

“新建信任令牌”窗格

Chromium 问题：1126824

模拟 CSS color-gamut 媒体功能

模拟 CSS color-gamut 媒体功能

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

打开命令菜单，运行显示渲染命令，然后设置模拟 CSS 媒体功能 color-gamut 下拉菜单。

Chromium 问题：1073887

改进了渐进式 Web 应用工具

现在，DevTools 会在 Console 中显示更详细的渐进式 Web 应用 (PWA) 可安装性警告消息，并附上指向文档的链接。

PWA 可安装性警告

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

PWA 说明截断警告

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

PWA 屏幕截图警告

Chromium 问题：1146450、1169689、965802

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

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

新增了“Remote Address Space”（远程地址空间）列

Chromium 问题：1128885

提升了性能

现在，在打开开发者工具的情况下，页面加载性能得到了提升。在某些极端情况下，性能提升幅度达到了 10 倍。

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

敬请关注我们将发布的工程博文，详细了解相关实现。

Chromium 问题：1069425、1077657

在帧详情视图中显示允许/不允许的功能

帧详情视图现在会显示由“权限”政策控制的允许和禁止的浏览器功能列表。

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

根据权限政策允许/禁止的功能

Chromium 问题：1158827

“Cookie”窗格中新增了 SameParty 列

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

“SameParty”列

Chromium 问题：1161427

废弃了非标准 fn.displayName 支持

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

displayName 的用法示例

传统上，Chrome 支持非标准 fn.displayName 属性，以便开发者控制在 error.stack 和 DevTools 堆栈轨迹中显示的函数的调试名称。在上面的示例中，调用堆栈之前显示的是 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 设置。

废弃了“不显示 Chrome 流量节省程序警告”设置

Chromium 问题：1056922

实验功能

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

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

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

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

自动报告低对比度问题

Chromium 问题：1155460

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

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

当前的无障碍功能窗格仅会显示其节点的部分内容，只会显示从根节点到被检查节点的直接祖先链。新的无障碍功能树状视图旨在改进这一点，使无障碍功能树更易于探索、更实用，并让开发者更轻松地使用。

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

请注意，这项功能目前处于实验阶段。我们计划逐步改进和扩展此功能。

完整的无障碍功能树视图

Chromium 问题：887173

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。