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

Sofia Emelianova
Sofia Emelianova

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

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

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

改进了网络

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

“状态”列中的失败原因

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

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

Chromium 问题:1506760

改进的“复制”子菜单

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

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

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

Chromium 问题:12670331276452798498

提升了性能

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

时间轴中的面包屑导航

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

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

Chromium 问题:1467739

主轨道中的事件发起者

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

  • 样式或布局失效 ->重新计算样式布局
  • 请求动画帧 ->动画帧已触发
  • 请求空闲回调 ->触发空闲回调
  • 安装计时器 ->计时器已触发
  • 创建 WebSocket ->Send...Receive WebSocket HandshakeDestroy 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-captiontable-cell。以前,它只能与 grid 和 flex 配合使用。

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

Chromium 问题:1500511

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

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

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

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

Chromium 问题:14869331467464

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

现在,通过设备模式,您可以设置模拟可折叠设备的折叠状态连续模式折叠式。连续模式指的是“平坦”“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 问题:15062251503961

Lighthouse 11.4.0

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

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

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

Chromium 问题:772558

无障碍

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

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

Chromium 问题:1504938149986815121611515224151541815169981517015

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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