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

官方的录音机扩展程序集合现已发布

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

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

网络改进

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

“状态”列中的失败原因

状态列现在始终会显示失败原因。以前，您必须开启check_box “大请求行”，或在表格中选择相应请求。

Chromium 问题：1506760。

改进了“复制”子菜单

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

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

Chromium 问题：1267033、1276452、798498。

提升了性能

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

时间轴中的面包屑导航

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

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

Chromium 问题：1467739。

主轨道中的事件发起者

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

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

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

Chromium 问题：1434596。

Node.js 开发者工具的 JavaScript 虚拟机实例选择器菜单

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

Chromium 问题：1511813。

元素改进

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

除了下面介绍的两个地图项外，元素面板现在还会记住您上次打开的标签页，例如已计算的或属性。

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

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

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

Chromium 问题：1511233。

对广告连播容器的 align-content 属性支持

align-content 属性现在适用于任何块容器，包括 table-caption 和 table-cell。以前，它只能与 grid 和 flex 配合使用。

Chromium 问题：1500511。

在“来源”中新增了快捷方式和命令

现在，您可以按 Cmd (Mac) / Ctrl (Win) + Shift 并点击来源中的行号，以创建一个日志点。除了现有的 Cmd (Mac) / Ctrl (Win) + 点击即可设置条件断点之外，我们还新增了此快捷键。

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

Chromium 问题：1486933、1467464。

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

现在，您可以使用设备模式设置模拟的可折叠设备的折叠状态：连续或折叠。连续折叠状态是指“展开”状态，折叠状态则是指显示屏各部分之间形成角度。

此外，设备列表中新增了模拟的可折叠设备：华硕 Zenbook Fold。

Chromium 问题：1066842。

动态主题

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

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

Chromium 问题：1483276。

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

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

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

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

将鼠标悬停在警告图标上，即可查看说明问题的提示；点击该图标，即可打开问题标签页，了解更多信息。

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

Chromium 问题：1506225、1503961。

Lighthouse 11.4.0

Lighthouse 面板现在运行的是 Lighthouse 11.4.0。请参阅完整的变更列表。值得注意的变化之一是，我们推出了新的审核功能，可让您检测自己的网站是否仍在使用第三方 Cookie。

如需了解如何在 DevTools 中使用 Lighthouse 面板的基础知识，请参阅 Lighthouse：优化网站速度。

Chromium 问题：772558。

无障碍

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

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

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

其他亮点

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

• 动画：
  • 修复了屏幕截图弹出式窗口超出边界呈现的 bug (1506991)。
  • 修复了已移除的动画节点未标记为“已移除”的 bug (1506561)。
• 网络：
  • 标头替换项：修复了标头标签页中显示虚假紫色圆点图标的 bug (1507856)。
  • 预览版：修复了存在不必要的双重解码的 bug (1509336)。
  • 修复了导致简短请求不显示的 bug (1509862)。
• 应用 > IndexedDB：重新排列了操作栏中的按钮，以便与其他面板保持一致 (1393800)。
• 传感器：修复了无法获取位置信息、回调成功的 bug (1486859)。
• 效果：
  • 清理垃圾按钮现在使用了适当的图标“拖把”，而不是“垃圾桶”图标 (1507530)。
  • 性能轨迹现在会在导航到 about:blank 时保留数据 (1509947)。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

• 请访问 crbug.com 向我们提交反馈和功能请求。
• 在 DevTools 中，依次选择 more_vert More options > Help > Report a DevTools issue 以报告 DevTools 问题。
• 向 @ChromeDevTools 发送推文。
• 在 “开发者工具的新变化”YouTube 视频或 “开发者工具提示”YouTube 视频中留言。

开发者工具的新变化

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