此页面由 Cloud Translation API 翻译。

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

Sofia Emelianova

录音机扩展程序官方系列现已推出

官方系列的导出和重放Recorder扩展程序现已上线。

若要直接从 Recorder 打开集合，请在 Recorder 面板顶部的操作栏中依次选择下载 Export > Get extensions...。

网络改进

此版本对网络面板进行了多项改进。

“状态”列中显示的失败原因

现在，状态列会始终显示失败原因。以前，您必须开启check_boxBig request rows（大请求行）复选框，或选择表格中的相应请求。

在状态列显示失败原因之前和之后。

Chromium 问题：1506760。

改进了“复制”子菜单

请求的复制子菜单现在更有条理。

改进“复制”子菜单前后的对比图。

此外，复制为 c网址 选项现在会将正确的命令复制到 Windows 上的剪贴板。

Chromium 问题：1267033、1276452、798498。

提升了性能

此版本对性能面板进行了多项改进。

时间轴中的面包屑导航

现在，通过性能面板顶部的时间轴，您可以设置路径并在它们之间进行切换。

如需设置面包屑导航，请在 Timeline 上选择一个范围，将鼠标悬停在该范围上，然后点击 N 毫秒 zoom_in 按钮。您可以连续创建多个嵌套面包屑导航。如需在缩放级别之间切换，请点击链中的相应面包屑导航（位于时间轴顶部）。观看下一个视频，了解面包屑导航的实际运用。

Chromium 问题：1467739。

主轨道中的事件发起者

默认情况下，Performance > Main 轨道现在会显示箭头，用于连接发起者及其导致的以下事件。

样式或布局失效 -> 重新计算样式或布局
请求动画帧 -> 已触发动画帧
请求空闲回调 -> 触发空闲回调
安装计时器 -> 计时器已触发
创建 WebSocket -> 发送... 和接收 WebSocket 握手或销毁 WebSocket

如需查看箭头，请在跟踪记录中找到此类事件，然后点击它。以前，此功能处于实验阶段。

来自请求的箭头并触发空闲回调。

Chromium 问题：1434596。

在 Node.js 开发者工具的性能面板中，您现在可以从操作栏的相应下拉菜单中选择 JavaScript 虚拟机实例。即将弃用的 JavaScript 性能分析器中也提供了类似的功能。

添加新菜单之前和之后，该菜单可让您选择 JavaScript 虚拟机实例。

Chromium 问题：1511813。

改进了元素

此版本对元素面板进行了多项改进。

除了接下来的两个功能外，元素面板现在还会记住您打开的最后一个标签页，例如计算型或属性。

现在可以在“样式”中修改 `::view-transition` 伪元素

您现在可以使用检查器样式表修改 Styles 中的 ::view-transition CSS 伪元素。

修改前后的视图转换伪元素支持。

如需了解详情，请参阅使用 View Transitions API 实现平滑简单的转场。

Chromium 问题：1511233。

块容器的 `align-content` 属性支持

align-content 属性现在可与任何块容器（包括 table-caption 和 table-cell）搭配使用。以前，它仅适用于 grid 和 flex。

块容器中的 before 和 after Align-content 支持。

Chromium 问题：1500511。

来源中的新快捷方式和命令

现在，您可以按 Cmd (Mac) / Cmd (Win) + Cmd + 点击来源中的行号，以创建日志点。此快捷键是对现有 Cmd (Mac) / Ctrl (Win) + 点击条件断点的补充。

命令菜单新增了在导航器边栏中显示活动文件命令，该命令与编辑器下拉菜单中的相应选项相同。

用于在导航器边栏中显示活动文件的新命令。

Chromium 问题：1486933、1467464。

对模拟可折叠设备的折叠状态支持

设备模式现在可让您设置模拟可折叠设备的折叠状态：连续模式或折叠状态。连续折叠状态是指“平展”位置，折叠状态下，显示屏各部分之间会形成一个角度。

包含折叠状态选项的下拉菜单。

此外，Devices（设备）列表中还添加了一款新的模拟可折叠设备：华硕 Zenbook Fold。

Chromium 问题：1066842。

动态主题

开发者工具现在会自动匹配 Chrome 的颜色主题。如需设置主题，请按以下步骤操作：

打开新标签页，然后点击右下角的修改 自定义 Chrome。
在“外观”中，通过壁纸选择一个主题。更改主题或选择调色板。

开发者工具会与“外观”中选择的颜色主题匹配。

Chromium 问题：1483276。

“网络和应用”面板中的第三方 Cookie 逐步淘汰警告

现在，广告网络和应用面板都会突出显示并会在受跟踪保护政策影响的第三方限制的 Cookie 旁边显示警告。

在网络中，找到带有警告警告图标的请求，点击该请求，然后打开 Cookie 标签页。

在“网络”面板中捕获第三方 Cookie 前后的对比图。

在应用中，依次转到存储 > Cookie，然后点击一个网域。以黄色突出显示的 Cookie 不会存储在浏览器中。

在“应用”面板中突出显示第三方 Cookie 前后的对比图。

将鼠标悬停在警告图标上即可查看描述相关问题的提示，然后点击该图标即可打开问题标签页，其中包含更多信息。

此外，表格中的 Cookie 现在默认按名称进行排序。

Chromium 问题：1506225、1503961。

Lighthouse 11.4.0

Lighthouse 面板现在运行 Lighthouse 11.4.0。请参阅更改的完整列表。其中最显著的变化是新增了一项审核功能，让您可以检测自己的网站是否仍在使用第三方 Cookie。

用于检测第三方 Cookie 的审核。

要了解有关在开发者工具中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍功能

此版本有以下无障碍功能改进：

现在，当您打开设置设置 > 实验时，搜索框会自动聚焦。
网络 > 过滤条件中的取消 清除输入按钮现在可聚焦。
现在，来源 > 网页中的文件树可在高对比度模式下正确显示。
屏幕阅读器现在可以正确读出以下内容：
- 来源 > 断点中复选框的状态。
- 建议列表的位置和索引信息。
- 在设置设置 > 位置信息中添加或删除营业地点时产生的操作结果。
- 设置设置 > 忽略列表中的多组排除规则（常规或自定义）。

Chromium 问题：1504938、1499868、1512161、1515224、1515418、1516998、1517015。

其他亮点

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

动画：
- 修复了屏幕截图弹出式窗口渲染超出边界的 bug (1506991)。
- 修复了已移除的动画节点未标记为“已移除”的 bug (1506561)。
网络：
- 标头覆盖：修复了标头标签页中带有假紫色圆点图标 (1507856) 的 bug。
- 预览版：修复了不必要的双重解码 bug (1509336)。
- 修复了导致短请求未显示的 bug (1509862)。
Application > IndexedDB：重新排列了操作栏中的按钮，以便与其他面板保持一致 (1393800)。
传感器：修复了无法获取位置信息不正确成功回调的 bug (1486859)。
性能：
- 收集垃圾按钮现在具有相应的图标，即“拖地”，而非“垃圾桶”(1507530)。
- 现在，性能轨迹文件会在导航到 about:blank 时保留数据 (1509947)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。