WebMCP调试器Chrome扩展程序
用于反思的Chrome DevTools扩展程序 window.ai （提示API/Gemini Nano）和 navigator.modelContext （WebMCP）在任何网页上。
特性
- 工具选项卡：列出所有已注册的WebMCP工具，查看模式，使用JSON编辑器手动执行
- 时间线选项卡：按时间顺序记录所有AI事件（工具注册、提示、工具调用），并进行过滤
- AI会话选项卡：查看LanguageModel会话、提示/响应线程、流式可视化
需求
- Chrome 146+
chrome://flags/#webmcp-testing启用 - 对于window.ai功能：
chrome://flags/#optimization-guide-on-device-model启用
安装
pnpm install && pnpm build- 打开
chrome://extensions/ - 启用“开发人员模式”
- 点击“加载解包”并选择
dist/目录
发展
pnpm install
pnpm build # Build all (pages + content scripts + background)
pnpm typecheck # TypeScript check
pnpm lint # ESLint
pnpm package # Create ZIP for distribution建筑
ai-interceptor.ts (MAIN world)
│ monkey-patches LanguageModel + modelContext
│ posts events via window.postMessage
▼
bridge.ts (ISOLATED world)
│ receives postMessage events
│ forwards via chrome.runtime.sendMessage
▼
background/index.ts (Service Worker)
│ stores events in EventStore
│ forwards to connected panels via port
▼
panel/src/App.tsx (DevTools Panel)
│ React app with 3 tabs
│ connected via chrome.runtime.connect port