Chrome 132 版本开发者工具(DevTools)更新内容
Chrome 132 版本开发者工具(DevTools)更新内容
一、使用 Gemini 调试 Network、Source 和 Performance
Chrome 131 可以使用 Gemini 调试 CSS,现在可以调试更多模块了
与元素面板中的右键菜单类似,要打开 AI 辅助面板并开始与 Gemini 的聊天,可以通过以下方式操作:
- 在 Network 面板中,右键点击一个网络请求并选择“Ask AI”,或点击该请求旁边的“Ask AI”按钮。
- 在 Sources > Page 选项卡中,右键点击一个文件并选择“Ask AI”,或点击该文件旁边的“Ask AI”按钮。
- 在 Performance > Main track 中,右键点击一个活动并选择“Ask AI”,或点击该活动旁边的“Ask AI”按钮。
二、AI 聊天记录
可以通过以下方式在 AI 辅助面板中恢复并查看与 Gemini 的历史聊天记录:
- 点击面板左上角的 “Add New Chat” 按钮。
- 使用网络面板、Sources > Page 选项卡以及 Performance > Main track 中的 “Ask AI” 按钮和菜单选项。
要查看之前的聊天记录,可以点击 “History” 按钮下方的下拉菜单,从中选择相应的提示。只要 DevTools 处于打开状态,AI 辅助面板会记住聊天历史记录。
三、在 Application > Storage 中管理扩展存储
与本地存储和会话存储类似,现在可以在 Application > Storage 部分查看和修改扩展存储条目
四、Performance 面板优化
此版本对性能面板进行了多项改进。
1. 交互阶段在实时指标中的展示
现在,可以在性能实时指标中展开交互项,以查看各个阶段的详细分解及其时间数据。
现在这些功能已集成到 DevTools 中,这也标志着 Web Vitals 扩展将停止支持
2. 摘要 (Summary) 选项卡中的渲染阻塞信息
当在 Performance > Network 轨道中选择一个带有红色三角形标记的网络请求时,摘要 (Summary) 选项卡现在会显示该请求是渲染阻塞的,这一信息补充了(重构后的)工具提示内容。
3. 支持 scheduler.postTask 事件及其触发箭头
在 Performance > Main track 中,现在可以显示 scheduler.postTask() 事件及其触发箭头,具体包括以下情况:
- Schedule postTask -> Fire postTask
- Schedule postTask -> Abort postTask
五、Animations 面板和 Elements > Styles 选项卡的改进
此版本对动画面板和 Elements > Styles 选项卡进行了若干改进。
1. 从 Elements > Styles 跳转到 Animations
现在,Elements > Styles 选项卡在动画属性值旁边添加了一个跳转到动画面板的按钮,方便在动画面板中轻松修改动画。
2. Computed 选项卡中的实时更新
现在,当例如动画更新计算值时,Elements > Computed 选项卡会实时更新计算后的值。
六、传感器中的计算压力仿真
Sensors 面板现在允许仿真 Nominal、Fair、Serious 和 Critical 等不同级别的 CPU 压力。
七、内存(Memory)面板中按来源分组的同名 JS 对象
Memory 面板现在区分来自不同来源的同名 JS 对象,并按来源对它们进行分组。
八、设置(Settings)的新界面
为了更好地统一用户界面设计,DevTools 的设置界面现在与 Chrome 设置更加相似。特别是,各个部分现在通过“卡片”方式在视觉上进行分隔。
九、性能洞察(Insights)面板已弃用并从 DevTools 中移除
性能洞察面板中的所有重要和有用功能现在已迁移到性能面板,特别是在实时指标、洞察侧边栏选项卡和布局偏移轨道中。因此,本版本弃用了性能洞察面板,并将其从 DevTools 中移除。
十、其他
1. 性能(Performance)
- 移除了搜索查询中不必要的 3 个字符限制。
- 添加了“首页”按钮,帮助返回实时指标屏幕。
- 修复了之前无法使用的 Shift+S/W 跟踪缩放快捷键。
2. Elements > Styles:
- 将 anchor-center 添加到自动完成中。
- 修复了 flexbox 编辑器在 2 个单词值时不可用的 bug。
3. 网络(Network):
- 预取失败现在显示为黄色警告,而不是红色错误,以表明内容显示不受影响。
Chrome 132
- Debug network requests, source files, and performance traces with Gemini
- View AI chat history
- Manage extension storage in Application > Storage
- Performance improvements
- Interaction phases in live metrics
- Render blocking information in the Summary tab
- Support for scheduler.postTask events and their initiator arrows
- Animations panel and Elements > Styles tab improvements
- Jump from Elements > Styles to Animations
- Real-time updates in Computed tab
- Compute pressure emulation in Sensors
- JS objects with the same name grouped by source in the Memory panel
- A new look for settings
- Performance insights panel is deprecated and removed from DevTools
- Miscellaneous highlights
引用
- What’s new in DevTools