开发者工具的新变化，Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

新版“自动填充”面板

此版本在开发者工具中引入了新的自动填充面板。Chrome 自动填充功能提供了一种便捷的方式，让您能够使用已保存的地址在网站上自动填充表单。借助新的自动填充面板，您可以检查表单字段、预测的自动填充值和已保存数据之间的映射。

使用测试数据在此演示页面上试用新面板：

  1. 在个人资料自动填充中，点击任意填写表单...按钮，点击提交，然后在保存地址？对话框窗口中点击保存，并返回包含表单的页面。
  2. 打开开发者工具并触发自动填充事件：选择一个表单字段，然后从下拉列表中选择地址。

系统会自动打开自动填充面板，并向您显示检测到的表单字段、系统推断出的自动填充字段以及已保存的值。

“自动填充”面板。

如需了解详情，请参阅了解表单和自动填充。

针对 WebRTC 增强了网络节流功能

通过向自定义网络节流配置文件中新添加了数据包相关参数，您现在可以直接在开发者工具中对 WebRTC 应用进行节流。在无需使用第三方软件的情况下，这对于测试实时通信实现非常有用。

新参数为：数据包丢失（百分比）、数据包队列长度（数据包数量）和 check_box 数据包重新排序标志。

将与数据包相关的新选项添加到自定义限制配置文件之前和之后。

如需限制 WebRTC 连接，请在设置 设置 > 中的自定义配置文件中指定与数据包相关的参数限制，然后在网络面板中将其选中。

试用此演示页面上的新参数。首先，允许网页使用相机。然后，在网络面板中，选择您配置的自定义配置文件，并返回到页面，接着点击启动和调用。

Chromium 问题：41175925。

“Animations”面板中的滚动驱动动画支持

现在，您可以通过 Animations 面板检查滚动驱动的动画。

欢迎在此演示页面上试用此功能。打开动画面板并重新加载页面，以捕获滚动驱动的动画。

一组滚动驱动的动画，标有鼠标图标。

概览中会显示一个标有鼠标鼠标图标的动画组。您现在可以检查它。该组在时间轴中显示像素值，而非毫秒数。

改进了 Elements > 中的 CSS 嵌套支持风格

元素 >样式标签页改进了 CSS 嵌套支持，现在可显示带有缩进和大括号的嵌套样式。CSS 嵌套可将 CSS 规则组合在一起，让内容更简洁、更有条理。

添加缩进并将嵌套样式括在大括号中前后。

Chromium 问题：40166888。

“增强型性能”面板

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

在火焰图中隐藏函数及其子函数

如需在性能中滤除火焰图中的噪声，请 >Main，您现在可以隐藏不相关的函数及其子函数。在火焰图中，右键点击某个函数，然后从上下文菜单中选择相应选项。

添加上下文菜单之前和之后，可让您隐藏函数及其子函数。

包含隐藏子级的函数的右侧有一个 arrow_drop_down 下拉按钮。将鼠标悬停在该图标上即可查看隐藏的子级数量，点击它即可再次显示这些子级。如需返回到火焰图的初始状态，请右键点击某个函数，然后选择 Reset trace。

从所选发起者指向其发起的活动的箭头

以前，当您在 Main 轨道中选择事件时，轨道会显示一个从启动器指向所选事件的箭头。现在，航迹还会显示一个箭头，指示所选事件指向它所启动的事件（如果有）。

显示“已选择”到“已启动事件”和已命名链接的箭头（而非“显露”）前和之后。

此外，所有发起者的摘要标签中现在都有发起者字段，发起者和发起者字段现在都有已命名的链接，而不是显示。

Chromium 问题：325604258、325024819、326055289。

Lighthouse 11.6.0

Lighthouse 面板现在运行 Lighthouse 11.6.0。请参阅完整的更改列表。

一项值得注意的变化是，新增了选择启用check_box_outline_blank 启用 JS 采样设置。此设置默认处于停用状态。

添加选择启用 JS 采样设置前后。

启用 JS 采样会将详细的 JavaScript 调用堆栈添加到性能跟踪记录中，但可能会减慢报告生成速度。

未进行 JS 采样（左）和进行 JS 采样（右）的性能跟踪记录。

轨迹文件可在 more_vert 工具菜单下找到 >生成 Lighthouse 报告后，查看未节流的跟踪记录。

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

Chromium 问题：772558。

关于“内存”中特殊类别的提示 >堆快照

Memory 面板中的堆快照包含特殊对象组，这些对象不基于构造函数。现在，当您将鼠标悬停在此类对象上时，Memory 面板会显示一条提示，其中包含简短说明以及指向文档中较长说明的链接。

针对特殊对象组显示描述性提示之前和之后。

Chromium 问题：41490331。

应用 >存储空间更新

此版本对应用 >存储空间。

共享存储空间使用的字节数

应用 >存储 >共享存储空间部分现在会显示源站使用的字节数。

显示共享存储空间使用的字节数前后。

借助共享存储空间，您可以获得无限的跨网站存储空间写入权限，以及可保护隐私的读取权限。

Chromium 问题：324464353。

Web SQL 已完全弃用

Chrome 在版本 119 中弃用了 Web SQL，并在此版本中移除了弃用试用令牌，因此您无法再使用 Web SQL。

同样，开发者工具从 Application 面板中移除了 Web SQL 部分。

Chromium 问题：327254049。

覆盖率面板改进

此版本对覆盖率面板进行了一些更新：

  • 状态栏现在可正确计算被滤除网址的使用情况统计信息。以前，与过滤器匹配的子节点的使用情况数据不加总，而是加总父父的数据。

正确计算匹配子项统计信息之前和之后。

  • 所用代码的颜色现在为灰色而不是绿色，以提高可见性，这对于 或非绿色色觉缺陷。

将所用代码的颜色更改为灰色之前和之后。

Chromium 问题：41494198、329253687。

“图层”面板可能已被弃用

由于图层面板的使用率较低，它可能很快就会被弃用。现在，面板顶部会显示一个警告横幅。

“图层”面板顶部会显示警告横幅，用于宣布可能要弃用的功能。

在我们的团队最终决定弃用此面板之前，您可以随时分享您的想法和疑虑。

JavaScript Profiler 弃用：第四阶段（最终阶段）

在此版本中，JS Profiler 面板已完全弃用，且无法再重新启用。

如需分析 CPU 性能，请使用性能面板。

Chromium 问题：40262073。

其他亮点

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

  • 网络： <ph type="x-smartling-placeholder">
      </ph>
    • 修复了错误解析多行 Cookie 的 bug (325410304)。
    • 修复了“Initiator”列中的调用堆栈预览 (327665602)。
  • 效果监控器：现在，跟踪复选框与界面其余部分相同 (1467464)。
  • 来源：添加了针对 XHTML 文档的语法突出显示功能 (327940244)。
  • 设置 >设备：旧 Galaxy Fold 已被较新的 Galaxy Z Fold 5 (40113439) 取代。
  • 效果：现在，当您使用 Ctrl/Cmd+F 组合键 (1523279) 进行搜索时，所有匹配的搜索结果都会突出显示。
  • 开发者资源：现在还会显示通过语言扩展程序加载的资源，例如 C/C++ 开发者工具支持 (DWARF) Chrome 扩展程序 (40746829)。
  • 性能：修复了 Summary 标签页中的调用堆栈剪裁问题及其错误布局 (325314708)。
  • 抽屉式导航栏：关闭 关闭按钮现在可聚焦，因此可以使用键盘关闭面板。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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