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

Sofia Emelianova
Sofia Emelianova
GitHub

新的“自动填充”面板

此版本为 DevTools 带来了新的自动填充面板。Chrome 自动填充功能可让您轻松在网站上使用已保存的地址自动填写表单。借助新的自动填充面板，您可以检查表单字段、预测的自动填充值和已保存数据之间的映射。

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

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

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

“自动填充”面板。

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

针对 WebRTC 的增强型网络节流

自定义网络节流配置文件中新增了与数据包相关的参数，现在，您可以在 DevTools 中直接节流 WebRTC 应用。这对于测试实时通信实现非常有用，无需使用第三方软件。

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

在自定义节流配置文件中添加与数据包相关的新选项之前和之后。

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

您可以在此演示页面上试用新参数。首先，允许该网页使用摄像头。然后，在 Network（网络）面板中，选择您配置的自定义配置文件，然后返回该页面，依次点击 Start（开始）和 Call（调用）。

Chromium 问题：41175925。

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

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

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

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

概览中会显示带有图标的动画组。您现在可以检查了。该组在时间轴中显示像素值，而不是毫秒值。

改进了“元素”>“样式”中的 CSS 嵌套支持

元素 > 样式标签页改进了对 CSS 嵌套的支持，现在会以缩进和大括号的形式显示嵌套样式。CSS 嵌套是一种将 CSS 规则分组的方法，可减少冗余并使内容更有条理。

添加缩进并将嵌套样式括入大括号之前和之后。

Chromium 问题：40166888。

“增强型性能”面板

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

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

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

添加用于隐藏函数及其子项的上下文菜单前后。

具有隐藏子级的函数在右侧会显示 下拉按钮。将鼠标悬停在该图标上可查看隐藏的子级数量，点击该图标可再次显示这些子级。如需返回火焰图的初始状态，请右键点击某个函数，然后选择重置轨迹。

从所选发起者指向其发起的事件的箭头

以前，当您在主要轨道中选择某个事件时，该轨道会显示一条从发起者到所选事件的箭头。现在，轨道还会显示一条箭头，指向所选事件发起的事件（如果有）。

之前和之后显示的箭头从“已选择”变为“已发起”事件和命名链接（而非“展开”）。

此外，所有发起者现在都在摘要标签页中显示发起者字段，并且发起者和发起者字段均采用命名链接，而不是显示。

Chromium 问题：325604258、325024819、326055289。

Lighthouse 11.6.0

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

值得注意的变化包括新的“启用 JS 采样” 设置（用户可选择启用）。默认情况下，此设置处于停用状态。

添加“用户选择启用”型 JS 采样设置前后。

启用 JS 采样会向性能轨迹添加详细的 JavaScript 调用堆栈，但可能会减慢报告生成速度。

未启用（左）和启用（右）JS 采样的性能轨迹。

生成 Lighthouse 报告后，您可以在 Tools menu（工具菜单）> View Unthrottled Trace（查看未节流的轨迹）下找到该轨迹。

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

Chromium 问题：772558。

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

内存面板中的堆快照包含不基于构造函数的特殊对象群组。现在，当您将鼠标悬停在这些对象上时，内存面板会显示一个包含简短说明的提示，以及指向文档中更详细说明的链接。

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

Chromium 问题：41490331。

应用 > 存储空间更新

此版本对应用 > 存储空间进行了一些更新。

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

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

显示共享存储空间使用了多少字节的对比前后图。

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

Chromium 问题：324464353。

Web SQL 已被完全弃用

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

为此，DevTools 从 Application 面板中移除了 Web SQL 部分。

Chromium 问题：327254049。

改进了“覆盖率”面板

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

  • 状态栏现在会正确计算被滤除网址的使用情况统计信息。以前，它会汇总与过滤条件匹配的子网址的使用情况数据，而不是汇总其父级网址的数据。

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

  • 已使用的代码的颜色现在为灰色，而不是绿色，以提高可见度，尤其是对无绿色色觉缺陷的用户。

将已用代码的颜色更改为灰色的前后对比。

Chromium 问题：41494198、329253687。

“图层”面板可能被弃用

由于使用率不高，图层面板可能即将被弃用。该面板现在会在顶部显示警告横幅。

图层面板顶部显示的警告横幅，其中宣布了可能的弃用。

在我们最终决定弃用该面板之前，欢迎随时分享您的想法和疑虑。

JavaScript 性能剖析器弃用：第 4 阶段（最终阶段）

在此版本中，JS 性能分析器面板已被完全弃用，无法再重新启用。

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

Chromium 问题：40262073。

其他亮点

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

  • 网络：
    • 修复了多行 Cookie 解析不正确的 bug (325410304)。
    • 修复了发起者列中的调用堆栈预览 (327665602)。
  • 性能监视器：跟踪复选框现在与界面中的其余部分相同 (1467464)。
  • 来源：为 XHTML 文档添加了语法突出显示功能 (327940244)。
  • 设置 > 设备：旧版 Galaxy Fold 已替换为新版 Galaxy Z Fold 5 (40113439)。
  • 性能：现在，使用 Ctrl/Cmd+F 进行搜索时，系统会突出显示所有匹配的搜索结果 (1523279)。
  • 开发者资源：现在还会显示通过语言扩展程序加载的资源，例如 C/C++ DevTools Support (DWARF) Chrome 扩展程序 (40746829)。
  • 性能：修复了摘要标签页中剪裁的调用堆栈及其布局不佳的问题 (325314708)。
  • 抽屉式导航栏： 关闭按钮现在可聚焦，因此您可以使用键盘关闭面板。

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。

开发者工具的新变化

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