WebMCP DevTools in Chrome 149: Debug How AI Agents See Your Website

Chrome 149 quietly shipped something developers who expose WebMCP tools need to know about: a dedicated DevTools panel for inspecting how AI agents see and interact with your page. It's in the Application tab, under WebMCP, and it's the first native tooling for understanding what agents actually do when they hit your site.

What is WebMCP?

WebMCP is a browser standard announced at Google I/O 2026 that lets web developers expose JavaScript functions as tools that AI agents can call directly in the browser. Instead of an agent using web_fetch to scrape your page, your page can declare structured tools — with names, descriptions, and typed input schemas — that agents invoke through a standardized JavaScript interface.

The Draft Community Group Report landed on July 10, 2026. Google, Expedia, Shopify, Booking.com, and others are already experimenting with it. The basic idea is that a site with WebMCP tools becomes natively agent-callable: no scraping, no guessing at structure, no stale crawl cache.

What the DevTools panel shows

Open DevTools in Chrome 149 (or newer), go to Application → WebMCP, and you get four views:

Registration — which WebMCP tools your page has registered, their names, descriptions, and full input schemas. If you've implemented the Imperative API (JavaScript-based tools), you'll see them here. If you used the Declarative API (HTML form actions), those appear too.

Schema validation — Chrome validates your tool schemas against the WebMCP spec and surfaces errors inline. Missing required fields, unsupported types, and malformed descriptions all show up here before an agent ever tries to call your tool.

Invocation history — a log of every tool call that happened in the current session: the inputs the agent passed, the output your tool returned, and the timestamp. This is the most useful panel for debugging because it shows exactly what an agent received, not what you hoped it would receive.

Tool status — whether each tool is currently active, disabled, or erroring. Useful for catching registration failures that would otherwise be invisible.

The two WebMCP APIs

The spec defines two approaches to exposing tools:

The Declarative API lets you annotate existing HTML forms with WebMCP attributes. If you have a search form, you can mark it up so agents can invoke the search tool by filling the form inputs. No JavaScript required — the browser handles the invocation.

<form webmcp-tool="search_docs"
      webmcp-description="Search the documentation">
  <input name="query" webmcp-description="Search query" />
  <button type="submit">Search</button>
</form>

The Imperative API lets you register tools programmatically in JavaScript, with full control over inputs, outputs, and execution:

navigator.webmcp.registerTool({
  name: 'get_pricing',
  description: 'Get current pricing for a plan',
  inputSchema: {
    type: 'object',
    properties: {
      plan: { type: 'string', enum: ['free', 'pro', 'team'] }
    },
    required: ['plan']
  },
  execute: async ({ plan }) => {
    const res = await fetch(`/api/pricing?plan=${plan}`)
    return res.json()
  }
})

The Imperative API is what most applications will use for complex tools. The Declarative API is a lighter-touch option for existing HTML forms.

What the DevTools panel reveals that you'd otherwise miss

The invocation history is the panel that will surprise you. When an agent calls your tool, it doesn't necessarily pass the inputs you designed for. Agents infer what inputs to pass from your tool description — which means a vague description produces unexpected inputs.

If your tool description says "get product info" and the agent passes product_name: "the blue one" instead of a product ID, you see that in the invocation log. This kind of mismatch is common and invisible without tooling — agents are guessing based on your description, and your description is the only spec they have.

The schema validation panel catches a different class of problem: tools that won't invoke at all because they fail spec validation. Missing descriptions (required by the spec), unsupported JSON Schema types, or tools registered after the page has been indexed by the agent — all surface here before you ship.

WebMCP tools vs. indexed knowledge

WebMCP tools are good at real-time, stateful actions: check stock, get a price quote, look up an order. They run in the browser session where the agent is active, which means they can read cookies, call your authenticated APIs, and return live data.

What they're not good at is knowledge: explaining your product, answering documentation questions, covering the breadth of what your site says. A WebMCP tool that takes a query and returns a documentation answer is reinventing what RAG is for — and doing it worse, because the tool has no chunk storage, no embedding search, and no citation mechanism.

The pattern that works is layered. An indexed knowledge layer (what AgentReady provides) handles "what does this product do, how do I use it, what are the pricing tiers" — queries that need breadth across the full site. WebMCP tools handle "place an order, check availability, fetch my account status" — queries that need live data and side effects.

The DevTools panel makes this distinction concrete: you can see exactly what agents ask your WebMCP tools and decide which questions belong in a tool versus in indexed documentation.

Enabling WebMCP DevTools

In Chrome 149, the panel is in the Application tab and marked as experimental. Enable it at chrome://flags/#enable-webmcp-devtools if it doesn't appear. The panel only shows data when you have at least one WebMCP tool registered on the current page — visiting a page without WebMCP tools shows an empty state.

For testing, you can invoke tools manually from the panel using the "Invoke" button next to each registered tool. This lets you test your tool's schema and output without needing an actual agent session.