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

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

一、网络(Network)面板更新

1. 重新定义网络过滤器

网络面板获新增了一些过滤条件,这些过滤条件是根据反馈重新设计的,特定于类型的过滤条件保持不变,即在简洁的多选栏中显示一组标记。

可以通过 Cmd/Ctrl 键 + 点击来多选类型过滤条件。

为了简化界面,我们将与隐藏、屏蔽和第三方相关的复选框移到了下拉列表下方。该列表包含一个数字,表示下拉菜单下已选中的过滤条件数量。

如需恢复旧版过滤器设计,到 Settings > Experiments > Redesign of the filter bar in the Network panel,然后清除该复选框。

设置 > 实验 > “网络”面板中的过滤器栏重新设计

2. HAR 导出内容现在默认会排除敏感数据

为降低敏感信息意外泄露的几率,默认情况下,以 HAR 格式导出的网络日志将不再包含 CookieSet-CookieAuthorization 标头。

如需以 HAR 格式导出包含敏感数据的日志,到 Settings > Preferences > Network > Allow to generate HAR with sensitive data,然后将其开启。网络面板会用箭头标记下载 导出按钮。长按该按钮,然后从下拉菜单中选择导出 HAR(含敏感数据)。

设置 > 偏好设置 > 网络 > 允许生成包含敏感数据的 HAR

二、元素(Elements)面板更新

1. text-emphasis-* 属性的自动补全值

Styles 标签页中的自动补全功能会针对以下 CSS 属性提供值建议:

  • text-emphasis 简写形式
  • text-emphasis-style
  • text-emphasis-color
  • text-emphasis-position

2. 为 overflow scroll 增加标记

元素面板现在会使用新的“滚动”标记标记包含溢出内容且具有 overflow: scrolloverflow: auto 的元素,以便您轻松发现滚动溢出。与其他标志一样,此标志可反映当前 DOM,并且如果内容因大小变化等原因而停止溢出,此标志就会消失。

3. 嵌套规则后面的裸声明不会‘上移’

CSS 工作组决定允许裸声明位于嵌套规则之后后,样式标签页现在不会在解析过程中“上移”这些声明。

在以下代码示例中,嵌套规则后面的裸声明现在不会导致 Chrome 对级联中的样式进行意外重新排序:

p {width: 100px;height: 100px;@media screen {background-color: red;}background-color: green;
}

三、性能(Performance)面板更新

1. 实时指标中的建议

实时指标(metrics)现在可以提供特定于指标的建议,帮助您尽可能接近用户体验来配置开发环境。

2. 面包屑导航

可以在效果录制的时间轴中浏览面包屑导航:在面包屑导航之间来回“跳转”,覆盖子面包屑导航,以及移除多个子导航。

chromedev130_7.mp4

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

四、内存(Memory)面板更新

1. 增加 Detached elements

内存面板新增了分离元素(Detached elements )这一配置文件类型。它显示了由 JavaScript 引用保留的对象。

2. 改进了纯 JS 对象的命名

为了整理和清理堆快照中的 Object 类别,现在的普通 JavaScript 对象如下所示:

  • 根据它们包含的属性命名,例如 {firstProperty, secondProperty, ..., *nthProperty}
  • 可通过开发者工具构造的这些名称进行搜索。
  • 如果它们具有相同的属性,则将其归为一组。

五、关闭动态主题

可以关闭开发者工具颜色与 Chrome 中的自定义主题颜色的自动匹配功能。

要关闭动态主题,清除 Settings > Preferences > Appearance > Match Chrome color scheme ,并重新加载开发者工具。

设置 >偏好设置 >外观 > 匹配 Chrome 配色方案

六、进程共享

通常,当你从同一个网站(如 Google Docs)打开多个标签页时,Chrome 会为每个标签页创建一个单独的渲染进程。进程共享实验通过允许多个标签页共享同一个渲染进程来改善性能。

如果你在打开 DevTools 时看到消息‘该标签页与其他标签页共享资源…’的信息条,则说明你属于启用了进程共享实验的小组。

进程共享可能会影响断点调试和性能分析。

1. 对开发者体验的影响

由于标签页可能会共享一个进程(及其主线程),因此会对调试和性能分析产生两个影响:

断点调试。如果您在一个标签页中暂停调试程序,可能会影响共享进程的其他程序。您会看到“调试程序已在另一个标签页中暂停,点击可切换到该标签页”警告。

性能分析。堆快照和性能记录可能会捕获来自多个标签页的数据,这会使结果更难解读。

2. 启用

如需明确测试新实验功能,请使用以下命令行标志启动 Chrome:

