开发者工具的新变化 (Chrome 152)

发布时间:2026 年 8 月 25 日

Chrome 152 显著增强了网络调试功能,包括请求重发和二进制载荷检查、元素中的自定义元素装饰器和增强的 CSS 嵌套、性能实时指标中的软导航 Core Web Vitals、控制台中的结构化表格导出,以及对开发者工具 MCP 服务器的改进。

面向智能体的开发者工具

最新版 v1.7.0 的 Chrome 开发者工具 MCP 服务器为编码智能体(例如 Antigravity、Claude、Codex 等)构建了之前引入的内存调试功能:

  • 堆快照对象详情 (get_heapsnapshot_object_details):直接从堆快照检查详细的 JavaScript 对象属性、类名称和 GC 根保留路径。
  • 原生 V8 上下文过滤:按原生执行上下文过滤堆快照对象,并在快照摘要中检查原生上下文。
  • 守护程序稳定性和生命周期改进:添加了有界限的每次导航网络请求保留、会话 ID 验证、CLI 到守护程序版本不匹配警告,以及在上下文处置时正常关闭工作器。

如需了解详情并开始使用,请访问 GitHub 上的代理专用开发者工具代码库。

网络:修改和重新发送请求、预加载数据洞见和二进制载荷解码

“网络”面板显示了提取请求中的新“重新发送”上下文菜单选项、“复制为预加载元素”选项以及“载荷”标签页中的二进制解码切换器。

  • 重新发送 fetch 和 XHR 请求:之前的“重放 XHR”上下文菜单项现在为重新发送。它现在支持所有可提取的网络请求,可将标准请求转换为 fetch() 调用,同时保留完整的重放保真度以及 XHR。请求还会跟踪并显示其执行上下文和控制台发起者。
  • “预加载”列和“复制为预加载元素”:新增了一个专用预加载列,用于显示网络请求是否是使用推测性预加载发起的。您还可以右键点击任意请求,然后选择复制为预加载元素,以生成可直接放入 HTML 中的 <link rel="preload"> 标记。现在,早期提示已归类到“启动程序”列下。
  • 请求载荷的二进制查看器:载荷标签页现在包含二进制和压缩请求载荷的解码方法选项(Base64、十六进制和 UTF-8),与“响应”标签页类似。
  • “固定请求数”列:“请求”列 # 现在固定在“网络”数据网格中的第一个位置,以便更轻松地引用请求。
  • 同网站主机过滤:现在,在“网络”过滤条件栏中搜索网域、主机名或端口(例如 localhost 或 example.com)可以准确过滤同网站请求。
  • 默认查询参数解码:现在,系统会自动解码“载荷”标签页中的查询参数和表单参数,以用于所有请求。

Chromium 问题:40726969、41299075、40138847、40222701、525848667、507077182、498482622、520437951、40267477

元素:自定义元素装饰器、嵌套 CSS 父选择器互动和 $0 伪元素选择

“Elements”面板 DOM 树显示自定义元素装饰器徽章(位于自定义 HTML 标记旁边),以及悬停在嵌套 CSS 规则中的父选择器上以突出显示页面上匹配的元素。

在元素面板中检查和编写 Web 组件以及现代 CSS 更加快速直观:

  • 自定义元素装饰器徽章:自定义 HTML 元素(通过连字符标记或 is="..." 属性标识自定义的内置元素)现在会在 DOM 树轮廓中显示 custom-element 装饰器徽章。
  • 嵌套 CSS 父选择器互动和特异性:现在,在嵌套 CSS 规则和继承的嵌套规则中,将鼠标悬停在父选择器上时,系统会突出显示页面上匹配的元素,并响应“样式”标签页过滤。为 @nested-declarations 规则添加了特异性提示弹出式窗口。
  • 通过 $0 选择伪元素:现在,在“元素”DOM 树中选择 ::before 或 ::after 等伪元素时,系统会直接将它们绑定到 $0 控制台变量,以便立即进行 JavaScript 检查。
  • 为 text-wrap 和 <image> 类型提供自动补全功能:“样式”窗格现在会针对 text-wrap(wrap、nowrap、balance、pretty、stable)建议所有关键字值,并自动补全接受 <image> 数据类型的 CSS 属性。
  • 盒子模型滚动条感知:现在,当元素具有可见的滚动条时,盒子模型指标图会准确计算并呈现内容框尺寸。

