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 警告图标的位置从标签左侧移到了右侧，使界面更整洁