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

SnapTools — Wed, 08 Apr 2026 02:20:51 +0000

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.

I Built a Chrome Extension That Lets You Inspect CSS Without Opening DevTools

SnapTools — Wed, 01 Apr 2026 01:13:23 +0000

Every front-end developer knows the drill: right-click → Inspect → scroll through a mountain of inherited styles in the DevTools panel just to find the CSS of one button.

I got tired of it. So I built SnapCSS — a Chrome extension that lets you see the CSS of any element on any page with a single click.

How It Works

Click the SnapCSS icon in your toolbar to activate inspect mode
Hover over any element — it gets highlighted instantly
Click the element — a clean floating panel shows you the full, cleaned CSS
One-click copy to your clipboard

That's it. No DevTools, no noise, no digging through inherited rules.

Why I Built This

DevTools is powerful, but it's overkill when all you want is "what's the font-size, padding, and background of this button?" As a front-end developer, I do this dozens of times a day — checking how other sites style their components, debugging spacing issues, or just grabbing a quick reference.

SnapCSS strips away the complexity and gives you exactly what you need: the computed CSS of the element you clicked, formatted and ready to copy.

What Makes It Different from Similar Tools

Lightweight — only 61.4 KB, no bloat
Clean output — shows cleaned, relevant CSS instead of dumping every inherited property
Beautiful floating panel — stays on the page, doesn't take you to a separate view
Zero data collection — no analytics, no tracking, your browsing stays private

Install It

SnapCSS is free on the Chrome Web Store:

👉 Install SnapCSS

If you find it useful, a rating on the Chrome Web Store would mean a lot — it helps other developers discover it.

What's Next

I'm currently working on another extension called WebMCP DevTools for debugging the new WebMCP protocol (the standard that lets AI agents interact with websites). It's currently in review on the Chrome Web Store.

If you have feedback or feature requests for SnapCSS, drop a comment below — I'd love to hear what you think.

DEV Community: SnapTools