Chromium 问题:367440148、535517817、535522242、535523039、537724428、399305533、334984154、383355294、326260752、389342065

性能:实时指标中的软导航指标和自定义屏幕截图预设

“性能”面板的“实时指标”部分显示了软导航的 Core Web Vitals。

  • 支持软导航的实时指标:实时指标视图现在默认捕获并报告单页应用中客户端软导航的 Core Web Vitals(例如 LCP 和 INP),这是通过升级到 web-vitals v6.0.0 实现的。
  • 自定义屏幕截图捕获预设:在“性能”面板中公开了可配置的屏幕截图帧大小和数量上限预设,以便在内存预算范围内自定义视觉记录保真度,以进行 CDP 跟踪。
  • console.profileEnd() 轨迹显示器:现在,在代码或控制台中调用 console.profileEnd() 会自动打开并显示“性能”面板中记录的轨迹。
  • 可扩展性 API 自定义轨道摘要:性能轨迹摘要现在可以处理和呈现使用可扩展性 API 注册的自定义轨道组。

Chromium 问题:514721939、490140054、536954453、535506117

控制台:将表格导出为 Markdown 或 CSV 格式,并提供副作用保护

  • 将控制台表格复制为 Markdown 或 CSV:现在,您可以使用上下文菜单将通过 console.table() 记录的表格直接复制到剪贴板,作为格式化的 Markdown 表格或 CSV 数据。
  • 副作用评估保护:调试器的悬停评估现在可以防范包含 new、带标记的模板字面量、动态 import() 和 delete 运算符的表达式,从而防止在暂停时发生意外的状态突变。

Chromium 问题:40924951、40133606

其他亮点

其他开发者工具子系统中的一系列重要改进:

  • 来源:快速打开功能现在会优先显示本地工作区文件,并大幅提高其得分,使工作区文件显示在网络资源之上。(Chromium 问题:40260136)
  • 内存:堆快照摘要视图现在会显示总对象数以及所选类型的汇总浅层大小,并包含原生执行上下文过滤条件。(Chromium 问题:497855658)
  • 应用:广告面板将突出显示广告切换开关直接移到了面板中,添加了可点击的广告 iframe 元素 ID 以显示层次结构中的框架,并引入了按框架细分的指标表格。 (Chromium 问题:514957134)
  • 应用:将“存储”窗格中的“清除网站数据”部分重新设计为一个统一的整合组(Chromium 问题:375867286),并解决了在恢复往返缓存后出现重复的缓存存储条目的问题(Chromium 问题:484693244)。
  • 扩展功能:现在,当不带回调调用 chrome.devtools.panels 中的异步方法时,这些方法会原生返回 JavaScript Promise。(Chromium 问题:496604551)
  • 设置:将默认网络节流预设和自定义节流配置拆分为单独的部分。(Chromium 问题:342409451)
  • Lighthouse:将捆绑的 Lighthouse 模块更新为版本 13.4.1。 (Chromium 问题:40543651)
  • 问题:当使用 loading="lazy" 的图片缺少明确的 width 或 height 尺寸时,开发者工具会发出警告。
  • 设备模式:简化了缩放级别菜单,提供统一的适应窗口选项,并在无法使用框架图形时停用了显示设备框架切换开关。

无障碍功能改进

Chrome 152 包含以下无障碍功能增强:

  • 元素和无障碍功能:添加了上下文菜单选项,可在“元素”DOM 树和“无障碍功能树视图”之间无缝切换,并为无障碍功能节点添加了“滚动到视图中”选项。(Chromium 问题:417929842)
  • 无障碍功能:添加了对使用上下文菜单将无障碍树节点和子树复制为纯文本的支持。(Chromium 问题:417929842)
  • 元素:修复了在深色模式下运行时,“元素”面板中低对比度的搜索突出显示颜色。(Chromium 问题:491718898)
  • 导航:将开发者工具取消停靠到单独的窗口或重新停靠回标签页中,不再强制将焦点移到主菜单按钮上。
  • 设置:在 AI 设置中为“显示更多”和“显示更少”按钮添加了描述性无障碍内容。