开发者工具中的新功能 - 2026 年 10 月

发布时间:2026 年 10 月 1 日

Chrome 153 和 Chrome 154 在过去一个月内已发布到稳定版,带来了一系列开发者改进,可满足您的日常工作流程需求。此版本重点介绍了以下功能:开发者工具中用于代理的精细 JavaScript 执行控制、应用面板中的广告脚本跟踪、性能面板中的完整软导航支持和 CPU 性能层级替换、元素面板中对非活动样式和可通过键盘访问的装饰器的支持、AI 辅助功能中的源代码检查和性能轨迹记录,以及设备模式中经过现代化的设备预设。

面向智能体的开发者工具

Chrome 开发者工具 MCP 服务器为编码智能体引入了新的安全控制、性能调优和内存分析功能:

  • 代理插件 1.0 软件包:添加了对代理插件 1.0 软件包的支持,允许代理加载和执行模块化插件扩展程序。
  • JavaScript 执行控件:配置 --no-javascript-evaluation 或关闭 JavaScript 执行工具,以便在不评估脚本的情况下检查网页,并扩展到导航和初始化脚本。
  • 按需来源映射:添加了一个选项,用于停用来源映射并按需延迟加载来源映射,从而防止大型网站占用过多内存用量。
  • 可配置的文件系统根目录和 CLI 路径权限:CLI 现在默认包含 --allow-unrestricted-paths,并支持可配置的文件系统根目录。
  • 堆快照检查:使用 query_heapsnapshot 按保留大小或属性名称直接查询对象,查看边的自身大小和保留大小,并检查 V8 执行上下文保留的内存。
  • PWA 自动化工具:添加了专用工具,用于自动执行渐进式 Web 应用安装和生命周期检查。
  • 控制台堆栈轨迹:使用 list_console_messages 列出控制台消息时,检索可选的堆栈轨迹。

如需了解详情,请参阅 chrome-devtools-mcp 代码库

在 Chrome 用户体验报告 (CrUX) 中引入四项实验性广告指标后,这个新的子面板可用于集中调试和优化与整个网页的广告相关的信息。其中包括:

  • 用于显示新实验性指标的信息中心:视口广告密度、视口广告数量、广告的总 CPU 用量、广告的总网络用量。
  • 按广告元素细分 CPU 和网络用量
  • 主框架中的广告脚本表。
  • 用于突出显示网页上广告的切换开关。

如需详细了解新的广告指标,请参阅我们的文档

“应用”面板的“广告”标签页,其中显示了新的“广告脚本”表格,并显示了“来源”中的广告脚本。
“应用”面板的“广告”标签页显示新的“广告脚本”表格,并在“来源”中显示广告脚本。

Chromium 问题:514957134512927903540469610

性能面板提供端到端软导航测量、硬件校准替换和更深入的轨迹搜索:

  • 全面支持软导航:继 Chrome 152 在实时指标和轨迹视图中引入软导航支持后,洞察中现已提供软导航分析,从而在性能面板中全面支持软导航衡量。
  • 通过 CDP 替换 CPU 性能层级:开发者工具现在支持通过 Chrome DevTools Protocol (Emulation.setCPUPerformanceOverride) 配置、计算和调度经过校准的 CPU 性能层级替换,从而能够在不同硬件层级之间进行可重现的性能测试。
  • 在火焰图中搜索扩展轨道:现在,在性能面板火焰图中按 Ctrl+F 会匹配使用可扩展性 API 注册的自定义轨道中的条目,搜索其工具提示文本、属性和用户详情。
  • CPU 配置文件线程可视化性能面板火焰图现在会渲染仅包含 CPU 配置文件样本的线程,确保 WebAssembly 线程等后台执行出现在时间轴视图中。
“性能”面板中的软导航端到端工作流。

Chromium 问题:449760252483092899540020488

元素:无效样式、可通过键盘访问的装饰器和树状结构大纲修复

