Chrome 133 版本开发者工具（DevTools）更新内容

一、持久化的 AI 聊天记录

AI 助手面板会在本地持久化聊天记录，即使重新加载 DevTools 或 Chrome，也可以查看之前与 Gemini 的对话内容。

二、Performance 面板改进

此版本为 Performance 面板带来了多项改进。

1. 图像交付洞察

Performance > Insights 选项卡可以突出显示文件大小可进一步优化的图像。单击洞察中的图像，即可在 Network track 中查看它的高亮显示。

2. 经典模式和现代模式的键盘导航

Performance 面板现支持选择首选键盘导航风格，主要区别如下：

Classic（经典）：
- 使用鼠标滚轮（或触控板上下）进行缩放
- 通过 Shift + 鼠标滚轮 实现垂直滚动
Modern（现代）：
- 通过鼠标滚轮实现垂直滚动
- 通过 Shift + 鼠标滚轮 实现水平滚动
- 通过 Command/Control + 鼠标滚轮 实现缩放

要选择偏好风格，在面板右上角点击帮助按钮 Show shortcuts，然后选择 Classic 或 Modern。该快捷键对话框还提供了一张可用快捷键的速查表。

3. 在火焰图中忽略无关脚本

为了更好地专注于代码，可以直接在 Performance 面板里将无关的脚本添加到 ignore list 中。面板会自动折叠过度嵌套的部分。

要将脚本添加至 ignore list，点击顶部操作栏中的 compress Show ignore list settings dialog，然后在输入框中输入一条正则表达式。随着输入，flame chart 会实时应用新的规则。

DevTools 会将在 Settings > Ignore list 中添加的 ignore list 规则保存下来，并允许在对话框中随时开启或关闭它们。

4. 时间轴标记与范围高亮（悬停时）

为帮助更好地理解性能跟踪，Performance 面板具有以下功能：

当将鼠标悬停在 Timeline 上时，会显示一条跨越整个性能跟踪的垂直标记。
当将鼠标悬停在 Main track 中的项目上时，会在 Timeline 上高亮显示一个范围。

5. 推荐的限流设置

Performance 面板在实时指标以及相关的设置（Capture settings 下拉菜单）中均推荐了限流设置。

目前推荐的 CPU 限流为最常用的 4 倍降速，而网络推荐则基于 Chrome UX Report 数据（前提是在实时指标中启用了该功能）。

此外，Performance 面板会在操作栏中 Recent sessions 下拉菜单的每个 trace 旁边提醒使用的限流设置。

6覆盖中的时间标记

时间标记已从 Timings track 移至 trace 底部，会覆盖在所有轨道上，即使 Timings track 被隐藏，它们依然可见。

Timings track 保留了自定义的 mark() 和 measure() 调用。

7. Summary 中的 JavaScript 调用堆栈跟踪

Performance > Summary 选项卡会显示 JavaScript 调用的堆栈跟踪，包括异步调用。

三、Elements 中的徽章设置移至菜单

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

四、新的 “What’s new” 面板

What’s new 面板采用了全新外观，更加贴近 Chrome 的设计风格。

五、Lighthouse 12.3.0

Lighthouse 面板运行 Lighthouse 12.3.0。

此次更新新增了包括检查 COOP 下正确的源隔离和强 HSTS 策略在内的新审计。

六、其他

Sources：在暂停状态下，如果 service worker 在暂停后创建，Debugger 不会意外切换到 service worker 上下文
Performance：当悬停在脚本上时，火焰图中的工具提示会显示 URL
- Summary：饼图已被条形图所取代
- Capture settings：“Extension data” 复选框已重命名为 “Show custom tracks”
- Insights：Insights 选项卡默认折叠显示 “Passed insights (N)” 部分
Application > Storage：可以创建键为空的存储项，因为从技术上讲这是有效的
Device mode：chrome:// 页面禁用了设备模式
Network：
- 在启用相应设置后，点击一次 “Export HAR” 现会打开一个包含两个选项（经过脱敏和包含敏感数据）的菜单，此前需要长按才能打开菜单
- “Copy as cURL” 使用 -b 参数来绕过 cookies 并使输出更易读，而不是使用 -H 'cookie:...'
Accessibility：可以通过上下文菜单在面板内左右移动标签
Network request blocking：此命令菜单设置现与相应的复选框保持同步

Chrome 133

引用

What's new in DevTools