Chrome 133 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

永久性 AI 聊天记录

AI 辅助面板现在会在本地保留跨会话的聊天记录，因此即使重新加载开发者工具或 Chrome，您也可以查看之前与 Gemini 的对话。

改进了效果面板

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

图片传送数据分析

现在，效果 > 数据分析标签页会突出显示可优化文件大小的图片。点击数据分析中的图片，即可在广告网络轨道中看到该图片突出显示。

“效果”面板，其中突出显示了图片提交数据分析。

如需详细了解如何优化图片传送，请参阅高效地对图片进行编码。

经典和现代键盘导航

现在，您可以在效果面板中选择首选的键盘导航样式，主要区别如下：

  • 传统：使用鼠标滚轮（触控板向上或向下滚动）进行缩放，使用 Shift 键 + 鼠标滚轮进行垂直滚动。
  • 现代：使用鼠标滚轮垂直滚动，使用 Shift 键 + 鼠标滚轮水平滚动，使用 Command/Control 键 + 鼠标滚轮缩放。

如需选择您的首选样式，请点击面板右上角的 显示快捷方式，然后选择经典或现代。快捷方式对话框还会提供可用快捷方式的备忘单。

快捷方式对话框，其中列出了“效果”面板的可用快捷方式。

忽略火焰图中不相关的脚本

为了更好地专注于代码，您现在可以在效果面板中直接将不相关的脚本添加到忽略列表中。该面板会自动收起过度嵌套的代码。

如需向忽略列表添加脚本，请点击顶部操作栏中的 显示忽略列表设置对话框，然后在输入字段中输入正则表达式。火焰图表会在您输入内容时应用新规则。

您可以在 设置 > 忽略列表中添加忽略列表规则，DevTools 会保存这些规则，您可以在对话框中随意开启或关闭这些规则。

悬停时突出显示时间轴标记和范围

为了帮助您更好地了解性能轨迹，效果面板现在会执行以下操作：

  • 当您将鼠标悬停在时间轴上时，系统会显示一个跨越整个性能轨迹的垂直标记。
  • 当您将鼠标悬停在主轨道中的项上时，突出显示时间轴中的相应范围。

建议的节流设置

现在，效果面板会在实时指标和相关 捕获设置下拉菜单中推荐节流设置。

在设置菜单中添加节流建议之前和之后。

建议的 CPU 节流设置（目前）是最常用的 4x slowdown，网络建议则基于 Chrome 用户体验报告数据（前提是在实时指标中启用了该报告）。

此外，性能面板现在会在操作栏的近期会话下拉菜单中，在每个轨迹旁边提醒您所用的节流设置。

叠加层中的时间标记

时间标记已从时间轨道移至轨迹底部，现在叠加在所有轨道之上，即使时间轨道处于隐藏状态，也能看到这些标记。

将标记移至轨迹底部之前和之后。

时间轨道会保留您的自定义 mark() 和 measure() 调用。

“摘要”中 JavaScript 调用的堆栈轨迹

现在，性能 > 摘要标签页会显示 JavaScript 调用的堆栈轨迹，包括异步调用。

在“摘要”标签页中添加堆栈轨迹之前和之后。

徽章设置已移至“元素”中的菜单

元素面板中的标记设置已从默认处于隐藏状态的操作栏移至相应的右键菜单。

将徽章设置移至菜单之前和之后。

新增了“What's new”（新变化）面板

新变化面板采用了全新外观，更贴近 Chrome 的设计。

“新变化”面板的新旧版。

Chromium 问题：325441858。

Lighthouse 12.3.0

Lighthouse 面板现在运行的是 Lighthouse 12.3.0。

此次更新还新增了一些审核，用于检查是否通过 COOP 和严格 HSTS 政策实现了适当的源隔离。请参阅完整的变更列表。

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

Chromium 问题：40543651。

其他亮点

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

  • 来源：现在，在暂停时，如果服务工件上下文是在暂停后创建的，调试程序不会意外切换到该上下文 (373893057)。
  • 效果：
    • 现在，当您将鼠标悬停在脚本上时，火焰图中的提示会显示网址（如果有）(368541957)。
    • 摘要：饼图已替换为条形表示法。
    • 捕获设置中的扩展数据复选框已重命名为显示自定义轨道。
    • 数据分析标签页现在包含一个已通过的数据分析 (N) 部分，该部分默认处于收起状态。
  • 应用 > 存储：您可以使用空键创建存储条目，因为它们在技术上是有效的 (373703285)。
  • 现在，chrome:// 页面已停用设备模式 (40186276)。
  • 网络：
    • 启用相应设置后，点击 Export HAR 一次即可打开一个菜单，其中包含两个选项（已清理版和包含敏感数据版）。以前，菜单需要长按才能打开 (378076279)。
    • 复制为 c网址 现在使用 -b 属性（而非 -H 'cookie:...'）来绕过 Cookie，并且更易于阅读 (40791742)。
  • 无障碍功能：您现在可以使用上下文菜单在面板内向左或向右移动标签页 (383164782)。
  • 屏蔽网络请求：此命令菜单设置现已与相应的复选框同步 (378058733)。

下载预览渠道

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

与 Chrome DevTools 团队联系

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

开发者工具的新变化

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