Chrome 浏览器 131 版本开发者工具(DevTools)更新内容

Chrome 浏览器 131 版本开发者工具(DevTools)更新内容

一、使用 Gemini 调试 CSS

Chrome DevTools 现在推出了一个新的实验性 AI 辅助面板,可以与 Gemini 聊天并获得帮助来调试 CSS。

在 Elements 面板中,右键点击一个元素并选择 Ask AI,或者点击该元素旁边的对应按钮,DevTools 会打开新的 AI 辅助面板。

1. 在专用设置标签中控制 AI 功能

可以在一个地方管理所有 AI 功能:新的 设置 > AI 创新 标签

Settings > AI innovations.

2. 控制台洞察功能一键开启

DevTools 现在不再需要开启设置同步才能使用 AI 功能。因此,之前发布的控制台洞察功能和用于样式调试的 AI 辅助功能,只需一键即可访问。

二、性能(Performance)面板改进

1. 注释并分享性能分析结果

Performance 面板新增了一个 Annotations 标签,位于左侧可展开的侧边栏中,简化了在追踪分析和共享性能结果时创建注释的过程。

可以直接在追踪中标注事件、连接事件并使用箭头指示关系,还可以突出显示时间范围。完成注释后,可以保存、分享并将注释后的追踪文件重新上传回 Performance 面板,方便与他人协作和进一步分析。

2. 在性能面板中获取性能数据分析

可以在 Performance 面板的左侧新 Insights 标签中发现可操作的性能分析。该标签整合了来自 Lighthouse 报告和即将废弃的 Performance insights 面板的信息。

Insights 标签旨在提供引导式分析,并建议有关性能问题的可操作见解,这些问题可能会导致网站变慢。

要利用这些分析,打开 Performance 面板左侧的 Insights 标签,展开不同的类别,悬停并点击项目,Performance 面板会在追踪中高亮显示对应的事件。

https://developer.chrome.com/static/blog/new-in-devtools-131/video/insights-tab.mp4

chrome131.mp4

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3. 更轻松的发现过度布局偏移

Layout shifts 跟踪功能进行了全新改进。现在,布局偏移会使用(更加明显的)紫色菱形标记,并根据其在时间轴上的相对位置进行分组。这些布局偏移及其分组会在 Summary 标签中以表格形式展示,提供时间、得分、涉及的元素以及可能的原因。

这一改进使得开发者能够更加直观和高效地识别布局偏移,进而优化页面性能。

实时指标视图新增了 Layout shifts 日志,显示了布局偏移的得分和涉及的元素,位于 Interactions 标签旁边。

4. 轻松识别非合成动画

Animations 跟踪现在提供关于非合成动画的有用信息:

  • 根据相应的 CSS 属性命名动画。
  • 使用红色三角形标记非合成动画。
  • Summary 标签中显示合成失败的原因。

这些改进有助于开发者识别和优化那些未被有效合成的动画,提升动画的性能表现。

5. 硬件并发设置移至 Sensors 面板

硬件并发 设置从 Performance 面板移到了更合适的位置 —— Sensors 面板。

这一调整使得硬件并发设置与其他硬件相关的监控和传感器信息更加集中,方便开发者进行管理和调试。

三、忽略匿名脚本,专注于代码堆栈跟踪

Console 中的堆栈跟踪可以正确地检测、忽略、折叠并(在展开时)灰掉来自忽略列表文件的堆栈帧。之前,它没有在展开的堆栈跟踪中灰掉函数名称。

可以通过在 设置 > 忽略列表 > 匿名脚本(来自 eval 或控制台)来启用新的设置,使 DevTools 忽略没有源 URL 的匿名脚本。

Settings > Ignore list > Anonymous scripts from eval or console

这项改进有助于减少堆栈跟踪中的噪音,使开发者可以更专注于自己代码中的问题。

四、Elements > Styles: 支持 sideways-* 排版模式的网格叠加和 CSS-wide 关键字

1. 在 Elements > Styles 标签中,现已支持以下功能:

网格叠加 在视口中显示 sideways-rl 和 sideways-lr 排版模式的网格。

2. 解析 CSS-wide 关键字

解析 CSS-wide 关键字,这意味着例如,如果 inherit 是颜色属性,Styles 标签将会在其旁边显示一个颜色选择器。

五、Lighthouse 审计支持非 HTTP 页面(在时间跨度和快照模式下)

Lighthouse 现在可以在 时间跨度快照模式 下为 非 HTTP 页面 生成报告。

