I Built a DevTools for WebMCP — Because console.log Isn't a Debugging Strategy

#ai #chrome #opensource #webdev

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 result instantly.

Timeline tab — Every registerTool, unregisterTool, and tool change event is logged with timestamps. When your SPA re-registers tools on route changes, you'll actually see what happened and when.

Snapshots tab — Save the current tool definitions, come back later, diff them. Catch unintentional schema changes before they break your agent integration.

Export — One click to export as JSON, Markdown, Postman Collection, or ready-to-paste JavaScript code. Handy when you need to hand off tool specs to someone on the team who doesn't use the extension.

Why not just use the official Model Context Tool Inspector?

Google ships a Model Context Tool Inspector extension. It's decent for discovery — you can see tools and test them with Gemini.

WebMCP DevTools is built for a different workflow: the developer who's building the tools, not just consuming them.

Here's what's different:

Schema → Form generation. The inspector shows you raw JSON schemas. WebMCP DevTools renders them as interactive, type-aware forms. You don't write JSON to test your own tool — you fill in a form like a human would.

Event timeline. SPAs don't register tools once and forget. They register, unregister, re-register on navigation. The timeline shows every event, so you catch race conditions and duplicate registrations.

Snapshot diffing. You deployed a new version. Did your searchProducts schema change? Take a snapshot before and after, diff them visually.

Export formats. Need to document your tools for the team? Export as Markdown. Integrating with Postman? Export as a Postman Collection. Want a quick test script? Export as JavaScript.

Bilingual UI. Full English and Chinese (中文) support with one-click toggle. Because half the WebMCP early adopters I've talked to are Chinese developers.

Zero framework, ~90 KB. Vanilla DOM. No React. No Vue. Loads fast, stays fast.

How it works under the hood

WebMCP tools live in the page's MAIN world — that's where navigator.modelContext exists. But Chrome extensions can't directly access MAIN world objects from their side panel.

So the architecture has four layers:

Web Page (MAIN)  →  Content Script (ISOLATED)  →  Background (Service Worker)  →  Side Panel (UI)

Layer 1: injected.content.ts runs in MAIN world. It monkey-patches navigator.modelContext.registerTool() to intercept every tool registration. When a page registers a tool, this script captures the name, description, input schema, and a reference to the handler.

Layer 2: content.ts runs in ISOLATED world. It bridges the gap using window.postMessage (MAIN → ISOLATED) and chrome.runtime.sendMessage (ISOLATED → Background).

Layer 3: background.ts is the Service Worker. It routes messages between content scripts and the side panel, and tracks which tab has which tools.

Layer 4: sidepanel/main.ts renders everything — tool cards, schema trees, forms, timeline entries, snapshot diffs. All vanilla DOM manipulation, no virtual DOM overhead.

The tricky part was the monkey-patching. navigator.modelContext isn't always available immediately — the flag has to be enabled, and the API might initialize after our content script runs. The injected script handles this with a polling + MutationObserver fallback.

Set it up in 3 minutes

Step 1: Enable WebMCP in Chrome

Go to chrome://flags/#enable-webmcp-testing, set to Enabled, restart Chrome.

Step 2: Install the extension

From source (Chrome Web Store listing is under review):

git clone https://github.com/2019-02-18/WebMCP-DevTools.git
cd WebMCP-DevTools
pnpm install
pnpm build

Then: chrome://extensions/ → Developer mode → Load unpacked → select .output/chrome-mv3.

Step 3: Test with the included demo

Open test/demo.html with a local server (VS Code Live Server works great). The demo page registers several mock WebMCP tools. Click the extension icon, open the side panel, and you'll see them listed immediately.

Quick taste: what registering a tool looks like

If you haven't played with navigator.modelContext yet, here's the minimum:

navigator.modelContext.registerTool({
  name: 'get_weather',
  description: 'Get current weather for a city',
  inputSchema: {
    type: 'object',
    properties: {
      city: { type: 'string', description: 'City name' },
      unit: { type: 'string', enum: ['celsius', 'fahrenheit'] }
    },
    required: ['city']
  },
  handler: async ({ city, unit = 'celsius' }) => {
    const data = await fetchWeather(city, unit);
    return { temperature: data.temp, condition: data.condition };
  }
});

With WebMCP DevTools open, the moment this code runs you'll see a get_weather card appear in the Tools tab — schema tree expanded, ready to execute.

Who is this for?

If you're building WebMCP tools — this is your debug panel. You shouldn't have to console.log tool registrations or write ad-hoc test scripts.

If you're evaluating WebMCP — install this, open the travel demo, and poke around. You'll understand the API in 5 minutes instead of 50.

If you're building AI agents that consume WebMCP — use the export feature. Get the tool schemas as JSON or Postman Collections, integrate them into your agent's tool discovery pipeline.