此页面由 Cloud Translation API 翻译。

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

Sofia Emelianova

新的“自动填充”面板

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

欢迎试用此演示页面上的新面板，其中包含测试数据：

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

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

“自动填充”面板。

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

针对 WebRTC 的增强型网络节流

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

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

若要限制 WebRTC 连接，请前往设置（设置 > 限制）在自定义配置文件中指定与数据包相关的参数，然后在网络面板中选择相应参数。

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

Chromium 问题：41175925。

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

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

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

一组用鼠标图标标记的滚动驱动型动画。

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

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

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

添加缩进和用大括号括住嵌套样式的前后对比效果。

Chromium 问题：40166888。

“增强型性能”面板

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

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

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

包含隐藏子级的函数的右侧有一个 arrow_drop_down 下拉菜单按钮。将鼠标悬停在该图标上可查看隐藏的子级的数量，点击该图标可再次显示它们。如需返回到火焰图的初始状态，请右键点击函数，然后选择重置跟踪记录。

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

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

在显示之前和之后显示的箭头，从选中的事件指向已启动的事件和已命名的链接，而不是显示。

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

Chromium 问题：325604258、325024819、326055289。

Lighthouse 11.6.0

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

其中的一项重要变更是新增的“启用 JS 采样”check_box_outline_blank“启用 JS 采样”设置。此设置默认处于停用状态。

添加自选式 JS 采样设置前后。

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

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

生成 Lighthouse 报告后，您可以在 more_vert 工具菜单 > 查看无限制跟踪记录下找到跟踪记录。

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

Chromium 问题：772558。

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

内存面板中的堆快照包含并非基于构造函数的特殊对象组。现在，当您将鼠标悬停在此类对象上时，Memory 面板会显示一条提示，其中包含简短说明和指向文档中详细说明的链接。

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

Chromium 问题：41490331。

应用 > 存储空间更新

此版本对应用 > 存储进行了几项更新。

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

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

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

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

Chromium 问题：324464353。

Web SQL 已完全弃用

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

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

Chromium 问题：327254049。

“覆盖率”面板改进

此版本对覆盖率面板进行了几项更新：

状态栏现在可正确计算已过滤网址的使用情况统计信息。以前，与过滤器匹配的子元素的使用情况数据相加，而是加总父值。

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

为提高可见性，所用代码的颜色现在为灰色而非绿色，尤其是对于非绿色色觉缺陷。

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

Chromium 问题：41494198、329253687。

“图层”面板可能已弃用

图层 (Layers) 面板由于使用率较低可能即将被弃用。该面板现在会在顶部显示一个警告横幅。

“图层”面板顶部的警告横幅，用于宣布可能已弃用。

在我们的团队做出决定弃用该小组的最终决定之前，欢迎随时分享您的想法和疑虑。

JavaScript 性能分析器弃用：第四阶段，最终阶段

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

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

Chromium 问题：40262073。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

通过 crbug.com 提交建议或反馈。
使用开发者工具中的更多选项 > Help > Report a DevTools issues来报告开发者工具问题。
发推文：@ChromeDevTools。
请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。