六、无障碍

  • Sources > Editor 中,可以通过聚焦在 X 按钮上并按下 EnterSpace 键来关闭打开的标签页。
  • Performance 中,可以选择追踪中的条目并按 Space 打开上下文菜单。
  • Performance 中,左侧边栏的 Insights 标签已支持键盘访问,可以通过 Tab 键进行切换。

这些改进提高了无障碍性,帮助开发者更便捷地使用 DevTools 进行调试和分析。

七、其他

  • 性能和网络面板:节流设置现在可以正确同步
  • 应用程序 > 后台服务 > 推测加载 > 规则:现在有一个类似于 Sources > Editor 中的 {} 美化按钮
  • 实时表达式:选择自动完成选项后,按 Tab 键现在会退出编辑字段,而不是缩进文本
  • 元素 > 样式:anchor() 和 anchor-size() 支持新的语法,可以重新排序参数并省略 anchor-size() 方向
  • 网络:修复了 GraphQL 预览问题
  • 性能:现在报告加载和处理追踪的增量进度。
  • WebAuthn:现在动态更新通过 signal* 方法修改的凭据
  • WebAssembly:控制台中现在会警告,如果有多个调试符号可用于 WebAssembly 模块,并告知正在使用的符号
  • 核心 Web Vitals:已从 Rendering 面板中移除 Core Web Vitals 覆盖层
  • 生成性 AI 功能:现在不再需要 Chrome 设置同步即可使用。

大纲

Chrome 131

  • Debug CSS with Gemini
  • Control AI features in a dedicated settings tab
  • Performance panel improvements
  • Annotate and share performance findings
  • Get performance insights right in the Performance panel
  • Spot excessive layout shifts easier
  • Spot the non-composited animations
  • Hardware concurrency moves to Sensors
  • Ignore anonymous scripts and focus on your code in stack traces
  • Elements > Styles: Support for sideways-* writing modes for grid overlays and CSS-wide keywords
  • Lighthouse audits for non-HTTP pages in timespan and snapshot modes
  • Accessibility improvements
  • Miscellaneous highlights

引用

  • What’s new in DevTools

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/20425.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Ubuntu20.04 Rk3588 交叉编译ffmpeg7.0

firefly 公司出的rk3588的设备,其中已经安装了gcc 交叉编译工具,系统版本是Ubuntu20.04。 使用Ubuntu20.04 交叉编译ffmpeg_ubuntu下配置ffmpeg交叉编译器为arm-linux-gnueabihf-gcc-CSDN博客文章浏览阅读541次。ubuntu20.04 交叉编译ffmpeg_ubuntu下配…

蓝桥杯第22场小白入门赛2~5题

这场比赛开打第二题就理解错意思了,还以为只能用3个消除和5个消除其中一种呢,结果就是死活a不过去,第三题根本读不懂题意,这蓝桥杯的题面我只能说出的是一言难尽啊。。第四题写出来一点但是后来知道是错了,不会正解&am…

sagemaker中使用pytorch框架的DLC训练和部署cifar图像分类任务

参考资料 https://github.com/aws/amazon-sagemaker-examples/blob/main/sagemaker-python-sdk/pytorch_cnn_cifar10/pytorch_local_mode_cifar10.ipynbhttps://sagemaker.readthedocs.io/en/stable/frameworks/pytorch/using_pytorch.html 获取训练数据 # s3://zhaojiew-sa…

golang笔记8-函数

