← Claude Code Hub
Nov 6, 2026 · 5 min read ✦ Tip #256

Test WebMCP tools from Claude Code: use the Chrome DevTools MCP, not /chrome

WebMCP tools your page registers can be listed and run from Claude Code through the Chrome DevTools MCP, before a real agent touches them. It takes two flags, and without Chrome's the list comes back empty with no error at all.

The path from Claude Code to your page: Claude Code uses list_webmcp_tools and execute_webmcp_tool, the Chrome DevTools MCP starts with --categoryExperimentalWebmcp, Chrome 150 or later runs with --enable-features=WebMCP and the page registers its tools on document.modelContext; without the Chrome flag the list comes back empty with no error

TL;DR Add the Chrome DevTools MCP with --categoryExperimentalWebmcp and --chromeArg=--enable-features=WebMCP, register your tools on document.modelContext, and ask Claude to list and call them. If the list comes back empty, check Chrome's flag first.

WebMCP is a proposed standard for a page to register tools, each with a name, a description and a JSON Schema, that a browser agent calls instead of clicking around blind. An MCP server lives on a server; a WebMCP tool lives in the page, for as long as it's open.

The Claude in Chrome extension doesn't discover them (feature request #76809 is still open), so /chrome can't test them. The Chrome DevTools MCP can: it talks to Chrome over CDP, the DevTools protocol, and version 1.12.0 ships an experimental category, off by default, with two tools: list_webmcp_tools and execute_webmcp_tool.

What happens underneath

The MCP uses CDP's WebMCP domain: WebMCP.enable to receive the tools and WebMCP.invokeTool to call them. This is the output of those same calls against Chromium 153, in a container, with a page that registers add_to_cart, first without the flag and then with it:

ARGS [] version 153.0.8010.12
 title: Shop {"document":false,"navigator":false}
 WebMCP.enable: ok
 tools: []
ARGS ["--enable-features=WebMCP"] version 153.0.8010.12
 title: Shop {"document":true,"navigator":false}
 WebMCP.enable: ok
 tools: [{"name":"add_to_cart","frameId":true,"keys":["name","description","inputSchema","frameId","stackTrace"]}]
 invoke: {"invocationId":"B23A6B16D45E9B5CFB7968D30AB26696"}
 responded: {"invocationId":"B23A6B16D45E9B5CFB7968D30AB26696","status":"Completed","output":"Added 12345. Cart has 1 item(s)."}
 cart: 12345

Two things to notice:

  • Without the flag, WebMCP.enable answers ok and there are no tools. Nothing fails, so the MCP just tells you No WebMCP tools available.
  • navigator.modelContext doesn't exist, flag or no flag. The object lives on document.

On my Mac, with Chrome 154 and chrome-devtools-mcp 1.12.0, Claude Code listed the page's tool and called it; without the Chrome flag, the list came back empty.

The steps

1. Add the MCP with both flags

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest --categoryExperimentalWebmcp --chromeArg=--enable-features=WebMCP
Added stdio MCP server chrome-devtools with command: npx -y chrome-devtools-mcp@latest --categoryExperimentalWebmcp --chromeArg=--enable-features=WebMCP to user config

--categoryExperimentalWebmcp turns on the two tools. --chromeArg hands the flag to the Chrome the MCP launches itself. If you already had the server, claude mcp add answers MCP server chrome-devtools already exists in user config: remove it first with claude mcp remove chrome-devtools --scope user. Start a new session so the server comes up with the flags. Scopes are covered in your first MCP server.

2. Register the tool on document.modelContext

if (document.modelContext) {
  document.modelContext.registerTool({
    name: 'add_to_cart',
    description: 'Add a product to the cart by its id',
    inputSchema: {
      type: 'object',
      properties: { productId: { type: 'string', description: 'Product id, e.g. 12345' } },
      required: ['productId'],
    },
    execute: async ({ productId }) => {
      addToCart(productId); // your logic
      return `Added ${productId}.`;
    },
  });
}

The if leaves the page untouched in a browser without WebMCP. Copy an example that uses navigator.modelContext and, in Chrome 153, it's undefined and the script breaks right there.

3. Ask Claude to list it and call it

Open http://localhost:5173, list its WebMCP tools and call add_to_cart
with product 12345. Tell me what it returns and whether the console
shows any errors.

Claude opens the page, calls list_webmcp_tools, which returns each tool's name, description, inputSchema and annotations, then execute_webmcp_tool with the name and the input as JSON. The reply carries status, output and, if your execute throws, error with the exception. Ask it to review the schema the way another agent would read it too: a vague description shows up here, not in production.

4. If you'd rather start Chrome yourself

--chromeArg only applies when the MCP launches Chrome. If you launch it, the flag goes on your command and the MCP connects through --browserUrl:

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-webmcp \
  --enable-features=WebMCP

claude mcp add chrome-webmcp --scope user -- npx -y chrome-devtools-mcp@latest --categoryExperimentalWebmcp --browserUrl=http://127.0.0.1:9222

When the list is empty or the call fails

  • No WebMCP tools available. Open the page's console and type document.modelContext: if it's undefined, WebMCP isn't on in that Chrome: it's missing the flag, or it's older than 149 (the MCP asks for 150). If it exists, your registerTool never ran.
  • One tool is missing. Tools with annotations: { debugging: true } (Chrome 156) don't show up in list_webmcp_tools: they go to list_3p_developer_tools, which needs --categoryExperimentalThirdParty.
  • Tool add_to_cart not found. The name doesn't match, or the page navigated away or unregistered it through its AbortSignal before the call.
  • The browser is already running for <dir>. Use --isolated to run multiple browser instances. Two copies of the MCP share one profile. Add --isolated to one of them.
Flag Where What for
--categoryExperimentalWebmcp MCP Turns on list_webmcp_tools and execute_webmcp_tool
--chromeArg=--enable-features=WebMCP MCP Passes the flag to the Chrome the MCP launches
--enable-features=WebMCP Chrome Creates document.modelContext in the page
--browserUrl=http://127.0.0.1:9222 MCP Uses a Chrome you started with remote debugging
--isolated MCP Temporary profile, for two servers at once

If you're unsure whether to reach for the extension or this MCP for everything else, they don't do the same job.

Official docs: Debug WebMCP tools with AI agents · Connect Claude Code to tools via MCP

Requirements

  • Chrome 150 or later, which is what the MCP asks for (Chrome's docs say 149, with the origin trial or the flag). WebMCP is experimental: the flags and the API may change.
  • Node 20.19 or 22.12 and up for chrome-devtools-mcp 1.12.0.
  • Tested with Chromium 153.0.8010.12 in a container on November 6, 2026, and with Chrome 154 on my Mac on October 31.

Found this useful? See more of wmedia.es in your Google results.

Add wmedia.es as a preferred source on Google
Free guide

The 51 essentials, as a guide.

One page per tip. Five chapters. What I actually use daily in production. No theory, no fluff.

  • I. Getting started 10 tips
  • II. Awareness 3 tips
  • III. Mastery 22 tips
  • IV. Autonomy 10 tips
  • V. Comparison 6 tips
Are you a professional Web developer?

You'll receive the guide by email · You join the Gravitas newsletter · Unsubscribe anytime

of 51
#

Wmedia · 51 Tips
Free guide · 51 tips · 5 chapters

The 51 essentials, as a guide.

Are you a professional Web developer? · Unsubscribe anytime
How I use AI

My Claude Code workflow.

The skills, agents and instructions I use as a professional Software Engineer. It's called Craft, and it's a plugin you can install.

See the skills

Want the 51 Claude Code essentials as a guide?