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

Sofia Emelianova
Sofia Emelianova

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

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

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

网络改进

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

“状态”列中的失败原因

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

“状态”列中显示失败原因之前和之后。

Chromium 问题：1506760。

改进了“复制”子菜单

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

改进“复制”子菜单前后。

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

Chromium 问题：1267033、1276452、798498。

提升了性能

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

时间轴中的面包屑导航

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

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

Chromium 问题：1467739。

主要轨道中的事件发起者

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

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

如需查看箭头，请在轨迹中找到此类事件并点击它。此功能之前处于实验阶段。

从请求到触发空闲回调的箭头。

Chromium 问题：1434596。

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

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

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

Chromium 问题：1511813。

元素改进

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

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

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

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

视图转换伪元素的编辑前后支持。

如需了解详情，请参阅使用 View Transitions API 实现流畅简单的转换。

Chromium 问题：1511233。

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

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

在块容器中对 align-content 的支持（之前和之后）。

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 不会存储在浏览器中。

在“Application”面板中突出显示第三方 Cookie 之前和之后。

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

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

Chromium 问题：1506225、1503961。

Lighthouse 11.4.0

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

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

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

Chromium 问题：772558。

无障碍

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

  • 现在，当您依次打开 设置 > 实验时，系统会自动将焦点置于搜索框中。
  • 现在，网络 > 过滤器 中的 清除输入按钮可聚焦。
  • 现在，在高对比度模式下，Sources（来源）> Page（页面）中的文件树会正确显示。
  • 屏幕阅读器现在会正确读出以下内容：
    • 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 相关的新功能、更新或任何其他内容。

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。