What is WebMCP DevTools?

Chrome extension for debugging navigator.modelContext tools—lists, forms, timelines, diffs.

How to install WebMCP DevTools?

Enable chrome://flags/#enable-webmcp-testing. Git clone repo, pnpm build, load unpacked in chrome://extensions/.

Does WebMCP DevTools work on production sites?

Yes, any page calling registerTool(). Captures live, even SPAs.

WebMCP DevTools: The Chrome Extension Ending Console.log Hell for AI Tool Builders

Chrome shipped WebMCP tools for AI agents, but left developers squinting at JSON in the console. WebMCP DevTools fixes that with a slick side panel, interactive forms, and event timelines—finally, debugging that doesn't suck.

theAIcatchup Apr 08, 2026 3 min read

Screenshot of WebMCP DevTools side panel showing tool list, schema tree, and execute form

⚡ Key Takeaways

WebMCP DevTools turns console.log chaos into interactive panels with forms, timelines, and diffs. 𝕏
Beats Google's inspector for builders—schema-to-form gen, event logging, multi-export. 𝕏
Will accelerate WebMCP adoption like early Service Worker tools did for PWAs. 𝕏

Published by

theAIcatchup

Ship faster. Build smarter.

#AI agent debugging #AI agent tools #Chrome extension #WebMCP #WebMCP DevTools #navigator.modelContext

Worth sharing?

Get the best Developer Tools stories of the week in your inbox — no noise, no spam.

Originally reported by dev.to

⚡ Key Takeaways

The 60-Second TL;DR

theAIcatchup

Share this article

Worth sharing?

Related Stories

WebMCP: Ditching Dumb Screenshots for Smart Web Tools

X's Open Algorithm Powers This Free Chrome Extension That Predicts Tweet Reach Live

Solvoke Synap Ends AI Context Fragmentation — A Solo Dev's Local Fix for Claude, ChatGPT, and Cursor

MCP Servers: Erasing Script Hell and REST's Reign in Enterprise Glue

Stay in the loop