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

技术分享 10个月前 (03-25) 0 999+

关注

一、持久化的 AI 聊天记录

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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：此命令菜单设置现与相应的复选框保持同步