当前位置: 首页 > news >正文

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 面板现在允许仿真 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

  • 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

相关文章:

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

Chrome 132 版本开发者工具(DevTools)更新内容 一、使用 Gemini 调试 Network、Source 和 Performance Chrome 131 可以使用 Gemini 调试 CSS,现在可以调试更多模块了 与元素面板中的右键菜单类似,要打开 AI 辅助面板并开始与 …...

使用Python从阿里云物联网平台获取STM32温度数据

在物联网(IoT)应用中,设备数据的采集与监控至关重要。本文将详细介绍如何使用Python从阿里云物联网平台获取STM32设备的温度数据。我们将从已有的Java代码出发,逐步将其转换为Python,并处理在过程中遇到的问题&#xf…...

Spring Boot 声明式事务

Spring Boot中的声明式事务管理主要通过Transactional注解来实现。以下是Transactional注解的一些关键用法和特性: 1. 启用事务管理 在Spring Boot应用中使用Transactional注解之前,需要在启动类或者配置类上添加EnableTransactionManagement注解来启用事…...

websocket 局域网 webrtc 一对一 多对多 视频通话 的示例

基本介绍 WebRTC(Web Real-Time Communications)是一项实时通讯技术,它允许网络应用或者站点,在不借助中间媒介的情况下,建立浏览器之间点对点(Peer-to-Peer)的连接,实现视频流和&am…...

uniapp-微信小程序调用摄像头

1.uniapp中的index.vue代码 <template><view class"content"><view class"container"><!-- 摄像头组件 --><camera id"camera" device-position"front" flash"off" binderror"onCameraErr…...

鸿蒙学习笔记:用户登录界面

文章目录 1. 提出任务2. 完成任务2.1 创建鸿蒙项目2.2 准备图片资源2.3 编写首页代码2.4 启动应用 3. 实战小结 1. 提出任务 本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素&#xff1a;一张图片增添视觉感&#xff0c;两个分别用于账号与密码的文本输入框&#…...

无人机航测系统技术特点!

一、无人机航测系统的设计逻辑 无人机航测系统的设计逻辑主要围绕实现高效、准确、安全的航空摄影测量展开。其设计目标是通过无人机搭载相机和传感器&#xff0c;利用先进的飞行控制系统和数据处理技术&#xff0c;实现对地表信息的全方位、高精度获取。 需求分析&#xff1…...

《算法ZUC》题目

判断题 ZUC算法LFSR部分产生的二元序列具有很低的线性复杂度。 A.正确 B.错误 正确答案A 单项选择题 ZUC算法驱动部分LFSR的抽头位置不包括&#xff08; &#xff09;。 A.s15 B.s10 C.s7 D.s0 正确答案C 单项选择题 ZUC算法比特重组BR层主要使用了软件实现友好的…...

配置flutter 解决andriod studio报错 no device selected

flutter配置好后 明明下载好了模拟器 但是在andriod studio 找不到设备 显示no devices 这个时候需要我们配置一下flutter关联的android sdk的路径和文件夹 就可以解决了 flutter config --android-sdk 自己android studio的路径 这样配置就可以解决了~...

docker搭建Redis集群及哨兵(windows10环境,OSS Cluster)

一、基本概念 Redis:即 "Remote DIctionary Server" &#xff0c;翻译为“远程字典服务器”。从字面意义上讲&#xff0c;它指的是一个远程的字典服务&#xff0c;意味着它是一个可以远程访问的服务&#xff0c;主要用于存储键值对&#xff08;key-value pairs&…...

信息化基础知识——数字政府(山东省大数据职称考试)

大数据分析应用-初级 第一部分 基础知识 一、大数据法律法规、政策文件、相关标准 二、计算机基础知识 三、信息化基础知识 四、密码学 五、大数据安全 六、数据库系统 七、数据仓库. 第二部分 专业知识 一、大数据技术与应用 二、大数据分析模型 三、数据科学 数字政府 大数…...

信息安全实训室网络攻防靶场实战核心平台解决方案

一、引言 网络安全靶场&#xff0c;作为一种融合了虚拟与现实环境的综合性平台&#xff0c;专为基础设施、应用程序及物理系统等目标设计&#xff0c;旨在向系统用户提供全方位的安全服务&#xff0c;涵盖教学、研究、训练及测试等多个维度。随着网络空间对抗态势的日益复杂化…...

Nginx主要知识点总结

1下载nginx 到nginx官网nginx: download下载nginx&#xff0c;然后解压压缩包 然后双击nginx.exe就可以启动nginx 2启动nginx 然后在浏览器的网址处输入localhost&#xff0c;进入如下页面说明nginx启动成功 3了解nginx的配置文件 4熟悉nginx的基本配置和常用操作 Nginx 常…...

PySide6程序框架设计

pyside6有一个优点自动适配高分辨ui pyqt5需要自己写这部分逻辑 1、主程序代码 DINGSHI01Main.py # -*- coding: utf-8 -*- import sys,time,copy from PySide6.QtWidgets import QWidget,QApplication from PySide6.QtCore import Qt from PySide6 import QtCore, QtGui, Q…...

「九」HarmonyOS 5 端云一体化实战项目——「M.U.」应用云侧开发云数据库

1 立意背景 M. 代表 “我”&#xff0c;U. 代表 “你”&#xff0c;这是一款用于记录情侣从相识、相知、相恋、见家长、订婚直至结婚等各个阶段美好记忆留存的应用程序。它旨在为情侣们提供一个专属的空间&#xff0c;让他们能够将一路走来的点点滴滴&#xff0c;如初次相遇时…...

记录:virt-manager配置Ubuntu arm虚拟机

