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

Jecelyn Yeen

预览功能：整页无障碍树

新的整页无障碍功能树可让您更轻松地大致了解整页的无障碍功能树，并有助于您更好地了解您的网页内容如何呈现给辅助技术。

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

点击此图标即可切换到整页无障碍树视图。您可以在无障碍窗格中展开节点或点击以查看详细信息。

选择一个节点，然后切换回 DOM 树状视图。现在，对应的 DOM 节点处于选中状态。这是了解 DOM 节点与其无障碍树节点之间的映射的好方法。这也适用于 DOM 树 ⬌ 无障碍树状视图！

以前，无障碍树位于无障碍窗格中。视图是有限的，它只支持您探索单个节点及其祖先实体。

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

整页无障碍树

Chromium 问题：887173

在“更改”标签页中更精确地进行更改

Changes 标签页中的代码更改会自动以整版形式打印。

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

“更改”标签页

Chromium 问题：1238818、1268754、1086491

为用户流录制设置更长的超时时间

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

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

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

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

用户流录制超时设置

Chromium 问题：1257499

确保您的网页可通过“往返缓存”标签页进行缓存

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

新的往返缓存标签页可帮助您测试网页，以确保它们已针对 bfcache 进行优化，并找出可能阻止网页资格的任何问题。

要测试特定页面，请在 Chrome 中导航至该页面，然后在 DevTools 中转到 Application >往返缓存。接下来，点击 Test back/forward cache 按钮，开发者工具将尝试在导航之外再返回，以确定是否可以从 bfcache 恢复该网页。

作为网络开发者，了解如何在所有浏览器中针对 bfcache 优化网页至关重要，因为这将显著改善用户的浏览体验，尤其是网络或设备速度较慢的用户。

往返缓存标签页

Chromium 问题：1110752

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

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

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

借助这些增强功能，您可以更快地访问自己关注的媒体资源，从而提升工作效率！

属性窗格过滤条件

Chromium 问题：1269674

模拟 CSS forced-colors 媒体功能

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

打开命令菜单，运行 Show Rendering 命令，然后设置 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 和展开所有搜索结果

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

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

重放 XHR

Chromium 问题：1050021

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

系统会在搜索标签页中添加新的快捷方式，以便您展开和收起所有搜索结果。以前，您一次只能点击一个文件来展开和收起搜索结果。

通过 Esc 打开搜索标签页 >三点状菜单 >Search。输入搜索字符串（例如函数），然后按 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 的新变化。

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

Chromium 问题：772558

改进的“Sources”面板

在我们将其升级为使用 CodeMirror 6 后，Sources 面板中的稳定性有所提升。以下是一些值得注意的改进：

  • 打开大型文件（例如 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 版用作您的默认开发浏览器。通过这些预览渠道，您可以访问最新的开发者工具功能，测试先进的网络平台 API，并在用户之前发现您网站上的问题！

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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