WebMCP DevTools

Inspect, test, and monitor WebMCP tools via document.modelContext (legacy navigator.modelContext supported).

WebMCP DevTools is a developer tool for inspecting, testing, and monitoring WebMCP tools on web pages. WebMCP is a browser-native standard that lets websites expose structured "tools" to AI agents via JavaScript — giving agents a callable API instead of guessing which DOM button to click. If you are integrating WebMCP, debugging tool registration, validating JSON Schema, or comparing tool definition changes, this extension works like "Postman + DevTools" for WebMCP. ■ Key Features • Tool Detection — Auto-scan all registered WebMCP tools (imperative + declarative) • Schema Visualization — Collapsible tree view for inputSchema with nested objects/arrays • Interactive Forms — Auto-generated forms from JSON Schema, plus raw JSON mode • Tool Execution — Run tools from the side panel with results, timing, and success status • Event Timeline — Real-time register / unregister / toolchange monitoring • Execution History — Recent runs with full input/output • Snapshots & Diff — Save tool definitions and compare changes over time • Tool Generator — Scan page forms and buttons to help build tool definitions • Export — JSON, Markdown, Postman Collection, TypeScript code • Built-in AI Assistant — Optional Gemini / OpenAI / Claude / DeepSeek for natural-language testing • Cross-Tab View — Aggregate tools from multiple tabs • i18n & Themes — English/Chinese, light/dark/system themes ■ Getting Started Local development: 1. Enable chrome://flags/#enable-webmcp-testing 2. Restart Chrome 3. Open the side panel and navigate to a page with WebMCP tools Production (Chrome 149+): Some Origin Trial sites (e.g. Shopify, Cloudflare) work without the flag. Supports document.modelContext (Chrome 150+) and legacy navigator.modelContext. ■ Who It's For • Frontend / full-stack developers integrating WebMCP • Engineers verifying that AI agents can discover and invoke page tools correctly • Teams who need visual debugging of JSON Schema and tool execution results ■ Privacy All processing is local. API keys (for the optional AI assistant) are stored in chrome.storage.local only. No data is sent to the extension developer. ■ Changelog v2.2.0 — document.modelContext support (Chrome 150+), API path shown in status bar, improved Origin Trial hints, updated export templates v2.1.0 — Tool generator, page content reading, site profiles WebMCP DevTools 是面向前端开发者的 WebMCP 调试工具。WebMCP 是 Chrome 正在推进的浏览器原生标准，让网站通过 JavaScript 向 AI 代理暴露结构化「工具」——相当于给页面一套可被 AI 直接调用的 API，而不是让 AI 去猜 DOM 按钮在哪里。 如果你在接入 WebMCP、调试工具注册、验证 JSON Schema，或对比工具定义变更，这个扩展可以当作「WebMCP 的 Postman + DevTools」。 ■ 核心功能 • 工具检测 — 自动扫描当前页面已注册的全部 WebMCP 工具（命令式 + 声明式） • Schema 可视化 — 以可折叠树形结构查看 inputSchema，支持嵌套 object / array • 交互式表单 — 根据 JSON Schema 自动生成表单，也支持原始 JSON 编辑模式 • 工具执行 — 在侧面板直接调用工具，查看结果、耗时与成功/失败状态 • 事件时间线 — 实时监控 register / unregister / toolchange 事件 • 执行历史 — 保留最近执行记录，含完整输入输出 • 快照与对比 — 保存工具定义快照，对比两次之间的增删改 • 工具生成器 — 扫描页面表单、按钮，辅助生成 WebMCP 工具定义 • 导出 — 支持 JSON、Markdown、Postman Collection、TypeScript 代码 • 内置 AI 助手 — 可选配置 Gemini / OpenAI / Claude / DeepSeek，用自然语言理解和测试工具 • 跨标签页 — 汇总多个标签页的工具列表 • 中英文界面 — 一键切换，支持亮色/暗色主题 ■ 如何开始 本地开发： 1. 在 Chrome 打开 chrome://flags/#enable-webmcp-testing 并启用 2. 重启浏览器 3. 点击扩展图标打开侧面板，访问包含 WebMCP 工具的页面 生产环境（Chrome 149+）： 部分已启用 Origin Trial 的网站（如 Shopify、Cloudflare 托管站点）无需开启 flag 即可使用 WebMCP。扩展会自动适配 document.modelContext（Chrome 150+ 新标准）及旧版 navigator.modelContext。 ■ 适用人群 • 正在接入 WebMCP 的前端 / 全栈开发者 • 需要验证 AI 代理能否正确发现和调用页面工具的工程师 • 希望可视化调试 JSON Schema 与工具执行结果的团队 ■ 隐私 所有数据仅在本地浏览器中处理。API Key（如使用 AI 助手）存储在 chrome.storage.local，不会上传到任何服务器。 ■ 版本记录 v2.2.0 • 兼容 document.modelContext（Chrome 150+ 新标准），保留对 navigator.modelContext 的支持 • 状态栏显示检测到的 API 路径；API 可用但无工具时显示「API 可用」 • 优化 Origin Trial 站点的空状态提示；更新导出代码模板 v2.1.0 • 工具生成器、页面内容读取、站点配置文件