Chrome 133 开发者工具的新变化

Sofia Emelianova
Sofia Emelianova
GitHub

永久性 AI 对话记录

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

改进了“效果”面板

此版本对性能面板进行了一些改进。

图片分发分析数据

现在，“效果”>“数据洞见”标签页可以突出显示您可以优化文件大小的图片。点击数据洞见中的图片，即可在网络轨道中看到该图片突出显示。

“效果”面板，其中突出显示了图片投放数据洞见。

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

经典和现代键盘导航

借助性能面板，您现在可以选择自己喜欢的键盘导航样式，主要区别如下：

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

如需选择偏好的样式，请依次点击面板右上角的 显示快捷键，然后选择经典或现代。“快捷键”对话框还提供了可用快捷键的速查表。

显示“性能”面板可用快捷键的快捷键对话框。

忽略火焰图中的无关脚本

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

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

开发者工具会将您在 Settings > Ignore list 中添加的忽略列表规则保存下来，您可以在对话框中随意开启和关闭这些规则。

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

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

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

建议的限制设置

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

添加节流建议之前和之后设置菜单的对比。

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

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

叠加层中的时间标记

时间标记已从 Timings 轨道移至轨迹底部，现在会叠加在所有轨道之上，即使 Timings 轨道处于隐藏状态，时间标记也会显示。

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

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

摘要中 JavaScript 调用的堆栈轨迹

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

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

Elements 中的徽章设置已移至菜单

元素面板中的徽章设置已从默认隐藏的操作栏移至相应的右键点击菜单。

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

新增了“最新资讯”面板

新增功能面板采用了更贴近 Chrome 设计的新外观。

“新变化”面板的新旧外观。

Chromium 问题：325441858。

Lighthouse 12.3.0

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

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

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

Chromium 问题：40543651。

其他亮点

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

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

下载预览渠道

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

与 Chrome 开发者工具团队联系

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

开发者工具的新变化

DevTools 新变化系列中涵盖的所有内容的列表。