1. 基本函数 package mainimport "fmt"/*什么是函数:完成某一功能的程序指令的集合语法:func 函数名称(形参列表)(返回值类型列表){执行语句。。。返回值列表}注意事项:函数名:函数名首字母大写:可以被本包…

vite+vue3+ts编译vue组件后,编译产物中d.ts文件为空

一、前言 使用vue3vitets实现一个UI组件库,为了生成类型文件便于其他项目引用该组件库。根据推荐使用了vite-plugin-dts插件进行ts文件的生成 二、版本 组件版本vue ^3.5.12 vite ^5.4.10 vite-plugin-dts ^4.3.0 typescript ~5.6.2 三、问题描述 使用vitevi…

向量数据库FAISS之二:基础进阶版

基础 1.评价类型和距离 1.METRIC_L2 Faiss 使用了欧几里得 (L2) 距离的平方,避免了平方根。 这仍然与欧几里德距离一样单调,但如果需要精确距离,则需要结果的额外平方根。 2.METRIC_INNER_PRODUCT 这通常用于推荐系统中的最大内积搜索。…

家庭网络常识:猫与路由器

这张图大家应该不陌生——以前家庭网络的连接方式。 图1 家庭网络连接示意图 来说说猫/光猫: 先看看两者的图片。 图2 猫 图3 光猫 这个东西因为英文叫“modem”,类似中文的“猫”,所以简称“猫”。 猫和光猫的区别就是,一…

华三预赛学习笔记(每日编辑,复习完为止)

知识点分布 路由交换技术基础 计算机网络基本概念 计算机网络基本概念: 很多电脑和设备通过电线或无线信号连在一起,可以互相“说话”和“分享东西” 网络的主要形式和发展历程: 诞生阶段-最早的计算机网络是以单个计算机为中心的联机系统-终…

技术速递|Microsoft.Extensions.VectorData 预览版简介

作者:Luis Quintanilla - 项目经理 排版:Alan Wang 我们很高兴推出 Microsoft.Extensions.VectorData.Abstractions 库,该库现已提供预览版。 正如 Microsoft.Extensions.AI 库为使用 AI 服务提供了一个统一层一样,此包为 .NET 生…

第5章-总体设计 5.3 硬件架构设计

5.3 硬件架构设计 1.哪些类型的产品需要架构设计?2.硬件架构师到底做什么?(1)理解需求和业务模型的情况。(2)背板设计,既需要考虑业务数据交换能力,也需要考虑子模块的管理监控能力。…

图像/文字差异类型验证码识别 无需训练

某像差异在个别全家桶验证方便有使用,对于这种验证码类型如下: 首先还是目标检测,直接用 dddd 自带的detection 就足够了。 特征提取 其次经过观察,差异答案与其他三个无非就是颜色,字体,方向&#xff0c…

新华三H3CNE网络工程师认证—生成树协议

新华三H3CNE网络工程师认证本节讲解生成树协议,关于生成树协议,提到生成树协议,这个时候不得不提到另外一个概念叫二层环路。二层环路导致的原因是交换机的转发机制导致的,本博客将分析这个机制导致这个问题的原因。 文章目录 一…

使用ai工具探究论文的工作流(阅读一个EEG的cnn-lstm文献(2021))

文章目录 李沐老师的方法论第一遍:做海选第二遍:对相关论文进行精选第三遍:重点研读 AI是怎么分析一个文章的标题(Title)和关键词摘要(Abstract)分析引言(Introduction)梳…

Scala的Array习题

答案:CBBBB import scala.collection.mutable.ArrayBuffer //1 case class DreamItem(content:String,var isDone:Boolean,deadline:String,var order:Int) object p5 {def main(args: Array[String]): Unit {//2val dreamListArrayBuffer[DreamItem]()//梦想清单/…

深度学习的实践层面

深度学习的实践层面 设计机器学习应用 在训练神经网络时,超参数选择是一个高度迭代的过程。我们通常从一个初步的模型框架开始,进行编码、运行和测试,通过不断调整优化模型。 数据集一般划分为三部分:训练集、验证集和测试集。常…

TPU-MLIR 总览

TPU-MLIR 总览 💡深度学习编译器可以实现一次性代码开发和重用各种计算能力处理器的目标 ## 项目简介: TPU-MLIR 是 AI 芯片的 TPU 编译器工程。该工程提供了一套完整的工具链, 其可以将不同框架下预训练的神经网络, 转化为可以在算能 TPU 上高效运算的…

Vue3 + Vite 项目引入 Typescript

文章目录 一、TypeScript简介二、TypeScript 开发环境搭建三、编译方式1. 自动编译单个文件2. 自动编译整个项目 四、配置文件1. compilerOptions基本选项严格模式相关选项(启用 strict 后自动包含这些)模块与导入相关选项 2. include 和 excludeinclude…

苹果MacOS 调用自编译opencv的Dylib显示一个图片程序的步骤

前言 为了测试自编译的opencv库是否能在苹果MacOS系统下使用,需要写一个简单的测试程序。这个测试程序写起来不难,麻烦的是一些配置。网上的办法很多,里面因为版本的问题有一些坑。特此写了一个建立步骤,供大家参考。 1、新建一个…

AI赋能:高职院校实验实训教学如何拥抱人工智能浪潮?

随着信息技术的迅猛发展,人工智能技术已成为推动社会各行业转型升级的核心力量。它不仅在提升生产效率、优化管理流程、提高服务质量方面发挥着关键作用,也深刻影响着高职教育的专业发展和课程教学内容的改革。作为培养专业技术技能人才的摇篮&#xff0…

消费者行为学领域的顶级期刊

一、期刊 1.Journal of Consumer Research 2.Journal of Consumer Psychology 3.Journal of Research in Interactive Marketing 4.Journal of the Academy of Marketing Science 5.Tourism Management 下面是我整理的一个excel,大家按需丝我获取。 二、期刊&z…