Chrome 148 的 DevTools 这次主要升级了 4 个方向:

  1. 无障碍调试更完整

  2. 预加载和崩溃排查更方便

  3. 网络请求分析更直观

  4. 对 AI 代理开发支持更多

主要更新

  • 完整无障碍树 现在默认开启,旧版面包屑式视图被移除,切换入口改到侧边栏里。

  • Speculative loads 预加载调试增强了,可以按文本筛选、直接看失败请求状态码,还能看到是不是表单提交触发的。

  • Crash reports 崩溃报告新增上下文信息,方便定位崩溃发生时的页面状态。

  • @container 现在支持仅名称写法,Styles 面板显示也更准确。

  • Styles 面板会自动折叠没有实际生效样式的区块,界面更干净。

  • Network 面板新增 Request # 列,可以看到请求发起顺序,还会根据真实用户数据推荐限速方案。

  • 广告标记 现在会告诉你为什么某个元素被识别成广告,比如命中了哪个过滤规则、由哪些脚本生成。

图片说明

accessibility-tree.webp

展示新的无障碍树切换入口,说明完整无障碍树已经成为默认视图。

application-panel.webp

展示新的 Speculation rules 过滤栏,以及 Crash report 的上下文信息区域。

network-panel.webp

展示新的 Request # 请求顺序列,以及推荐的网络限速配置。

一句话总结

这次更新的重点,就是让 DevTools 更容易排查“为什么出问题”,尤其是在无障碍、预加载、崩溃和网络请求分析这几块。