元素面板中检查和编写 CSS 更加快速便捷:

  • 支持非活动样式:DevTools 现在可以继续显示之前与所选元素匹配的样式规则,即使这些规则不再适用也是如此,并使用非活动视觉指示器清楚地区分它们。在设置中启用非活动样式并配置其折叠行为。
  • 可通过键盘访问的装饰器:DOM 树中的交互式装饰器(包括查看来源初始样式滚动捕捉显示)现在可通过键盘聚焦,并可使用 EnterSpace 激活。
  • 拖放重新排序:现在,通过在 DOM 树中拖动元素来重新排序 DOM 节点的功能在 shadow DOM 边界上可以可靠地运行,并提供清晰的放置指示器。
  • 更顺畅的 CSS 属性切换:在样式标签页中切换 CSS 属性复选框不再会触发重复的界面重绘或视觉闪烁。
“元素”面板,显示了无效的 CSS 规则。
显示无效 CSS 规则的“元素”面板。

Chromium 问题:539424116554057179555088527548477554

设备模式:按设备规格分组的现代化设备预设

设备模式工具栏和设置 > 设备视图将模拟硬件划分为清晰的类别:

  • 设备类型分组:模拟设备现在分为移动设备可折叠设备平板电脑和桌面设备以及智能显示屏
  • 更新了硬件目录:添加了现代预设,包括 iPhone 16、Pixel 9、Pixel 10、Galaxy Z Fold 6、iPad Pro 13 英寸和 Nest Hub Max,同时停用了过时的旧版设备定义。
设备模式,显示按设备规格分组的现代化设备预设。
设备模式,显示按设备规格分组的现代化设备预设。

Chromium 问题:526856234526857820

网络:在控制台中修改并以 fetch 格式重新发送,以及本地替换安全性

网络请求检查和调试工作流已得到简化和保护:

  • 在控制台中修改并重新发送为提取:现在,在任何网络请求上选择在控制台中修改并重新发送为提取,系统都会自动聚焦控制台面板,并将 fetch() 表达式粘贴到提示中,其中包含参数注释和指向原始请求的参考链接。
  • 本地替换项安全加固“网络”面板现在可防止本地替换项中的路径遍历 (%2E%2E),并禁止在非 HTTP(s) 方案(如 data:blob:javascript:about:)上创建替换项。
  • “复制为 curl (cmd)”中的脱字符转义:现在,将网络请求复制为 Windows cmd.exe 的 curl 命令时,会使用脱字符转义圆括号和反引号,从而防止粘贴到其他 shell 时出现命令语法错误。
  • 二进制载荷光标同步:在十六进制、Base64 和 UTF-8 视图之间切换时,载荷标签页会保持您的滚动和光标位置。
右键点击某个网络请求,然后选择“修改并重新发送为 fetch”,这会自动聚焦控制台面板,其中已粘贴 fetch 表达式,可随时进行修改。
右键点击网络请求,然后选择“修改并重新发送为 fetch”,这样会自动聚焦控制台面板,其中已粘贴 fetch 表达式,可随时进行修改。

Chromium 问题:40726969513843792513836026407750982

内存:堆快照边缘过滤、大小排序和对象查询

内存面板提供了更精细的工具来分析堆快照:

  • 边缘排序和过滤:您现在可以按最小保留大小过滤堆快照中的边缘,并过滤掉原始值(nullundefinedtruefalse),以便专注于有意义的对象引用。您可以按保留大小、自身大小或名称对边进行排序。
  • 直接查询对象:开发者工具支持按保留大小阈值或属性名称直接查询堆快照对象,从而简化内存泄漏调查。
  • 上下文信息留存分析:堆快照可以计算并报告由 V8 执行上下文专门保持存活的内存总量。
  • 弹性快照解析:无效或损坏的堆快照文件现在会显示明确的错误,而不是导致解析挂起。

Chromium 问题:497855658

无障碍功能改进

Chrome 153 和 Chrome 154 包含以下无障碍功能增强:

  • 元素:在 macOS 上,VoiceOver 现在会在浏览 DOM 树项时,通过礼貌的动态区域宣布“展开”和“收起”状态变化。(Chromium 问题:540028208
  • 问题:解决了问题计数器中重复的屏幕阅读器公告,在问题面板中读取单个简洁的摘要并应用正确的非按钮语义。(Chromium 问题:536977880
  • 元素:交互式装饰器(查看来源初始样式滚动捕捉显示)完全可聚焦,并且可以使用键盘激活。(Chromium 问题:554057179
  • 实时区域:添加了 AccessibilityAnnouncementRecordingView 以记录和调试实时公告和 ariaNotify 调用。(Chromium 问题:527462118

Chromium 问题:540028208536977880554057179527462118