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

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

一、性能(Performance)面板改进

1. 性能面板中的配置文件和函数调用现已显示来源和脚本链接

Performance > Summary(性能 > 概览)选项卡现在会显示配置分析(profile)和函数调用相关的脚本及来源链接,这样就不需要再将鼠标悬停在 Main 轨道上的事件上来查看这些信息了。

显示在 Summary 面板中添加来源和脚本链接前后的对比。

此外,当将鼠标悬停在 Network(网络)或 Main(主线程)轨道上的事件时,工具提示中现在还会显示第三方名称。

2. 支持按阶段划分的 LCP字段数据

启用字段数据后,Performance > Insights > LCP by phase(按阶段划分的最大内容绘制)洞察项现在会在额外的表格中显示来自 Chrome 用户体验报告的第 75 百分位图像加载时间,可以直接在该洞察中对比各阶段的加载时间。

3. 网络依赖树洞察项

Performance > Insights(性能 > 洞察)标签页新增了一个名为 Network dependency tree(网络依赖树)的洞察项。该洞察可以知道是否存在串联的关键请求,而这通常是不推荐的。可以将鼠标悬停在洞察项中列出的请求上,它们会在 Network(网络)轨道中被高亮显示。

4. 最重调用栈高亮显示

Performance 面板现在支持将鼠标悬停在 Call tree(调用树)或 Bottom-up > Heaviest stack(自底向上 > 最重调用栈)侧边栏中的项时,在 Main 轨道中高亮显示对应内容,并自动淡化其他内容。这样可以更直观地找到调用栈中耗时最多的嵌套项。

二、Elements 面板中的辅助功能树视图

现在,Elements(元素)面板默认启用了全页辅助功能(Accessibility)树视图。

之前只能在 Elements > Accessibility 标签页中浏览一个独立的辅助功能树。现在,可以点击 DOM 树右上角的 "辅助功能树视图切换" 按钮(图标为 accessibility_new),在 DOM 树与全页辅助功能树之间自由切换,方便同时查看两者及其对应关系。

启用默认的辅助功能树视图前后的界面差异也被展示了出来。

辅助功能树允许检查辅助技术(如屏幕阅读器)如何感知页面内容,并显示每个 DOM 节点的 ARIA 属性及其计算后的辅助功能属性。

三、多个面板的空状态优化

针对多个面板、区域和标签页在"空状态"(即无内容显示)下的界面进行了优化,能够更清楚地知道接下来该做什么来开始使用它们。

例如,Network(网络)面板中的空状态现在新增了实用按钮,如"重新加载页面"(Reload page),快速触发网络活动,开始调试。

四、Ask AI 选项移至菜单底部

Ask AI(询问 AI)选项现在已从下拉菜单的顶部移到了菜单的底部,更符合用户的操作习惯和界面布局逻辑。

五、Lighthouse 升级至 12.4.0

Lighthouse 面板现已升级为 Lighthouse 12.4.0 版本。

在此版本中,一些性能审计项在通过条件下会被标记为"信息性(informative)",而不再隐藏在"已通过的审计"列表中,更全面地了解页面表现。

六、其他

  • 性能 > Summary:将原来的"两行 Total time 与 Self time"合并为"一行 Duration",若有自耗时则会以括号形式显示(例如 Duration (self: 12ms)),简化展示信息
  • Issues 面板 :新增两种问题类型支持:
    • <select> 元素在辅助功能树中的相关问题;
    • 网络服务中解析或校验时发生的 SRI 消息签名错误
  • 辅助功能(Accessibility):使用键盘导航在 Elements > Styles 中逐步查看元素时,当前元素现在会有可视化描边提示
  • Elements 面板:与 <select> 元素相关的问题现在会被高亮标出,显示为波浪下划线
  • Network 面板:覆盖提示点(override dot)和 Cookie 警告图标的位置从标签左侧移到了右侧,使界面更整洁

Chrome 135

引用

相关推荐
qq_3863226928 分钟前
华为网路设备学习-32(BGP协议 七)路由反射器与联邦
网络·学习
兰雪簪轩3 小时前
分布式通信平台测试报告
开发语言·网络·c++·网络协议·测试报告
fuyongliang1234 小时前
linux Nginx服务配置介绍,和配置流程
运维·服务器·网络
GEO_YScsn5 小时前
Rust 的生命周期与借用检查:安全性深度保障的基石
网络·算法
司徒小夜5 小时前
HTTP与HTTPS杂谈-HTTPS防御了什么
网络·http·https
UNbuff_06 小时前
Linux bzip2 命令使用说明
linux·运维·服务器
小马哥编程6 小时前
DNS解析中的服务器协作机制
服务器·git·github
嫩萝卜头儿6 小时前
虚拟地址空间:从概念到内存管理的底层逻辑
linux·服务器·网络
LJC_Superman7 小时前
Web与Nginx网站服务
运维·服务器·前端·网络·数据库·nginx·vim
proware7 小时前
昇腾310i Pro固件说明
linux·运维·服务器