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

Google 用户调研。

记录器扩展程序的官方合集已上线

官方的导出和重放记录器扩展程序集合现已发布。

如需直接从录制工具中打开集合，请在录制工具面板顶部的操作栏中依次选择下载 导出 > 获取扩展程序...。

网络改进

此版本对网络面板进行了一些改进。

“状态”列中的失败原因

状态列现在始终会显示失败原因。之前，您必须开启 check_box Big request rows 或在表格中选择相应请求。

Chromium 问题：1506760。

改进了“复制”子菜单

请求的复制子菜单现在已得到更好的整理。

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

Chromium 问题：1267033、1276452、798498。

提升了性能

此版本对性能面板进行了一些改进。

时间轴中的面包屑

现在，您可以在效果面板顶部的时间轴中设置面包屑，并在面包屑之间跳转。

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

Chromium 问题：1467739。

主轨道中的事件启动器

默认情况下，“效果”>“主”轨道现在会显示箭头，用于连接发起者及其引发的后续事件。

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

如需查看箭头，请在轨迹中找到此类事件，然后点击该事件。之前，此功能是一项实验。

Chromium 问题：1434596。

Node.js DevTools 的 JavaScript 虚拟机实例选择器菜单

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

Chromium 问题：1511813。

Elements 改进

此版本对元素面板进行了一些改进。

除了以下两项功能之外，元素面板现在还会记住您上次打开的标签页，例如计算或属性。

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

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

如需了解详情，请参阅使用 View Transitions API 实现流畅简单的过渡效果。

Chromium 问题：1511233。

块容器的 align-content 属性支持

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

Chromium 问题：1500511。

“来源”中的新快捷键和命令

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

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

Chromium 问题：1486933、1467464。

为模拟的可折叠设备提供姿势支持

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

此外，设备列表新增了一个模拟的可折叠设备：Asus Zenbook Fold。

Chromium 问题：1066842。

动态主题

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

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

Chromium 问题：1483276。

“网络”和“应用”面板中的第三方 Cookie 弃用警告

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

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

在 Application 中，依次前往 Storage > Cookies，然后点击一个网域。以黄色突出显示的 Cookie 未存储在浏览器中。

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

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

Chromium 问题：1506225、1503961。

Lighthouse 11.4.0

Lighthouse 面板现在运行的是 Lighthouse 11.4.0。请参阅完整的变更列表。其中一项值得注意的更改是新增了一项审核，可让您检测网站是否仍在继续使用第三方 Cookie。

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

Chromium 问题：772558。

无障碍

此版本在无障碍功能方面做出了以下改进：

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

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

其他亮点

此版本包含以下值得注意的修复和改进：

• 动画：
  • 修复了屏幕截图弹出框渲染超出边界的 bug (1506991)。
  • 修复了以下 bug：已移除的动画节点未标记为已移除 (1506561)。
• 网络：
  • 标头替换：修复了标头标签页中出现错误紫色圆点图标的 bug (1507856)。
  • 预览版：修复了不必要的双重解码 bug (1509336)。
  • 修复了导致短请求未显示的问题 (1509862)。
• 应用 > IndexedDB：重新排列了操作栏中的按钮，以与其他面板保持一致 (1393800)。
• 传感器：修复了位置信息不可用时回调成功不正确的 bug (1486859)。
• 效果：
  • 回收垃圾按钮现在具有适当的图标，即“拖把”而不是“垃圾桶”(1507530)。
  • 性能跟踪现在会在导航到 about:blank 时保留数据 (1509947)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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