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

Google 用户调研。

新的自动填充面板

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

不妨在此演示页面上试用包含测试数据的新面板：

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

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

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

增强了 WebRTC 的网络节流功能

现在，您可以在开发者工具中直接限制 WebRTC 应用，因为我们刚刚为自定义网络节流配置文件添加了与数据包相关的参数。这有助于您测试实时通信实现，而无需使用第三方软件。

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

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

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

Chromium 问题：41175925。

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

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

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

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

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

元素 > 样式 标签页改进了 CSS 嵌套支持，现在会以缩进和花括号的形式显示嵌套样式。CSS 嵌套是一种将 CSS 规则分组在一起的方法，可减少冗余代码并使代码更具结构性。

Chromium 问题：40166888。

增强型“效果”面板

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

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

如需过滤掉性能 > 主线程中的火焰图中的干扰信息，您现在可以隐藏不相关的函数及其子函数。在火焰图中，右键点击某个函数，然后从上下文菜单中选择一个选项。

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

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

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

此外，所有启动器现在都在摘要标签页中添加了启动器字段，并且启动器和由谁启动字段都具有命名链接，而不是显示。

Chromium 问题：325604258、325024819、326055289。

Lighthouse 11.6.0

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

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

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

生成 Lighthouse 报告后，您可以在more_vert 工具菜单 > 查看不受限制的轨迹下找到轨迹。

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

Chromium 问题：772558。

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

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

Chromium 问题：41490331。

应用 > 存储空间更新

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

共享存储空间已用字节数

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

借助共享存储空间，您可以拥有无限的跨网站存储空间写入权限，同时提供可保护隐私的读取权限。

Chromium 问题：324464353。

Web SQL 已完全弃用

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

随后，DevTools 从应用面板中移除了 Web SQL 部分。

Chromium 问题：327254049。

“覆盖率”面板方面的改进

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

• 状态栏现在可以正确计算过滤后的网址的使用情况统计信息。之前，状态栏会累加与过滤条件匹配的儿童的使用情况数据，而不是累加其父母的数据。

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

Chromium 问题：41494198、329253687。

“图层”面板可能即将被弃用

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

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

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

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

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

Chromium 问题：40262073。

其他亮点

此版本包含以下值得注意的修复和改进：

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

• 请前往 crbug.com 向我们提交反馈和功能请求。
• 在开发者工具中，依次选择 more_vert 更多选项 > 帮助 > 报告 DevTools 问题，以报告 DevTools 问题。
• 在 Twitter 上向 @ChromeDevTools 发送推文。
• 在 DevTools 新变化 YouTube 视频或 DevTools 提示 YouTube 视频中发表评论。

开发者工具的新变化

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