首页 > 其他分享 >Chrome 132 版本开发者工具(DevTools)更新内容

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

时间:2024-12-18 14:30:37浏览次数:6  
标签:Elements 选项卡 Chrome 132 AI Performance 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 面板现在允许仿真 NominalFairSeriousCritical 等不同级别的 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

引用

标签:Elements,选项卡,Chrome,132,AI,Performance,DevTools,面板
From: https://blog.csdn.net/guoqiankunmiss/article/details/144559746

相关文章

  • HTML打包EXE中的WebView2(免费)与Chrome内核的区别和使用场景详细介绍
    背景 近期有不少朋友使用了HTML一键打包EXE工具中的Webview2(免费)内核,询问的比较多的就是Webview2和Chrome内核的区别,这里会给大家做一个简单的介绍.WebView2是由微软提供的一种控件,它允许开发人员在本机应用程序中嵌入web技术(如HTML、CSS和JavaScript)。WebView2......
  • 11CSS属性-颜色表示-chrome调试-浏览器渲染
    一、今日内容首先对这些属性进行一个演练想要深刻理解所有常用的CSS属性,最好先学会以下几个最基础最常用的CSS属性font-size文字大小color前景色(文字颜色)background-color背景色width宽度height高度二、对CSS常用属性进行演练1、字体的默认大小是16px的还可以看到字......
  • chrome跳转新页面自动打开devtools调试工具的方法例子解析
    代码示例:根据您的需求,要在Chrome浏览器中实现跳转新页面时自动打开开发者工具(DevTools),以下是详细的步骤:方法一:设置Chrome开发者工具偏好打开Chrome浏览器。打开开发者工具。您可以通过点击页面右上角的三个点(菜单按钮),选择“更多工具”>“开发者工具”,或者使用快捷键F1......
  • 神了,Chrome 这个记录器简直是开发测试提效神器 转载
    在开发工作中,你是否遇到过这样的场景:当你需要开发某个功能时,这个功能依赖一系列的点击或者选择操作,才能获取到最终的数据。而在开发和调试的过程中,你往往需要多次验证流程的正确性。早期的时候,这种验证通常非常繁琐——你可能需要反复提交表单、重新执行操作流程,才能完成一次完......
  • # 2024-2025-1 20241325 《计算机基础与程序设计》第12周学习总结
    2024-2025-1学号20241325《计算机基础与程序设计》第12周学习总结作业信息|这个作业属于https://edu.cnblogs.com/campus/besti/2024-2025-1-CFAP||-- |-- ||这个作业要求在哪里|https://www.cnblogs.com/rocedu/p/9577842.html#WEEK12|这个作业的目标|<加入云班课,参考......
  • 2024-2025-1 20241327 《计算机基础与程序设计》第十二周学习总结
    作业信息|2024-2025-1-计算机基础与程序设计)||--|-|2024-2025-1计算机基础与程序设计第十二周作业)||快速浏览一遍教材计算机科学概论(第七版),课本每章提出至少一个自己不懂的或最想解决的问题并在期末回答这些问题|作业正文|https://www.cnblogs.com/shr060414/p/18440575|......
  • 最新版chrome如何下载和安装?附安装包
    前言大家好,我是小徐啊。我们在Java开发应用的时候,经常是需要用到浏览器来帮助我们开发的。而浏览器中,谷歌浏览器chrome当属功能最强大的浏览器。今天小徐就来介绍下如何安装chrome。文末附获取方式。如何安装chrome首先,双击chrome的安装包,开始安装。然后,可以看到,显示正在连接......
  • Crashpad Handler 进程是与 Crashpad 系统相关的一个后台进程,Crashpad 本身是一个 崩
    CrashpadHandler进程CrashpadHandler进程是与Crashpad系统相关的一个后台进程,Crashpad本身是一个崩溃报告和分析工具,广泛用于许多应用程序中,尤其是GoogleChrome、Electron等浏览器和桌面应用程序。Crashpad的作用和工作原理:Crashpad 主要用于捕捉应用程序崩溃时......
  • 2024-2025-1(20241321)《计算机基础与程序设计》第十二周学习总结
    这个作业属于哪个课程<班级的链接>(2024-2025-1-计算机基础与程序设计)这个作业要求在哪里<作业要求的链接>(2024-2025-1计算机基础与程序设计第十二周作业)这个作业的目标<深刻学习C语言,反思一周学习,温故知新>作业正文...本博客链接https://www.cnblogs.com/guc......
  • 2024-2025-1 20241328 《计算机基础与程序设计》第十二周学习总结
    2024-2025-120241328《计算机基础与程序设计》第十二周学习总结作业信息作业课程2024-2025-1-计算机基础与程序设计作业要求2024-2025-1计算机基础与程序设计第一周作业作业目标无教材学习内容总结《C语言程序设计》第11章知识点总结11.1文件及其重要性......