此页面由 Cloud Translation API 翻译。

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

Jecelyn Yeen

新的 CSS Flexbox 调试工具

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

CSS Flexbox 调试工具

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

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

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

“布局”窗格中的 Flexbox 部分

Chromium 问题：1166710、1175699

新的 Core Web Vitals 叠加层

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

Core Web Vitals 是 Google 推出的一项计划，旨在针对对提供出色的网页用户体验至关重要的质量信号提供统一指南。

打开命令菜单，运行显示呈现命令，然后选中核心 Web 指标复选框。

叠加层当前显示：

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

Core Web Vitals 叠加层

Chromium 问题：1152089

“问题”标签页更新

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

控制台状态栏中现在添加了新的问题计数按钮，以提高问题警告的可见性。此操作将替换控制台中的问题消息。

控制台状态栏中的问题计数

Chromium 问题：1140516

报告 Trusted Web Activity 问题

“问题”标签页现在会报告 Trusted Web Activity 问题。这有助于开发者了解并解决其网站的 Trusted Web Activity 问题，从而提高应用的质量。

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

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

Chromium 问题：1147479

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

现在，控制台会在控制台中将字符串的格式设置为有效的 JavaScript 字符串字面量。以前，控制台在输出字符串时不会转义双引号。

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

Chromium 问题：1178530

“Application”（应用）面板中的“New Trust Tokens”（信任令牌）窗格

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

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

新的“信任令牌”窗格

Chromium 问题：1126824

模拟 CSS color-gamut 媒体功能

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

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

Chromium 问题：1073887

改进的渐进式 Web 应用工具

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

PWA 可安装性警告

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

PWA 说明截断警告

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

PWA 屏幕截图警告

Chromium 问题：1146450、1169689、965802

在“网络”面板中新建 `Remote Address Space` 列

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

新增“远程地址空间”列

Chromium 问题：1128885

提升了性能

现已改进在开发者工具打开时的页面加载性能。在一些极端情况下，我们的性能提升到原来的 10 倍。

开发者工具会收集堆栈轨迹并将其附加到控制台消息或异步任务中，供开发者日后在出现问题时使用。由于此收集必须在浏览器引擎中同步发生，因此如果堆栈轨迹收集速度缓慢，可能会大大降低开发者工具打开时的网页速度。我们已设法大幅降低了收集堆栈轨迹的开销。

请继续关注更详细的工程博文，了解具体的实现方法。

Chromium 问题：1069425、1077657

在“框架详情”视图中显示允许/禁止的功能

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

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

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

Chromium 问题：1158827

在“Cookies”窗格中新增 `SameParty` 列

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

SameParty 列

Chromium 问题：1161427

已弃用非标准 `fn.displayName` 支持

不再支持非标准 fn.displayName。请改用 fn.name。

displayName 的用法示例

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 设置已被移除。

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

Chromium 问题：1056922

实验功能

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

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

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

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

自动报告低对比度问题

Chromium 问题：1155460

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

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

当前的无障碍窗格可对其节点进行有限显示，仅显示从根节点到检查节点的直接祖先链。新的无障碍功能树状视图旨在改进这一点，让无障碍功能树更易于探索、更实用且更易于开发者使用。

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

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

完整无障碍树状视图

Chromium 问题：887173

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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