Chrome DevTools 新增 WebMCP 支持：AI 工具调试不再抓瞎

Chrome DevTools 正在把 AI 代理的工具调用纳入前端开发者的日常调试流程。据 YouTube 上发布的一段功能演示，DevTools 现已支持 WebMCP，开发者可以在 Application 面板下的 WebMCP 入口中，直观看到当前上下文里有哪些工具可用，并对工具调用过程进行追踪和手动触发。

上下文变化，工具列表实时更新

WebMCP 在 DevTools 中的第一个实用能力，是让开发者看清「当前页面到底暴露了哪些工具」。演示中，当页面上下文发生切换时，工具列表会同步更新。这意味着开发者不必靠猜测或翻代码来确认某个功能区是否注册了对应的 AI 工具，打开面板就能得到一份实时清单。

对于构建面向 AI 代理的 Web 应用来说，这一视图解决的是「可见性」问题：工具是否存在、在哪个上下文生效，都有了直接的观察入口。

WebMCP 是什么

WebMCP（Web Model Context Protocol）是一套让网页向 AI 代理暴露可调用工具的协议约定。传统上，AI 代理与网页交互只能依赖 DOM 解析、模拟点击或截图识别等间接手段，既脆弱又难以表达意图。WebMCP 的思路是让站点主动声明一组结构化工具——每个工具包含名称、说明、参数模式与执行逻辑，代理通过协议发现并调用它们，而不再猜测页面结构。协议中的「上下文」指工具可见的作用域，例如某个页面、某个路由或某个 iframe；上下文切换时可用工具集合随之变化。DevTools 的 WebMCP 面板正是对这一机制的运行时映射，把抽象的工具注册表变成可观察的列表。

工具活动追踪：看清每一次调用

第二个能力是工具活动（tool activity）区块。演示中，用户向代理发出「帮我找东京的酒店，筛选健身房和早餐」的请求，左侧面板随即列出被调用的 WebMCP 工具，同时展示每次调用的输入、输出以及更多细节。

这种粒度的记录对排查问题很关键。AI 代理的行为往往由多步工具调用串联而成，某一步的输入参数不对、返回结果不符合预期，都会导致最终回答偏离。把输入输出摊开来看，开发者才能判断问题出在模型理解、参数构造还是工具实现本身。

除了被动观察，演示还展示了手动触发工具的方式——直接查询纽约的酒店信息。这为复现特定场景提供了便利，不必每次都通过自然语言对话来触发链路。

工具调用链与输入输出边界

在代理式应用中，一次用户请求通常被拆解为多轮「推理—调用—观察」循环：模型先决定调用哪个工具，构造参数，等待返回结果，再据此决定下一步。工具活动区块记录的正是这一循环中的每一次调用事件，包含工具标识、入参、返回值与耗时等元数据。排查问题的关键在于分清三类失败来源：模型选错工具或理解偏差、参数构造不符合工具的模式约束、工具实现本身返回异常。只有把每一步的输入输出独立呈现，才能判断错误发生在哪一层，而不是把问题笼统归因于「AI 回答不对」。

从调用记录跳转到工具源码

第三个能力面向代码定位。开发者可以从工具的活动记录直接跳转到工具的注册位置，例如某段 JavaScript 代码。演示明确指出，可以像调试任何其他 JavaScript 代码一样，对这些工具进行测试和调试。

这一点把 WebMCP 调试拉回了前端开发者熟悉的工作流。工具本质上仍是页面中的 JavaScript，断点、单步、作用域检查这些手段同样适用，学习成本被压得很低。

工具注册位置与源码映射

WebMCP 工具在页面中通过 JavaScript 注册，注册时通常会绑定一个处理函数与一份参数模式描述。DevTools 能够从活动记录跳转到注册代码，依赖于运行时保留的注册来源信息——即记录某个工具是在哪个脚本、哪一行被声明的。这使得工具不再是黑盒：开发者可以在处理函数中下断点，观察代理传入的实际参数，单步执行工具逻辑，检查作用域中的变量状态。对使用打包工具的站点，这一跳转依赖 source map 还原原始源码；若构建产物未附带 source map，定位精度会下降，因此调试 WebMCP 应用时保留 source map 是值得注意的实践。

对 Web AI 开发流程的意义

把 WebMCP 支持做进 DevTools，反映出浏览器厂商对「网页即 AI 工具提供方」这一形态的重视。当网站开始向代理暴露可调用的工具，调试对象就从传统的请求响应扩展到了工具注册、调用链路和参数传递。DevTools 提供统一的观察窗口，能让这类应用的开发体验向传统 Web 开发靠拢。

演示结尾，官方也向开发者征集反馈，询问有哪些需要修改或补充的地方。对于正在尝试 WebMCP 的团队来说，这是一个直接影响工具链走向的窗口期。

常见问题

WebMCP 面板在哪里？ 位于 DevTools 的 Application 面板下，名为 WebMCP。

能看到什么信息？ 当前上下文可用的工具列表、工具调用的输入输出详情，以及工具的注册位置。

可以手动调用工具吗？ 可以，演示中直接发起了针对纽约的查询。

调试方式和普通 JS 一样吗？ 是，演示强调可以像调试任何 JavaScript 代码一样测试和调试这些工具。