开发者工具的新变化 - 2026 年 11 月

发布时间:2026 年 10 月 20 日

Chrome 155 和 Chrome 156 已于 10 月发布稳定版,并于 11 月为浏览器带来了一系列全新的调试和编写功能:在开发者工具中为智能体提供 CSS 样式检查功能,在元素面板中提供用于 CSS 锚点定位的交互式 position-area 编辑器,以及在应用面板中提供 Web 安装清单和广告来源诊断功能。您还可以在内存中检测死上下文变量,在网络中检查 Early Hints 预加载警告和永久性替换,以及在性能中更顺畅地浏览时间轴。

在“元素”面板“样式”标签页中的可视化位置区域编辑器内,选择锚点定位叠加层旁边的锚点网格区域。
在“元素”面板“样式”标签页中的可视化位置区域编辑器中,选择锚点定位叠加层旁边的锚点网格区域。

面向智能体的开发者工具

Chrome 开发者工具 MCP 服务器为编码智能体新增了 CSS 样式检查、配置文件支持和分块跟踪解析功能:

  • CSS 样式检查:使用 get_css_styles 工具检查计算出的样式和匹配的样式,该工具支持分页(pageSize 和 pageIdx),并可设置匹配规则、继承规则、伪元素、@keyframes 和 @ 规则(@position-try、@property 和 @function)的格式。
  • 配置文件和路径控制:使用专用配置文件管理服务器标志,配置自定义文件系统根目录,并在 CLI 中默认使用 --allow-unrestricted-paths。
  • 分块轨迹缓冲区解析:使用分块轨迹缓冲区解析器和 1.2 GB 默认轨迹缓冲区解析大型性能记录。开发者工具还会为每次解析限定跟踪引擎实例的范围,以防止内存泄漏。
  • 对话框处理和控制台持久性:自动处理在输入工具操作期间触发的 JavaScript 对话框,并在同一文档导航中保留控制台消息记录。
  • 菜单更新:在开发者工具主菜单中点击获取面向智能体的 Chrome 开发者工具,即可打开设置说明。

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

“元素”面板:可视化 position-area 编辑器、隐式锚点选择和 CSS 编写更新

元素面板引入了用于 CSS 锚点定位的可视化工具,并扩展了 CSS 检查功能:

  • 可视化 position-area 编辑器:点击样式标签页中 position-area 声明旁边的内嵌色样,即可直观地选择锚点网格区域、同时或单独配置轴、切换 self 关键字,以及缩短无轴关键字。
  • 在弹出式窗口装饰器上隐式选择锚点:当元素具有多个隐式锚点时,在 DOM 树中右键点击 popover 装饰器,即可检查并跳转到任何关联的锚点元素。
  • 锚点定位框叠加层:在调试锚点定位元素时,直接在视口叠加层上检查经过边衬区修改的包含块 (IMCB) 的外边距、内边距、边框和内容框。
  • Flexbox 编辑器中的 wrap-reverse:直接在样式标签页中的可视化 Flexbox 编辑器中切换 flex-wrap: wrap-reverse。
  • @starting-style 的无效 CSS 样式和继承的规则:检查无效的 @starting-style 规则和 Inherited from 部分,这些部分在更新后仍会保留手动展开和收起状态。
  • 多短划线自定义属性和类自动补全:检查和修改以三个或更多短划线开头的 CSS 自定义属性(例如 ---theme-color),并从添加新类自动补全建议中滤除已应用的类。
从“元素”面板 DOM 树中的弹出式窗口标记上下文菜单中选择隐式锚点元素。
从“元素”面板 DOM 树中的弹出式窗口标记上下文菜单中选择隐式锚点元素。

Chromium 问题:553335561、438724570、413061413、397184392、539424116、533783988

应用:Web 安装清单诊断、广告来源和存储表更新

Application 和 Issues 面板新增了针对 Web Install 清单、广告脚本来源和存储空间检查的诊断功能:

  • Web 安装清单诊断:在问题面板中检查 Web 安装(navigator.install 和 <install>)清单错误,包括提取失败、语法错误、start_url 值无效、缺少名称或 ID 以及缺少清单,并提供指向受影响清单文件的直接链接。
  • 广告来源列和指标文档:查看应用面板的广告部分中新增的广告来源列,了解广告脚本是否与祖先脚本链或过滤列表规则匹配,以及广告指标的文档提示和了解详情链接。
  • IndexedDB 和 Cookie 表格的人体工程学设计:在 IndexedDB 数据网格中展开嵌套对象,采用动态行高,保留滚动位置,并使用键盘或上下文菜单删除 Cookie 表格中的选定行。
