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

Google 用户调研。

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

借助新的全页无障碍树，您可以更轻松地概览全页无障碍树，并更好地了解辅助技术如何呈现您的网页内容。

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

您可以点击它来切换到整页模式的无障碍功能树视图。您可以展开节点或点击以在无障碍功能窗格中查看详细信息。

选择一个节点，然后切换回 DOM 树状视图。现在，系统会选择相应的 DOM 节点。这是了解 DOM 节点与其无障碍树节点之间映射关系的好方法。此功能也适用于 DOM 树 ⬌ 无障碍功能树视图！

以前，无障碍功能树位于无障碍功能窗格中。此视图受限，仅允许您探索单个节点及其祖先。

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

Chromium 问题：887173

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

更改标签页中的代码更改会自动进行美化打印。

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

Chromium 问题：1238818、1268754、1086491

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

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

例如，我在此演示页面上录制了一个用户流，用于加载并点击菜单项。不过，菜单项的加载速度较慢（需要 6 秒）。此用户流程的重放失败，因为其时长超过了 5 秒（默认超时时间）。

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

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

Chromium 问题：1257499

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

往返缓存（或 bfcache）是一种浏览器优化，可实现即时后退和前进导航。

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

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

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

Chromium 问题：1110752

新的“属性”窗格过滤条件

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

默认情况下，系统不会显示值为 null 或 undefined 的属性。选中全部显示复选框即可查看所有属性。

这些改进可让您更快地找到自己关心的房源，从而提高工作效率！

Chromium 问题：1269674

模拟 CSS forced-colors 媒体功能

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

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

Chromium 问题：1130859

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

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

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

Chromium 问题：1270562

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

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

Chromium 问题：1263866

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

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

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

Chromium 问题：1050021

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

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

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

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

前往键盘快捷键，了解 Chrome 开发者工具中的键盘快捷键。

Chromium 问题：1255073

Lighthouse 面板中的 Lighthouse 9

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

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

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

​

Chromium 问题：772558

改进了“来源”面板

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

• 打开大型文件（例如 WASM、JavaScript）时速度显著提高
• 在单步调试代码时，不会再出现随机滚动
• 改进了可修改来源（例如摘要、本地替换）的自动补全建议

Chromium 问题：1241848

其他亮点

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

• 正确显示网络请求的瀑布图。之前，样式存在问题。(1275501)
• 在来源面板中搜索包含很长行的文档时，代码突出显示功能无法正常运行。此问题现已修复。(1275496)
• 网络请求中不再有重复的 Payload 标签页。(1273972)
• 修复了效果面板的摘要部分中缺少布局偏移详细信息的问题。(1259606)
• 支持在网络搜索查询中使用任意字符（例如 ,、.）。(1267196)

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

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

端点部分现已可用。它可让您大致了解 Reporting-Endpoints 标头中配置的所有端点。

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

Chromium 问题：1200732

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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