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

Sofia Emelianova
Sofia Emelianova

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

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

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

网络改进

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

“状态”列中的失败原因

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

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

Chromium 问题:1506760

改进了“复制”子菜单

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

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

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

Chromium 问题:12670331276452798498

提升了性能

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

时间轴中的面包屑导航

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

如需设置面包屑导航,请在时间轴上选择一个范围,将光标悬停在该范围上,然后点击 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-captiontable-cell。以前,它仅适用于网格和 flex。

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

Chromium 问题:1500511

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

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

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

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

Chromium 问题:14869331467464

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

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

包含坐姿选项的下拉菜单。

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

Chromium 问题:1066842

动态主题

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

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

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

Chromium 问题:1483276

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

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

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

在“网络”面板中捕获第三方 Cookie 之前和之后。

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

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

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

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

Chromium 问题:15062251503961

Lighthouse 11.4.0

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

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

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

Chromium 问题:772558

无障碍

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

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

Chromium 问题:1504938149986815121611515224151541815169981517015

其他亮点

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

  • 动画
    • 修复了屏幕截图弹出式窗口超出边界呈现的 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 新变化系列中涵盖的所有内容的列表。