开发者工具中的新功能 (Chrome 98)

Jecelyn Yeen

预览版功能：整页无障碍功能树

借助新的整页无障碍功能树，您可以更轻松地大致了解整页无障碍功能树，并更好地了解您的网站内容如何向辅助技术展示。

在元素面板中，打开无障碍窗格，然后选中启用整页模式的无障碍功能树复选框。然后，重新加载 DevTools，您会在 Elements 面板中看到一个新的无障碍功能按钮。

您可以点击该图标切换到整页无障碍功能树视图。您可以展开节点，也可以点击无障碍窗格中的相应内容查看详细信息。

选择一个节点，然后切换回 DOM 树状视图。现在，系统会选择相应的 DOM 节点。这非常有助于了解 DOM 节点与其无障碍树节点之间的映射。这同样适用于 DOM 树 ⬌ 无障碍树视图！

以前，无障碍树位于无障碍窗格中。该视图功能有限，您只能探索单个节点及其祖先节点。

我们的团队仍在积极完善此预览版功能。我们期待收到您的反馈，以便进一步改进！

整页无障碍功能树

Chromium 问题：887173

“更改”标签页中更精确的更改

更改标签页中的代码更改会自动以美化格式显示。

以前，由于所有代码都显示在一行中，因此很难跟踪缩减后的源代码的实际更改。

“更改”标签页

Chromium 问题：1238818、1268754、1086491

为用户体验历程记录设置更长的超时时间

现在，您可以在录制器中为所有步骤或特定步骤调整超时设置。这对于网络请求缓慢且动画时长较长的网页尤其有用。

例如，我在此演示页面上录制了用户流程，以加载并点击菜单项。但是，菜单项的加载速度很慢（需要 6 秒）。此用户体验流程的重放失败，因为其超出了 5 秒（默认超时时间）。

我们可以使用新的超时设置来解决此问题。展开我们点击菜单项的步骤。通过添加超时修改步骤，并将其设置为 6000 毫秒（等于 6 秒）。

（可选）您可以在重玩设置中调整所有步骤的超时。展开重放设置，然后修改超时值。

用户体验历程记录的超时设置

Chromium 问题：1257499

使用“往返缓存”标签页确保您的网页可缓存

往返缓存 (bfcache) 是一种浏览器优化，可实现即时返回和前进导航。

新的返回/前进缓存标签页可帮助您测试网页，确保网页已针对 bfcache 进行优化，并找出可能导致其不符合资格条件的任何问题。

如需测试特定网页，请在 Chrome 中前往该网页，然后在开发者工具中依次前往应用 > 往返缓存。接下来，点击测试返回/前进缓存按钮，开发者工具会尝试离开网页再返回，从而确定该网页能否从 bfcache 恢复。

作为 Web 开发者，您必须了解如何针对所有浏览器优化网页的 bfcache，因为这可以显著提升用户（尤其是网络或设备速度较慢的用户）的浏览体验。

“往返缓存”标签页

Chromium 问题：1110752

新增了“房源”窗格过滤条件

如果您想在属性窗格中重点关注某个属性，现在可以在新的过滤条件文本框中输入该属性名称或值。

默认情况下，系统不会显示值为 null 或 undefined 的媒体资源。启用全部显示复选框即可查看所有媒体资源。

借助这些增强功能，您可以更快地找到自己关注的房源，从而提高工作效率！

属性窗格过滤器

Chromium 问题：1269674

模拟 CSS forced-colors 媒体功能

forced-colors CSS 媒体功能用于检测用户代理是否已启用强制色彩模式（例如 Windows 高对比度模式），在该模式下，系统会在网页上强制使用用户选择的有限调色板。

打开命令菜单，运行显示渲染命令，然后设置 Emulate CSS media feature forced-colors 下拉菜单。

CSS forced-colors 媒体功能

Chromium 问题：1130859

“在鼠标指针悬停时显示标尺”命令

现在，您可以打开命令菜单，然后运行悬停时显示标尺命令。借助页面标尺，您可以更轻松地测量元素的宽度和高度。

以前，您只能通过设置 > 显示标尺复选框启用页面标尺。

“在鼠标指针悬停时显示标尺”命令

Chromium 问题：1270562

在 Flexbox 编辑器中支持 row-reverse 和 column-reverse

Flexbox 编辑器添加了两个新按钮，以支持 flex-direction 中的 row-reverse 和 column-reverse。

Flexbox 编辑器

Chromium 问题：1263866

新增了用于重放 XHR 和展开所有搜索结果的键盘快捷键

用于在“网络”面板中重放 XHR 的键盘快捷键

在 Network 面板中选择一个 XHR 请求，然后按键盘上的 R 键以重放 XHR。以前，您只能通过上下文菜单（右键点击 > Replay XHR）重放 XHR

重放 XHR

Chromium 问题：1050021

用于展开所有搜索结果的键盘快捷键

搜索标签页中新增了一个快捷方式，可让您展开和收起所有搜索结果。以前，您只能一次点击一个文件来展开和收起搜索结果。

依次按 Esc > 三点状菜单 > 搜索，打开搜索标签页。输入搜索字符串（例如函数），然后按 Enter 键查看搜索结果列表。将焦点放在搜索结果上，然后使用以下快捷键展开/收起搜索文件：

  • Windows / Linux - Ctrl + Shift + { 或 }
  • MacOS - Cmd + Options + { 或 }

如需查看 Chrome DevTools 中的键盘快捷键，请参阅键盘快捷键。

Chromium 问题：1255073

Lighthouse 面板中的 Lighthouse 9

Lighthouse 面板现在运行的是 Lighthouse 9。Lighthouse 现在会列出共享相同 ID 的所有元素。

非唯一元素 ID 是无障碍功能方面的常见问题。例如，aria-labelledby 属性中引用的 ID 会用于多个元素。

如需详细了解这些更新，请参阅 Lighthouse 9.0 中的新功能。

​Lighthouse 对“所有可聚焦的元素都必须具有唯一的 `id`”进行审核，显示两个元素，这两个元素具有相同的 `id`

Chromium 问题：772558

改进了“来源”面板

我们将来源面板升级为使用 CodeMirror 6，从而大幅提升了其稳定性。以下是一些值得注意的改进：

  • 打开大型文件（例如 WASM、JavaScript）的速度显著提高
  • 在浏览代码时，不再发生随机滚动
  • 改进了可修改来源（例如代码段、本地替换项）的自动补全建议

Chromium 问题：1241848

其他亮点

以下是此版本中的一些值得注意的修复：

  • 正确显示网络请求的瀑布图。之前，该样式已损坏。(1275501)
  • 在 Sources 面板中搜索包含非常长行数的文档时，代码突出显示会中断。此问题现已解决。(1275496)
  • 网络请求中不再有重复的载荷标签页。(1273972)
  • 修复了效果面板的摘要部分中缺少布局偏移详细信息的问题。(1259606)
  • 在广告网络搜索查询中支持任意字符（例如 ,、.）。(1267196)

[实验性]“Reporting API”窗格中的端点

Chrome 96 中引入了实验性 Reporting API 窗格，可帮助您监控网页上生成的报告及其状态。

端点部分现已推出。您可以通过该文件大致了解 Reporting-Endpoints 标头中配置的所有端点。

了解如何使用 Reporting API 监控安全违规行为、已废弃的 API 调用等。

Reporting API 窗格

Chromium 问题：1200732

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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