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

Sofia Emelianova
Sofia Emelianova
GitHub

官方集合的录音机扩展程序现已推出

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

要直接从 Recorder 中打开集合，请选择下载 Export >在 Recorder 面板顶部的操作栏中获取扩展程序...。

改进了网络

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

“状态”列中的失败原因

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

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

Chromium 问题：1506760。

改进的“复制”子菜单

请求的复制子菜单现在更加井然有序。

改进“复制”子菜单之前和之后的效果。

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

Chromium 问题：1267033、1276452、798498。

提升了性能

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

时间轴中的路径

现在，您可以通过性能面板顶部的时间轴设置面包屑导航，并在面包屑导航之间进行切换。

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

Chromium 问题：1467739。

主轨道中的事件发起者

效果 >主轨道现在默认会显示将发起者连接起来的箭头及其导致的以下事件。

  • 样式或布局失效 ->重新计算样式或布局
  • 请求动画帧 ->动画帧已触发
  • 请求空闲回调 ->触发空闲回调
  • 安装计时器 ->计时器已触发
  • 创建 WebSocket ->Send... 和 Receive WebSocket Handshake 或 Destroy WebSocket

如需查看箭头，请在跟踪记录中找到此类事件，然后点击该事件。之前，这项功能仅供实验使用。

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

Chromium 问题：1434596。

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

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

添加允许您选择 JavaScript 虚拟机实例的新菜单前后的对比。

Chromium 问题：1511813。

元素改进

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

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

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

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

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

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

Chromium 问题：1511233。

块容器的 align-content 属性支持

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

块容器中对“align-content”的支持。

Chromium 问题：1500511。

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

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

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

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

Chromium 问题：1486933、1467464。

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

借助设备模式，您现在可以设置模拟可折叠设备的折叠状态：连续模式或折叠式。连续模式指的是“平坦”“position”和“folded”在显示屏的两个部分之间形成一个角度。

包含状况选项的下拉菜单。

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

Chromium 问题：1066842。

动态主题

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

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

开发者工具与在“Appearance”中选择的颜色主题一致。

Chromium 问题：1483276。

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

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

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

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

在应用中，导航到存储 >Cookie，然后点击一个网域。以黄色突出显示的 Cookie 未存储在浏览器中。

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

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

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

Chromium 问题：1506225、1503961。

Lighthouse 11.4.0

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

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

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

Chromium 问题：772558。

无障碍

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

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

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

其他亮点

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

  • 动画： <ph type="x-smartling-placeholder">
      </ph>
    • 修复了屏幕截图弹出式窗口渲染超出边界的 bug (1506991)。
    • 修复了已移除的动画节点未标记为“已移除”的 bug (1506561)。
  • 网络： <ph type="x-smartling-placeholder">
      </ph>
    • 标头替换：修复了 Headers 标签页中出现假紫色点图标的 bug (1507856)。
    • 预览：修复了包含不必要双重解码的 bug (1509336)。
    • 修复了由于短请求不显示的错误 (1509862)。
  • 应用 >IndexedDB：重新排列了操作栏中的按钮，以便与其他面板保持一致 (1393800)。
  • 传感器：修复了无法获取位置信息的、不正确的成功回调 (1486859)。
  • 性能： <ph type="x-smartling-placeholder">
      </ph>
    • 收集垃圾按钮现在有了适当的图标“拖把”而不是“bin”(1507530)。
    • 现在，性能跟踪记录会在导航到 about:blank 时保留数据 (1509947)。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

  • 请通过 crbug.com 提交建议或反馈。
  • 使用更多选项报告开发者工具问题 展开 >帮助 >在开发者工具中报告开发者工具问题。
  • 请发送电子邮件至 @ChromeDevTools。
  • 请对我们的开发者工具新功能 YouTube 视频或开发者工具提示 YouTube 视频发表评论。

开发者工具的新变化

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