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

Sofia Emelianova
Sofia Emelianova

新版“自动填充”面板

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

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

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

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

“自动填充”面板。

如需了解详情,请参阅了解表单自动填充

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

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

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

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

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

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

Chromium 问题:41175925

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

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

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

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

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

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

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

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

Chromium 问题:40166888

“增强型性能”面板

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

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

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

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

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

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

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

显示“已选择”到“已启动事件”和已命名链接的箭头(而非“显露”)的前后对比。

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

Chromium 问题:325604258325024819326055289

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 问题:41494198329253687

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

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

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

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

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/Ctrl+Ctrl 组合键 (1523279) 进行搜索时,所有匹配的搜索结果都会突出显示。
  • 开发者资源:现在还会显示通过语言扩展程序加载的资源,例如 C/C++ 开发者工具支持 (DWARF) Chrome 扩展程序 (40746829)。
  • 性能:修复了 Summary 标签页中的调用堆栈剪裁问题及其错误布局 (325314708)。
  • 抽屉式导航栏关闭 关闭按钮现在可聚焦,因此可以使用键盘关闭面板。

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

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

开发者工具的新变化

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