Chrome 133 版本开发者工具(DevTools)更新内容

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 ,然后选择 ClassicModern。该快捷键对话框还提供了一张可用快捷键的速查表。

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

引用

相关推荐
梵得儿SHI16 分钟前
Vue 项目实战与性能优化全攻略:从代码、渲染到首屏,一站式解决卡顿慢加载
前端·vue.js·性能优化·vite·前端面试·前端优化·首屏优化
ShyanZh18 分钟前
【skill】HTML PPT Skill:用 Claude Code 一句话生成专业演示文稿
前端·ai·html·powerpoint·skill
AI视觉网奇24 分钟前
three教学 3d资产拼接源代码
前端·css·css3
程序猿阿伟1 小时前
《Chrome标签组搭建多任务高效浏览指南》
前端·chrome
2601_958352901 小时前
双麦 DSP 音频模块实战:一文梳理 A-68 在全行业场景的声学解决方案与落地要点
前端·嵌入式硬件·音视频·语音识别·降噪消回音·音频处理模块
智码看视界2 小时前
老梁聊全栈:JavaScript 原型链深入探索对象继承的奥秘
前端·javascript·ecmascript
布朗克1682 小时前
39 Spring Boot Web实战
前端·spring boot·后端·实战
纽格立科技2 小时前
DRM 发射端链路图(上)
前端·人工智能·车载系统·信息与通信·传媒
云水一下2 小时前
Vue.js从零到精通系列(七):高级特性实战——Teleport、异步组件、自定义指令与TypeScript深度结合
前端·vue.js·typescript
qq4356947012 小时前
Vue05
前端·vue.js