--enable-features=ProcessPerSiteUpToMainFrameThreshold:ProcessPerSiteMainFrameThreshold/20 -disable-features=ProcessPerSiteSkipDevtoolsUsers,ProcessPerSiteSkipEnterpriseUsers

3. 停用

  1. 您可以点击警告中的选择停用按钮,手动选择停用。
  2. 使用 Chrome 标志设置(chrome://flags/#enable-process-per-site-up-to-main-frame-threshold)禁用启用每个网站的主框架阈值实验。

七、Lighthouse 面板更新

Lighthouse 面板现在运行 Lighthouse 12.2.1。

此更新引入了针对资源压缩建议的 < 20 KB 忽略阈值,可帮助您仅专注于可显著缩减文件大小的建议。

更新日志

八、其他更新

  • 元素
    • 修复了编辑嵌套 CSS 的多个问题(41486635、361477264、328263458、41487826)。
    • 修复了将已定义但空值的自定义属性解析为未定义的问题 (365578428)。
  • 控制台:修复了 cURL 命令中多行字符串的非转义与号 (352651673)。
  • 内存:修复了包含服务工件的网页上的默认选择,现在选择了主线程 (40669896)。
  • 安全:随着源的安全阶段变化,URL 方案高亮现在能够正确更新(359920086)。

引用

  • What’s new in DevTools, Chrome 130

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java之包,抽象类,接口

目录 包 导入包 静态导入 将类放入包 常见的系统包 抽象类 语法规则 注意事项&#xff1a; 抽象类的作用 接口 实现多个接口 接口间的继承 接口使用实例 &#xff08;法一&#xff09;实现Comparable接口的compareTo()方法 &#xff08;法二&#xff09;实现Comp…

【linux】HTTPS 协议原理

1. 了解 HTTPS 协议原理 &#xff08;一&#xff09;认识 HTTPS HTTPS 也是一种应用层协议&#xff0c;是在 HTTP 协议的基础上引入了一个加密层 因为 HTTP协议的内容都是按照文本的方式进行传输的&#xff0c;这个过程中&#xff0c;可能会出现一些篡改的情况 &#xff08;…

sql server 文件备份恢复

备份情况 在备份 lys_log_1324.bak 日志文件前&#xff0c;删除table_1表 现在恢复文件 恢复文件&#xff08;使用norecovery&#xff09; RESTORE DATABASE [lys] FILE Nlys, FILE Nlys_02 FROM DISK ND:\liyuanshuai\lys_filegroup.bak WITH FILE 1, NORECOVERY, …

Docker-安装

操作系统&#xff1a;Ubuntu 20.04.6 LTS 更新apt sudo apt update 删除旧版本docker sudo apt-get remove docker docker-engine docker.io 安装docker sudo apt install docker.io 查看docker版本 docker --version 启动docker 启动docker sudo systemctl start docker 启用…

CM API方式设置YARN队列资源

简述 对于CDH版本我们可以参考Fayson的文章,本次是CDP7.1.7 CM7.4.4 ,下面只演示一个设置队列容量百分比的示例,其他请参考cloudera官网。 获取cookies文件 生成cookies.txt文件 curl -i -k -v -c cookies.txt -u admin:admin http://192.168.242.100:7180/api/v44/clusters …

Openlayers高级交互(18/20):根据feature,将图形适配到最可视化窗口

本示例的目的是介绍如何在vue+openlayers中使用extent,使用feature fit的方式来适配窗口。当加载到页面上几个图形要充分展示在窗口的时候,可以用这种方式来平铺到页面中。 效果图 专栏名称内容介绍Openlayers基础实战 (72篇)专栏提供73篇文章,为小白群体提供基础知识及示…

鸿蒙HarmonyOS开发:给应用添加基础类型通知和进度条类型通知(API 12)

文章目录 一、通知介绍1、通知表现形式2、通知结构3、请求通知授权 二、创建通知1、发布基础类型通知2、发布进度类型通知3、更新通知4、移除通知 三、设置通知通道1、通知通道类型 四、创建通知组五、为通知添加行为意图1、导入模块。2、创建WantAgentInfo信息。4、创建WantAg…

Armv8的安全启动

目录 1. Trust Firmware 2. TF-A启动流程 3. TF-M启动流程 3.1 BL1 3.2 BL2 4.小结 在之前汽车信息安全 -- 再谈车规MCU的安全启动文章里&#xff0c;我们详细描述了TC3xx 、RH850、NXPS32K3的安全启动流程&#xff0c;而在车控类ECU中&#xff0c;我们也基本按照这个流程…

CAN总线学习笔记(1、CAN总线定义)

CAN总线学习笔记&#xff08;1、CAN总线定义&#xff09; 江协科技CAN总线入门教程视频学习笔记 CAN特性 两根通信线&#xff08;CAN_H\CAN_L&#xff09;,两根线&#xff0c;无需工地 差分信号&#xff0c;抗干扰能力强 高速CAN&#xff08;ISO11898&#xff09;&#xff…

【算法】【优选算法】双指针(下)

目录 一、611.有效三⻆形的个数1.1 左右指针解法1.2 暴力解法 二、LCR 179.查找总价格为目标值的两个商品2.1 左右指针解法2.2 暴力解法 三、15.三数之和3.1 左右指针解法3.2 暴力解法 四、18.四数之和4.1 左右指针解法4.2 暴力解法 一、611.有效三⻆形的个数 题目链接&#x…

Docker 镜像体积优化实践:从基础镜像重建到层压缩的全流程指南

​ 由于最近在发布的时候发现docker镜像体积变得越来越大&#xff0c;导致整个打包发布流程变得非常耗时了。所以又接到一个差事&#xff0c;优化最终镜像体积。顺便也记录一下docker镜像体积优化的一些步骤。 大概步骤可以分为以下几个步骤&#xff1a; 重做基础镜像&#x…

路径规划 | ROS中多个路径规划算法可视化与性能对比分析

目录 0 专栏介绍1 引言2 禁用局部规划器3 路径规划定性对比实验3.1 加载路径规划器和可视化插件3.2 设置起点和终点3.3 选择规划器规划3.4 不同规划器对比3.5 路径保存和加载 4 路径规划定量对比实验4.1 计算规划耗时4.2 计算规划长度4.3 计算拓展节点数4.4 计算路径曲率4.5 计…

十四届蓝桥杯STEMA考试Python真题试卷第二套第五题

来源:十四届蓝桥杯STEMA考试Python真题试卷第二套编程第五题 本题属于迷宫类问题,适合用DFS算法解决,解析中给出了Python中 map() 和列表推导式的应用技巧。最后介绍了DFS算法的两种常见实现方式——递归实现、栈实现,应用场景——迷宫类问题、图的连通性、树的遍历、拓朴排…

【CSS】——基础入门常见操作

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 一&#xff1a;CSS引入 二&#xff1a;CSS对元素进行美化 1&#xff1a;style修饰 2&#xff1a;选…

RV1126-SDK学习之OSD实现原理

RV1126-SDK学习之OSD实现原理 前言 本文简单记录一下我在学习RV1126的SDK当中OSD绘制的原理的过程。 在学习OSD的过程当中&#xff0c;可能需要补充的基础知识&#xff1a; OSD是什么&#xff1f; BMP图像文件格式大致组成&#xff1f; 图像调色&#xff08;Palette&#…

Vehicle OS软件平台解决方案

在智能汽车快速迭代的趋势之下&#xff0c;广义操作系统Vehicle OS应运而生&#xff0c;针对应用软件开发周期缩短和底层硬件迭代速度加快的背景&#xff0c;Vehicle OS将应用软件开发和底层硬件迭代解耦。它降低了迭代工作量并节约成本&#xff0c;用标准化的接口来助力软件定…

Chromium Mojo(IPC)进程通信演示 c++(1)

网上搜索关于mojo教程 多数都是理论 加上翻译谷歌mojo文档的&#xff0c;但是如何自定义两个进程使用mojo通信呢&#xff1f;看下面的完整例子介绍&#xff1a;&#xff08;本人也是参考谷歌代码例子改编而成&#xff09; 本文演示了client.exe和service.exe 通过mojo::Incomin…

sparkSQL面试题

一、查询所有数学课程成绩大于语文课程成绩的学生学号 数据 1,yuwen,43 1,shuxue,55 2,yuwen,77 2,shuxue,88 3,yuwen,98 3,shuxue,65 3,yingyu,88 基本步骤&#xff1a; 进行行转列比较语文与数学的成绩 SQL代码&#xff1a; with t1 as(SELECT id,sum(if(name yuwen,sc…

算法|牛客网华为机试21-30C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试10-20C 文章目录 HJ21 简单密码HJ22 汽水瓶HJ23 删除字符串中出现次数最少的字符HJ24 合唱队HJ25 数据分类处理HJ26 字符串排序HJ27 查找兄弟单词HJ28 素数伴侣HJ29 字符串加解密HJ30 字符串合并处理 HJ21 简单密码 题目描…

浅谈QT中Tab键的切换逻辑

浅谈QT中Tab键的切换逻辑 无意中发现在输入界面中按下Tab键时&#xff0c;没有按照预想的顺序切换焦点事件&#xff0c;如下图所示 这个现象还是很有趣&#xff0c;仔细观察了下&#xff0c;默认的切换顺序是按照控件拖入顺序&#xff0c;那么知道了这个问题想要解决起来就很简…