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

Published: March 10, 2026

Chrome 146 改进了对“元素”面板中采用的样式表 的支持,显著改进了控制台 历史记录导航,并简化了隐私权 调试工作流,同时还进行了各种其他小修复和更新。

开发者工具 MCP 服务器更新

开发者工具 MCP 服务器 现已更新至 0.19.0 版,带来了强大的新工具、效率提升、 和专业的调试技能:

  • 集成 Lighthouse 审核: 您现在可以直接通过 MCP 运行 Lighthouse 审核,从而在代理工作流中实现自动性能和质量检查。
  • 精简模式: 现在提供了一种新的 --slim 模式,旨在优化工具说明和参数,以最大限度地节省令牌。
  • 新的调试技能: 添加了专门用于审核和调试无障碍功能以及调试和优化最大内容绘制 (LCP) 的专用技能。
  • 扩展的工具和功能: 该服务器现在支持存储隔离的浏览器上下文、实验性屏幕录制、新的 take_memory_snapshot 工具以及 type_text 等高级互动功能。

如需查看完整的更改列表,请参阅 GitHub 上的公开更改日志

保留控制台历史记录修改内容

控制台 中长期存在的一个摩擦点已得到解决。以前,如果您正在修改从历史记录中提取的命令并离开(按向上键或向下键),您的修改内容会丢失。

在 Chrome 146 中,开发者工具现在会在您浏览命令历史记录时保留您的修改内容 。您可以开始修改之前的命令,浏览其他命令,然后返回到草稿,而不会丢失您的工作。

这是社区贡献,感谢 @hjanuschka

Chromium 问题:355108929

改进了对采用的样式表的支持

现在,调试 Web 组件和现代 CSS 架构变得更加轻松。 采用的样式表不再隐藏;它们现在分组在元素 面板中 DOM 树内的专用 #adopted-style-sheets 节点下。

您可以像检查标准 <style> 标记一样检查这些样式表,甚至可以直接在 样式 窗格中修改其规则。这使得构造的样式表与声明式样式之间实现了对等,从而简化了 Shadow DOM、Web 组件和共享设计系统的调试。

“元素”面板中采用的样式表,支持内嵌编辑。

Chromium 问题:47639919740802935

支持密集网格布局

“样式”窗格中的网格编辑器 现在支持 dense 打包算法。在修改 grid-auto-flow 时,您会看到一个用于 dense 关键字的新复选框,让您可以直接从界面在标准打包模式和密集打包模式之间快速切换。

网格编辑器中的新密集复选框。

这是社区贡献,感谢 @TheNourhan

Chromium 问题:40791512

简化了隐私权调试

之前的隐私权和安全性 面板已重命名为安全性,并 经过整理,以减少界面杂乱并整合调试工作流。现在,所有与隐私权相关的信息(例如第三方 Cookie 问题和检查潜在的损坏)都会直接在控制台 中报告。

此更改意味着您不再需要在面板之间切换来诊断隐私权问题;这些问题会与其他日志和错误一起显示,从而提供即时上下文。

Chromium 问题:473796598

其他亮点

  • 来源: 对堆栈轨迹架构进行了重大改进,解决了延迟加载源映射导致界面意外跳转或切换文件的问题。
  • 网络: 发起者弹出式窗口现在使用改进的堆栈轨迹系统,以实现更可靠的请求链。

无障碍功能公告

此版本带来了以下无障碍功能改进:

  • 录制器: 屏幕阅读器现在会在切换“显示代码”边栏时发出通知。
  • 应用: 新的“共享存储空间”“往返缓存”和“跳出跟踪缓解”报告标题现在会正确地作为标题发出通知。
  • 设置: 改进了对快捷方式项和颜色按钮的高对比度模式支持。
  • 常规: 改进了各种界面元素(包括 CSS 概览面板和媒体播放器条目)的焦点可见性。

Chromium 问题:479882111478888141479250362