检查“Application”面板“Ads”部分中的“Ad provenance”列和“ancestry”提示,以及“Issues”抽屉式导航栏中的“Web Install”清单错误。
在“Application”(应用)面板的“Ads”(广告)部分中检查“Ad provenance”(广告来源)列和祖先提示,以及“Issues”(问题)抽屉式导航栏中的 Web 安装清单错误。

Chromium 问题:333795265、553428200、514957134、555304817、555304814、562142155

网络:Early Hints 预加载警告和永久性替换

网络面板优化了 Early Hints 诊断、本地替换和自定义标头工作流:

  • 停用缓存时显示 Early Hints 预加载警告:当 103 Early Hints 响应包含预加载链接,且停用缓存处于启用状态时,Early Hints 标头部分会显示警告,说明 Chrome 为何忽略这些预加载。
  • 永久性本地替换和自定义标头列:在网页导航过程中提供本地响应正文替换,在重新加载过程中保留自定义请求和响应标头列配置和排列顺序,并从上下文菜单中复制截断的原始请求载荷。
在“网络”面板的“标头”标签页中检查 Early Hints 预加载警告,其中启用了“停用缓存”并启用了本地响应替换。
在“网络”面板的“标头”标签页中检查 Early Hints 预加载警告,其中启用了“停用缓存”并启用了本地响应替换。

Chromium 问题:548701038、559925510、563542902、556269542、377410082

内存:堆快照中的死上下文字段检测

Memory(内存)面板现在会检测 V8 执行上下文中保留的未使用的闭包变量。开发者工具会解析堆快照中嵌入的 V8 作用域元数据,以便将闭包与共享的 Context 对象相关联。然后,它会突出显示在没有活跃闭包访问时,由同级长期活跃闭包保持活跃的死上下文字段,并按内存影响排序。

在“内存”面板中,按“由上下文保留的对象”过滤堆快照,以检查由共享 V8 执行上下文保留的死上下文变量。
在“内存”面板中,按“由上下文保留的对象”过滤堆快照,以检查由共享 V8 执行上下文保留的死上下文变量。

Chromium 问题:497855658

性能:时间轴导航更流畅,并保留了调用树状态

性能面板提供了响应更快的火焰图导航,并可在不同面板之间保留分析上下文:

  • 更流畅的时间轴导航:缩放、平移和拖动时间轴迷你地图时不再出现卡顿。
  • 保留了调用树和自下而上状态:在 DevTools 面板之间切换时,不会丢失调用树和自下而上标签页中展开的节点、所选内容或滚动位置。
在“Performance”面板的“Call tree”标签页中,检查放大的时间轴迷你图范围和展开的 JavaScript activity 节点。
在“Performance”面板的“Call tree”标签页中检查放大的时间轴迷你图范围和展开的 JavaScript activity 节点。

Chromium 问题:553831653、561396590

其他亮点

Chrome 155 和 Chrome 156 还对开发者工具面板进行了以下改进:

  • 传感器:直接通过传感器面板中新增的 CPU 性能层级控件覆盖 navigator.cpuPerformance,或让其反映有效的 CPU 节流预设。(Chromium 问题:449760252、526856234、526857820)
  • 设备模式:保留每个模拟设备的缩放比例和自动调整缩放偏好设置,并在切换设备工具栏时保留 Save-Data 替换设置。(Chromium 问题:561306841、555160483)
  • 颜色选择器:查看 APCA 对比色建议,了解深色背景上的浅色文本,并将色域外颜色转换为不含 NaN 值的 oklab() 和 oklch()。(Chromium 问题:560325669、558821258)
  • 无障碍功能:通过非颜色指示点识别处于启用状态的正则表达式过滤器切换开关,在 CSS 概览中听取屏幕阅读器朗读的字体属性名称,并通过改进的键盘焦点环和高对比度可见性在各个面板之间导航。(Chromium 问题:556764882、555848535、555599825、553804654)
在“传感器”抽屉式导航栏中替换 CPU 性能层级,并在颜色选择器中检查对比度建议和 oklch 值。
在“传感器”抽屉式导航栏中覆盖 CPU 性能层级,并在颜色选择器中检查对比度建议和 oklch 值。

Chromium 问题:449760252、526856234、526857820、561306841、555160483、560325669、558821258、556764882、555848535、555599825、553804654