DevTools，Chrome 124 中的新功能 | TinyShare前端技术分享

新的自动填充面板

此版本为 DevTools 带来了全新的 自动填充 面板。Chrome 自动填充提供了一种方便的方式，在网站上自动填充已保存地址的表单。新的 自动填充 面板允许您检查表单字段、预测的自动填充值和已保存数据之间的映射关系。

在此演示页面上尝试新面板和测试数据：

在 Profile Autofill 中，点击任意 Fill form … 按钮，然后点击 Submit，接着在 Save address? 对话框中点击 Save，返回到带有表单的页面。
打开 DevTools 并触发自动填充事件：选择一个表单字段，然后从下拉列表中选择地址。

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

自动填充面板。

要了解更多，请参阅 Learn Forms 和 Autofill。

WebRTC 的增强网络限速

通过向自定义网络限速配置文件添加与数据包相关的参数，您现在可以在 DevTools 中直接限制您的 WebRTC 应用程序。这对于测试实时通信实现非常有用，无需使用第三方软件。

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

要限制 WebRTC 连接，请在设置 Settings > Throttling 中的自定义配置文件中指定数据包相关参数，并在 Network 面板中进行选择。

在此演示页面上尝试新参数。首先，允许页面使用摄像头。然后，在 Network 面板中，选择您配置的自定义配置文件，在页面上点击 Start 和 Call。

Chromium 问题：41175925。

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

动画面板现在允许您检查滚动驱动动画。

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

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

概述中出现了带有鼠标图标的动画组。您现在可以检查它。该组在 Timeline 中显示像素值而不是毫秒值。

注意： 其他基于时间的动画组现在用计划监视图标标记。

Elements > Styles 中增强的 CSS 嵌套支持

Elements > Styles 标签现在改进了 CSS 嵌套支持，并使用缩进和大括号显示嵌套样式。CSS 嵌套是一种将 CSS 规则分组在一起的方式，使得代码更简洁、更有结构。

添加缩进和括号包围嵌套样式之前和之后的效果。

Chromium 问题：40166888。

性能面板增强

此版本为性能面板带来了几项改进。

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

为了过滤掉性能 > Main 中火焰图的干扰，您现在可以隐藏不相关的函数及其子级。在火焰图中，右键点击一个函数，然后从上下文菜单中选择选项。

具有隐藏子级的函数右侧会有一个箭头下拉 Drop-down 按钮。悬停在上面以查看隐藏子级的数量，点击以再次显示它们。要返回火焰图的初始状态，请右键点击一个函数并选择 Reset trace。

从所选启动程序到它们启动的事件的箭头

以前，当您在 Main 跟踪中选择一个事件时，该跟踪会显示一个从其启动程序到所选事件的箭头。现在，该跟踪还会显示一个从所选事件到它启动的事件（如果有）的箭头。

![从所选到启动的事件显示箭头及其命名链接而不是 Reveal 之前和之后的效果。](https://developer.chrome.com

/static/blog/new-in-devtools-124/image/initiator-for.png)

此外，所有启动程序现在在 Summary 标签中都有 Initiator for 字段，Initiator for 和 Initiated by 字段都有命名链接而不是 Reveal。

Chromium 问题：325604258、325024819、326055289。

Lighthouse 11.6.0

Lighthouse 面板现在运行的是 Lighthouse 11.6.0。查看完整的更改列表。

值得注意的变化之一是新的可选检查框 启用 JS 抽样 设置。此设置默认为禁用状态。

添加一个可选的 JS 抽样设置之前和之后的效果。

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

无 JS 抽样（左）和有 JS 抽样（右）的性能跟踪。

在生成 Lighthouse 报告后，可以在 工具菜单 > 查看未限速跟踪 下找到跟踪。

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

Chromium 问题：772558。

内存 > 堆快照中特殊类别的工具提示

Memory 面板中的堆快照有一些不基于构造函数的特殊对象组。当您悬停在此类对象上时，Memory 面板现在会显示一个工具提示，其中包含简短的描述和到文档中更长描述的链接。

显示特殊对象组的描述性工具提示之前和之后的效果。

Chromium 问题：41490331。

应用程序 > 存储更新

此版本为 应用程序 > 存储带来了几个更新。

共享存储使用的字节

应用程序 > 存储 > 共享存储 部分现在会显示一个来源使用的字节数。

显示共享存储使用的字节数之前和之后的效果。

共享存储允许您具有无限的跨站点存储写访问权限，同时保留隐私保护的读取访问权限。

Chromium 问题：324464353。

Web SQL 已完全弃用

Chrome 在 119 版中弃用了 Web SQL，并在此版本中删除了弃用试验标记，因此您无法再使用 Web SQL。

相应地，DevTools 从 应用程序 面板中删除了 Web SQL 部分。

Chromium 问题：327254049。

覆盖面板改进

此版本为覆盖面板带来了几项更新：

状态栏现在正确计算了过滤 URL 的使用统计信息。之前，它会将与过滤器匹配的子级的使用数据相加，而不是它们的父级数据。

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

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

将已使用代码的颜色更改为灰色之前和之后的效果。

Chromium 问题：41494198，329253687。

可能已弃用的图层面板

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

在图层面板顶部显示潜在弃用的警告横幅。

在团队做出最终弃用面板的决定之前，欢迎在此处分享您的想法和担忧。

JavaScript Profiler 弃用：第四阶段，最终

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

要对 CPU 性能进行分析，请使用性能面板。

Chromium 问题：40262073。

其他亮点

这些是此版本中的一些显着修复

和改进：

网络：
- 修复了多行 cookie 解析不正确的问题 (325410304)。
- 修复了 启动程序 列中调用堆栈预览不正确的问题 (327665602)。
性能监视器：跟踪复选框现在与 UI 的其他部分相同 (1467464)。
Sources：为 XHTML 文档添加了语法高亮 (327940244)。
设置 > 设备：将旧的 Galaxy Fold 替换为更新的 Galaxy Z Fold 5 (40113439)。
性能：在使用 Ctrl/Cmd+F 进行搜索时，所有匹配的搜索结果现在都会被高亮显示 (1523279)。
开发者资源：现在还显示通过语言扩展加载的资源，例如 C/C++ DevTools Support (DWARF) Chrome extension (40746829)。
性能：修复了 Summary 标签中裁剪的调用堆栈及其布局不良的问题 (325314708)。
抽屉：关闭 Close 按钮现在是可聚焦的，因此可以使用键盘关闭面板。

下载预览通道

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

与 Chrome DevTools 团队取得联系

使用以下选项讨论本文中的新功能和更改，或与 DevTools 相关的其他事项。

通过 crbug.com 向我们提交建议或反馈。
在 DevTools 中使用 More options > Help > Report a DevTools issues 报告 DevTools 问题。
在 @ChromeDevTools 发推文。
在我们的 What's new in DevTools YouTube 视频或 DevTools Tips YouTube 视频上留下评论。

DevTools 中的新功能

列出了 DevTools 中的新功能系列中涵盖的所有内容。