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

news2024/11/24 13:35:40

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.coloradmin.cn/o/2232453.html

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

相关文章

JAVA设计模式之【建造者模式】

1 定义 建造者模式&#xff08;Builder Pattern&#xff09;使用多个简单的对象一步一步构建成一个复杂的对象。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 2 类图 产品类&#xff08;Product&#xff09;&#xff1a;表示被创建的复杂…

百度如何打造AI原生研发新范式?

&#x1f449;点击即可下载《百度AI原生研发新范式实践》资料 2024年10月23-25日&#xff0c;2024 NJSD技术盛典暨第十届NJSD软件开发者大会、第八届IAS互联网架构大会在南京召开。本届大会邀请了工业界和学术界的专家&#xff0c;优秀的工程师和产品经理&#xff0c;以及其它行…

算法|牛客网华为机试31-40C++

牛客网华为机试 上篇&#xff1a;算法|牛客网华为机试21-30C 文章目录 HJ31 单词倒排HJ32 密码截取HJ33 整数与IP地址间的转换HJ34 图片整理HJ35 蛇形矩阵HJ36 字符串加密HJ37 统计每个月兔子的总数HJ38 求小球落地5次后所经历的路程和第5次反弹的高度HJ39 判断两个IP是否属于同…

UI自动化测试 —— CSS元素定位实践!

前言 自动化测试元素定位是指在自动化测试过程中&#xff0c;通过特定的方法或策略来准确识别和定位页面上的元素&#xff0c;以便对这些元素进行进一步的操作或断言。这些元素可以是文本框、按钮、链接、图片等HTML页面上的任何可见或不可见的组件。 在自动化测试中&#xf…

【实战篇】requests库 - 有道云翻译爬虫 【附:代理IP的使用】

目录 〇、引言一、目标二、请求参数分析三、响应分析四、编写爬虫脚本【隧道代理的使用】 〇、引言 无论是学习工作、旅游出行、跨境电商、日常交流以及一些专业领域都离不开翻译工具的支持。本文就带大家通过爬虫的方式开发一款属于自己的翻译工具~ 一、目标 如下的翻译接口…

Spring框架的声明式事务

目录 一.配置文件的方式 1.配置文件 2.业务层 3.持久层 4.测试类 5.运行 6.查看数据库 7.出现异常运行 二.半注解的方式 1.配置文件 2.db.properties 3.持久层 4.业务层 5.测试类 6.运行 7.查看数据库 8.加上异常 三.纯注解的方式 1.持久层 2.业务层 3.配置…

电脑开机显示无信号然后黑屏怎么办?

当我们打开电脑时&#xff0c;遇到电脑屏幕出现了无信号并且黑屏&#xff0c;常常会让我们感到困扰。很多朋友都会遇到显示器无信号的情况&#xff0c;其实这种故障是很好解决的&#xff0c;但是电脑小白&#xff0c;并不知道电脑屏幕显示无信号然后黑屏了要怎么去修复。不用担…

Ubuntu-22.04 虚拟机安装

1. Ubuntu安装方式 1.1. 基于物理介质安装 光盘安装&#xff1a;通过将 Ubuntu 镜像刻录到光盘&#xff0c;在计算机 BIOS/UEFI 中设置光盘为第一启动项&#xff0c;然后按照安装程序的提示进行语言选择、分区、用户信息设置等操作来完成安装。这种方式需要有光盘刻录设备和空…

51c~Pytorch~合集3

我自己的原文哦~ https://blog.51cto.com/whaosoft/12320861 一、pytorch开发基础相关 首先 PyTorch 的安装可以根据官方文档进行操作&#xff1a;&#xff08;根据自己cuda版本不同 安装版本也不太一样啊 自己注意&#xff09; ​​https://pytorch.org/​​ pip install…

vue3.5+版本 defineProps响应式解构,保留数据响应式

正确写法&#xff1a;直接通过 defineProps 结构可以保留响应式 let {num:numNew} defineProps({num: {} }) console.log(具有响应式,numNew); 错误写法&#xff1a;这样会丢失响应式 const props defineProps({num: {} }) let {num:numNew} props console.log(会丢失响…

讲讲⾼并发的原则?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲⾼并发的原则&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲⾼并发的原则&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 高并发是指系统在同一时间内能够处理大量请求的能力。要有效地管理…

基于python flask的知乎问答文本分析与情感预测系统

摘要 本项目旨在构建一个基于Python Flask框架的知乎问答文本分析与情感预测系统。该系统的主要功能包括从知乎平台获取问答内容、对文本进行自然语言处理、情感分析以及结果的可视化展示。通过这个系统&#xff0c;用户可以方便地输入特定问题&#xff0c;系统将自动抓取相关…

【连续多届检索,ACM出版】第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024,11月15-17)--冬季主会场

第四届大数据、人工智能与风险管理国际学术会议 (ICBAR 2024)--冬季主会场 2024 4th International Conference on Big Data, Artificial Intelligence and Risk Management 会议官网&#xff1a;www.icbar.net 2024 4th International Conference on Big Data, Artificial I…

HarmonyOS NEXT 应用开发实战(十、从零设计一款个人中心页面详细示例)

随着HarmonyOS的不断发展&#xff0c;越来越多的开发者开始关注这个平台上的应用开发。本篇文章将详细讲解如何从零开始设计一款个人中心页&#xff0c;并在代码中实现其相关功能。 1. 项目结构设计 首先&#xff0c;我们需要设计一个合理的项目结构。我们将个人中心页面分为几…

Socket篇(网络通信)

目录 一、UDP 通信 1. 简介 2. UDP 编程的两个实现类 DatagramSocket DatagramPacket 3. 代码示例 示例一&#xff1a;一发/一收 发送端 接收端 示例二&#xff1a;多发/多收 发送端 接收端 示例三&#xff1a;多发/多收 发送端 接收端一 接收端二 示例四&…

江协科技STM32学习- P31 I2C通信协议

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

Docker部署Portainer CE结合内网穿透实现容器的可视化管理与远程访问

文章目录 前言1. 本地安装Docker2. 本地部署Portainer CE3. 公网远程访问本地Portainer-CE3.1 内网穿透工具安装3.2 创建远程连接公网地址4. 固定Portainer CE公网地址前言 本篇文章介绍如何在Ubuntu中使用docker本地部署Portainer CE可视化管理工具,并结合cpolar实现公网远程…

数据结构之二叉树--前序,中序,后序详解(含源码)

二叉树 二叉树不能轻易用断言&#xff0c;因为树一定有空 二叉树链式结构的实现 在学习二叉树的基本操作前&#xff0c;需先要创建一棵二叉树&#xff0c;然后才能学习其相关的基本操作。 typedef int BTDataType; typedef struct BinaryTreeNode {BTDataType _data;struct B…

数据库条件查询排查——引号故障

一、错误代码 $where_查询职汇总员[$value头[EmpCode]]$value职员[EmpCode]; 二、正常写法 $where_查询职汇总员[EmpCode]$value职员[EmpCode]; 三、原因 前一个是变量嵌套&#xff0c;这里不需要嵌套

前端用docker部署

1、环境检查 首先需要确认服务器上是否已经安装docker了。 在服务器上执行docker -v 显示对应的版本号说明已经安装好了docker 2、部署 使用Docker部署若依项目的前端服务&#xff0c;我们最终实现的是&#xff1a;启动一个镜像&#xff0c;我们的整个前端就启动了&#xf…