I Built a DevTools for WebMCP — Because console.log Isn't a Debugging Strategy
Chrome just shipped navigator.modelContext. Websites can now register structured tools for AI agents — no backend, no scraping, no guessing. But here's the thing: there's no DevTools panel for it. ...

Source: DEV Community
Chrome just shipped navigator.modelContext. Websites can now register structured tools for AI agents — no backend, no scraping, no guessing. But here's the thing: there's no DevTools panel for it. You register a tool. Did it work? Open the console. Want to test it? Write a throwaway script. Want to see the schema? JSON.stringify and squint. I got tired of this after the second day. So I built WebMCP DevTools — a Chrome extension that gives you a proper side panel for everything WebMCP. What does it actually do? Open the side panel. Navigate to any page with navigator.modelContext.registerTool(). Done. Tools tab — Every registered tool shows up automatically. You see the name, description, and a collapsible schema tree. No digging through console output. Execute tab — Click any tool, and WebMCP DevTools auto-generates an input form from its JSON Schema. Strings get text fields. Enums get dropdowns. Numbers get number inputs. Or switch to raw JSON mode if you prefer. Hit Execute, see the