virt-manager&#xff08;Virtual Machine Manager&#xff09;是一个图形用户界面应用程序&#xff0c;通过libvirt管理虚拟机&#xff08;即作为libvirt的图形前端&#xff09; 因为要在Linux arm环境做测试&#xff0c;记录下virt-manager配置arm虚拟机的过程 先在VMWare中…...

clickhouse-介绍、安装、数据类型、sql

1、介绍 ClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库&#xff08;DBMS&#xff09;&#xff0c;使用C语言编写&#xff0c;主要用于在线分析处理查询&#xff08;OLAP&#xff09;&#xff0c;能够使用SQL查询实时生成分析数据报告。 OLAP&#xff08;On-Line A…...

【shell】常用100个shell命令使用讲解

【shell】常用100个shell命令使用讲解 【一】文件操作命令【二】搜索命令【三】目录操作命令【四】权限操作命令【五】网络操作命令【六】进程和系统控制命令【七】文本操作命令【八】压缩与解压命令【九】磁盘使用管理命令【十】包管理命令【十一】进程管理命令【十二】环境变…...

Git-分支(branch)常用命令

分支 我们在做项目开发的时候&#xff0c;无论是软件项目还是其他机械工程项目&#xff0c;我们为了提高效率以及合理的节省时间等等原因&#xff0c;现在都不再是线性进行&#xff0c;而是将一个项目抽离出诸进行线&#xff0c;每一条线在git中我们就叫做分支&#xff0c;bran…...

谈谈es6 Map 函数

发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【宝藏入口】。 Map 是 ES6 中引入的一种新的数据结构&#xff0c;它类似于对象&#xff08;Object&#xff09;&#xff0c;但与对象相比&#…...

阿博图书馆管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】

&#x1f4a1;实话实说&#xff1a;用最专业的技术、最实惠的价格、最真诚的态度服务大家。无论最终合作与否&#xff0c;咱们都是朋友&#xff0c;能帮的地方我绝不含糊。买卖不成仁义在&#xff0c;这就是我的做人原则。摘要 在信息化时代背景下&#xff0c;图书馆作为知识传…...

环境科研必备:从入门到精通:大气颗粒物PMF源解析技术全案解析(含软件实操)

在大气环境科研领域&#xff0c;源解析是精准治污的“眼睛”。而在众多源解析方法中&#xff0c;PMF&#xff08;正定矩阵因子分解&#xff09;模型因其无需先验信息、结果物理意义明确等优势&#xff0c;成为了科研人员手中的“金标准”。然而&#xff0c;很多同学在实操中常常…...

利用快马平台快速构建403 forbidden错误演示原型,直观理解HTTP权限状态

今天在调试一个前端项目时&#xff0c;遇到了403 forbidden错误&#xff0c;突然想到可以做个简单的演示原型来帮助团队新人理解这个常见的HTTP状态码。正好最近在用InsCode(快马)平台做各种小demo&#xff0c;发现它特别适合快速搭建这类教学演示项目。 理解403状态码的核心场…...

千问3.5-9B提示词工程:优化OpenClaw任务拆解质量

千问3.5-9B提示词工程&#xff1a;优化OpenClaw任务拆解质量 1. 为什么需要优化提示词 去年冬天第一次用OpenClaw自动整理会议纪要时&#xff0c;我被它的"耿直"气笑了——让它"提取关键结论"&#xff0c;结果给我返回了整段录音的文字版&#xff0c;连&…...

快速验证限流策略:用快马一键生成rate limit exceeded处理原型

快速验证限流策略&#xff1a;用快马一键生成rate limit exceeded处理原型 最近在开发一个需要调用第三方API的项目时&#xff0c;遇到了经典的"rate limit exceeded"问题。作为开发者我们都知道&#xff0c;API调用频率超限是系统设计中必须考虑的场景。传统从零搭…...

青铜器RDM研发管理平台

我们深耕研发管理服务20余年&#xff0c;依托 10 余年研发管理实战经验&#xff0c;累计为超 10000 家企业提供专业培训、为200 余家企业深度咨询&#xff0c;打造完全自主知识产权的研发管理数字化平台 —— 青铜器 RDM。以 IPD、CMMI、Scrum、PMBOK 等业界最佳实践为内核&…...

工业机器人嵌入式系统建模与自动化工具项目三基于RAPID指令的故障排查与项目实施

目录 一、 项目背景与研发目标 1.1 项目研发背景 1.2 项目核心目标 二、 项目全周期进展 2.1 需求分析与环境搭建阶段&#xff08;完成度100%&#xff09; 2.2 核心模块编码开发阶段&#xff08;完成度100%&#xff09; 2.3 功能调试阶段&#xff08;核心故障爆发…...

3分钟搞定Windows软件安装难题:winget-install终极解决方案

3分钟搞定Windows软件安装难题&#xff1a;winget-install终极解决方案 【免费下载链接】winget-install Install WinGet using PowerShell! Prerequisites automatically installed. Works on Windows 10/11 and Server 2019/2022. 项目地址: https://gitcode.com/gh_mirror…...

Glide框架在Java中的高效集成与动图加载实践

1. 为什么选择Glide处理Java项目中的动图加载 第一次在Android项目里遇到动图加载需求时&#xff0c;我试过用原生ImageView逐帧解析&#xff0c;结果内存直接爆了。后来发现Glide这个宝藏框架&#xff0c;它就像个智能的动图管家&#xff0c;把复杂的解码、内存管理、缓存优化…...

3步突破Navicat试用期限制:让数据库管理工具持续为你服务

3步突破Navicat试用期限制&#xff1a;让数据库管理工具持续为你服务 【免费下载链接】navicat_reset_mac navicat16 mac版无限重置试用期脚本 项目地址: https://gitcode.com/gh_mirrors/na/navicat_reset_mac 作为数据库开发者的日常伴侣&#xff0c;Navicat以其直观的…...