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

Jecelyn Yeen

新的 CSS Flexbox 调试工具

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

CSS Flexbox 调试工具

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

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

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

“布局”窗格中的 Flexbox 部分

Chromium 问题：1166710、1175699

新的 Core Web Vitals 叠加层

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

Core Web Vitals 是 Google 推出的一项计划，旨在针对符合以下条件的质量信号提供统一指南： 是提供出色的网络用户体验的关键。

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

叠加层当前显示：

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”（信任令牌）窗格

现在，开发者工具可以在新的 Trust Application 面板下的 Tokens 窗格。

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

新的“信任令牌”窗格

Chromium 问题：1126824

模拟 CSS color-gamut 媒体功能

模拟 CSS color-gamut 媒体功能

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

打开命令菜单，运行 Show Rendering 命令，然后设置模拟 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 的来源的请求。

SameParty 列

Chromium 问题：1161427

已弃用非标准 fn.displayName 支持

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

displayName 的用法示例

一直以来，Chrome 都支持非标准 fn.displayName 属性，作为 开发者来控制 error.stack 和开发者工具堆栈中显示的函数的调试名称 跟踪记录。在上面的示例中，调用堆栈之前会显示 noLongerSupport。

将 fn.displayName 替换为标准 fn.name，后者已配置为可配置（通过 Object.defineProperty）替换非标准 fn.displayName 属性。

对 fn.displayName 的支持并不可靠，并且在各个浏览器引擎之间也不一致。它会减慢 向下堆栈轨迹收集，无论开发者是否真的使用 fn.displayName。

名称用法示例

Chromium 问题：1177685

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

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

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

Chromium 问题：1056922

实验功能

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

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

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

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

自动报告低对比度问题

Chromium 问题：1155460

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

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

当前的无障碍窗格只能显示部分节点，仅显示 将祖先链从根节点指向检查的节点。全新的无障碍树状视图旨在 来改进无障碍树，并让无障碍树更便于探索、更实用、更轻松 使用。

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

请注意，这只是一个早期实验。我们计划改进并扩展 。

完整无障碍树状视图

Chromium 问题：887173

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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