webview-devtools-mcp

DevTools for any WebView — no remote-debugging port required. Works in Safari/iOS WebView/Lark Web App and more. Based on chrome-devtools-mcp and chii.

webview-devtools-mcp is a Model Context Protocol (MCP) server for AI coding agents such as Claude Code, Cursor, Copilot, Gemini CLI, and Antigravity. It lets an agent inspect and automate a WebView or web page that you explicitly instrument with target.js: take snapshots and screenshots, click and type, inspect console messages and network requests, evaluate JavaScript, and debug live app state.

Unlike browser-launching MCP servers, this server does not open a browser tab for you. It starts a local debugging bridge and waits for your WebView/page to connect back.

Tool reference | Troubleshooting

Screenshots

Lark Web App

How it works

Your MCP client starts webview-devtools-mcp.
The server listens on --host/--port and serves target.js.
You add a <script> tag for that target.js to the starting HTML that your WebView loads.
When the WebView opens or reloads, it connects to the MCP server.
Your agent can list the connected page and drive it through the MCP tools.

A connected page only exists while the instrumented WebView/page is open. If the WebView reloads or closes, the target may disappear and then reconnect.

Update checks

By default, the server periodically checks the npm registry for updates and logs a notification when a newer version is available. You can disable these update checks by setting the CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS environment variable.

Requirements

Node.js LTS version.
npm

Getting started

1. Add the MCP server to your client

Add the following config to your MCP client:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": ["-y", "webview-devtools-mcp@latest"]
    }
  }
}

Note

Using webview-devtools-mcp@latest ensures that your MCP client will always use the latest version of the webview-devtools-mcp.

By default the server listens on 127.0.0.1:9333. If you change the port, the script URL you inject must use the same port:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": ["-y", "webview-devtools-mcp@latest", "--port=9334"]
    }
  }
}

If you are interested in doing only basic browser tasks, use the --slim mode:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": ["-y", "webview-devtools-mcp@latest", "--slim"]
    }
  }
}

See Slim tool reference.

2. Inject `target.js` into your starting HTML

Add this script tag to the HTML document that your WebView loads first:

<script src="http://127.0.0.1:9333/target.js"></script>

If you configured a different --host or --port, use that exact host and port in the script URL:

<script src="http://<host>:<port>/target.js"></script>

For best results, place the script early in the document, for example in <head>, so console, network, and page lifecycle activity is available as early as possible.

Important

The host in the script URL is resolved from the WebView's runtime environment, not from your MCP client. 127.0.0.1 works only when the WebView and the MCP server run on the same machine/runtime.

3. Open or reload the WebView

After your MCP client has started the server and your WebView has loaded the instrumented HTML, ask your agent to inspect the connected page, for example:

List connected pages using webview-devtools-mcp and take a snapshot of the current page.

If no page appears, reload the WebView and verify that the target.js URL is reachable from the WebView environment.

Remote WebViews and mobile devices

When the MCP server runs on your PC but the WebView runs on a phone, simulator, embedded device, or another machine, do not use 127.0.0.1 in the injected script. On the phone, 127.0.0.1 means the phone itself, not your PC.

Use a host address that the device can reach:

Start the MCP server on an interface reachable from the device, for example:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "webview-devtools-mcp@latest",
        "--host=0.0.0.0",
        "--port=9333"
      ]
    }
  }
}

Find your PC's LAN IP address, for example 192.168.1.23.
In the WebView's starting HTML, inject the PC address, not localhost:
```
<script src="http://192.168.1.23:9333/target.js"></script>
```
Make sure the phone and PC are on the same network and that your firewall allows inbound TCP connections to the selected port.
Open or reload the WebView, then have your agent call list_pages or take a snapshot.

For emulators, use the address that the emulator exposes for the host machine when appropriate (for example, Android Emulator commonly uses 10.0.2.2). The key rule is the same: the WebView must be able to fetch http://<host>:<port>/target.js and open the bridge connection back to that host and port.

MCP Client configuration

Amp

Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install webview-devtools-mcp using the CLI:

amp mcp add webview-devtools -- npx webview-devtools-mcp@latest

Antigravity

To use webview-devtools-mcp follow the instructions from Antigravity's docs to install a custom MCP server. Add the following config to the MCP servers config:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "webview-devtools-mcp@latest"
      ]
    }
  }
}

Claude Code

Install via CLI (MCP only)

Use the Claude Code CLI to add the webview-devtools-mcp (guide):

claude mcp add webview-devtools --scope user npx webview-devtools-mcp@latest

Install as a Plugin (MCP + Skills)

To install webview-devtools-mcp with skills, add the marketplace registry in Claude Code:

/plugin marketplace add ilharp/webview-devtools-mcp

Then, install the plugin:

/plugin install webview-devtools-mcp@webview-devtools-plugins

Restart Claude Code to have the MCP server and skills load (check with /skills).

[!TIP] If the plugin installation fails with a Failed to clone repository error (e.g., HTTPS connectivity issues behind a corporate firewall), see the troubleshooting guide for workarounds, or use the CLI installation method above instead.

Cline

Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.

Codex

Follow the configure MCP guide using the standard config from above. You can also install webview-devtools-mcp using the Codex CLI:

codex mcp add webview-devtools -- npx webview-devtools-mcp@latest

Command Code

Use the Command Code CLI to add webview-devtools-mcp (MCP guide):

cmd mcp add webview-devtools --scope user npx webview-devtools-mcp@latest

Copilot CLI

Start Copilot CLI:

copilot

Start the dialog to add a new MCP server by running:

/mcp add

Configure the following fields and press CTRL+S to save the configuration:

Server name: webview-devtools
Server Type: [1] Local
Command: npx -y webview-devtools-mcp@latest

Copilot / VS Code

Install as a Plugin (Recommended)

The easiest way to get up and running is to install webview-devtools-mcp as an agent plugin. This bundles the MCP server and all skills together, so your agent gets both the tools and the expert guidance it needs to use them effectively.

Open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux).
Search for and run the Chat: Install Plugin From Source command.
Paste in our repository name: ilharp/webview-devtools-mcp.

That's it! Your agent is now supercharged with webview-devtools-mcp capabilities.

Cursor

Click the button to install:

Or install manually:

Go to Cursor Settings -> MCP -> New MCP Server. Use the config provided above.

Factory CLI

Use the Factory CLI to add webview-devtools-mcp (guide):

droid mcp add webview-devtools "npx -y webview-devtools-mcp@latest"

Gemini CLI

Install webview-devtools-mcp using the Gemini CLI.

Project wide:

# Either MCP only:
gemini mcp add webview-devtools npx webview-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ilharp/webview-devtools-mcp

Globally:

gemini mcp add -s user webview-devtools npx webview-devtools-mcp@latest

Alternatively, follow the MCP guide and use the standard config from above.

Gemini Code Assist

Follow the configure MCP guide using the standard config from above.

Grok Build CLI

grok mcp add webview-devtools npx webview-devtools-mcp@latest

See the docs for more options

JetBrains AI Assistant & Junie

Kiro

In Kiro Settings, go to Configure MCP > Open Workspace or User MCP Config > Use the configuration snippet provided above.

Or, from the IDE Activity Bar > Kiro > MCP Servers > Click Open MCP Config. Use the configuration snippet provided above.

Mistral Vibe

Add in ~/.vibe/config.toml:

[[mcp_servers]]
name = "webview-devtools"
transport = "stdio"
command = "npx"
args = ["webview-devtools-mcp@latest"]

OpenCode

Add the following configuration to your opencode.json file. If you don't have one, create it at ~/.config/opencode/opencode.json (guide):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "webview-devtools": {
      "type": "local",
      "command": ["npx", "-y", "webview-devtools-mcp@latest"]
    }
  }
}

Qoder

In Qoder Settings, go to MCP Server > + Add > Use the configuration snippet provided above.

Alternatively, follow the MCP guide and use the standard config from above.

Qoder CLI

Install webview-devtools-mcp using the Qoder CLI (guide):

Project wide:

qodercli mcp add webview-devtools -- npx webview-devtools-mcp@latest

Globally:

qodercli mcp add -s user webview-devtools -- npx webview-devtools-mcp@latest

Visual Studio

Click the button to install:

Warp

Go to Settings | AI | Manage MCP Servers -> + Add to add an MCP Server. Use the config provided above.

Windsurf

Follow the configure MCP guide using the standard config from above.

Your first prompt

After the WebView is open and connected, enter a prompt like this in your MCP client:

List connected pages using webview-devtools-mcp and take a text snapshot.

Your MCP client should report the connected page and return an text snapshot. From there you can ask it to click, fill forms, evaluate JavaScript, inspect console messages, inspect network requests, or take screenshots.

Note

Connecting to the MCP server alone does not create a page. The page appears only after your instrumented WebView loads target.js and connects back to the server.

Tools

If you run into any issues, checkout our troubleshooting guide.

Input automation (7 tools)
- click
- fill
- fill_form
- hover
- press_key
- type_text
- click_at
Navigation automation (4 tools)
Network (2 tools)
- get_network_request
- list_network_requests
Debugging (7 tools)
Third-party (2 tools)
- execute_3p_developer_tool
- list_3p_developer_tools
WebMCP (2 tools)
- execute_webmcp_tool
- list_webmcp_tools

Configuration

webview-devtools-mcp supports the following configuration option:

--port
- Type: number
- Default: 9333
--host
- Type: string
- Default: 127.0.0.1
--logFile/ --log-file Path to a file to write debug logs to. Set the env variable DEBUG to * to enable verbose logs. Useful for submitting bug reports.
- Type: string
- Default: false
--acceptInsecureCerts/ --accept-insecure-certs If enabled, ignores errors relative to self-signed and expired certificates. Use with caution.
- Type: boolean
- Default: false
--experimentalPageIdRouting/ --experimental-page-id-routing Whether to expose pageId on page-scoped tools and route requests by page ID (useful for concurrent agent sessions).
- Type: boolean
- Default: false
--experimentalDevtools/ --experimental-devtools Whether to enable automation over DevTools targets
- Type: boolean
- Default: false
--experimentalVision/ --experimental-vision Whether to enable coordinate-based tools such as click_at(x,y). Usually requires a computer-use model able to produce accurate coordinates by looking at screenshots.
- Type: boolean
- Default: false
--memoryDebugging/ --memory-debugging, -experimentalMemory Whether to enable memory debugging tools.
- Type: boolean
- Default: false
--experimentalStructuredContent/ --experimental-structured-content Whether to output structured formatted content.
- Type: boolean
- Default: false
--experimentalIncludeAllPages/ --experimental-include-all-pages Whether to include all kinds of pages such as webviews or background pages as pages.
- Type: boolean
- Default: false
--experimentalScreencast/ --experimental-screencast Exposes experimental screencast tools (requires ffmpeg). Install ffmpeg https://www.ffmpeg.org/download.html and ensure it is available in the MCP server PATH.
- Type: boolean
- Default: false
--experimentalFfmpegPath/ --experimental-ffmpeg-path Path to ffmpeg executable for screencast recording.
- Type: string
- Default: false
--categoryExperimentalWebmcp/ --category-experimental-webmcp Set to true to enable debugging WebMCP tools. Requires Chrome 149+ with the following flags: --enable-features=WebMCP,DevToolsWebMCPSupport
- Type: boolean
- Default: false
--blockedUrlPattern/ --blocked-url-pattern Restricts browser's network access by blocking specified URL patterns (uses https://urlpattern.spec.whatwg.org/). Silently detaches from targets with blocked URLs upon connection, and blocks runtime requests (including navigations and subresources). Accepts an array of patterns.
- Type: array
- Default: false
--allowedUrlPattern/ --allowed-url-pattern Restricts browser's network access by allowing only specified URL patterns (uses https://urlpattern.spec.whatwg.org/). Requires Chrome 149+. Silently detaches from targets with unallowed URLs upon connection, and blocks runtime requests (including navigations and subresources). Accepts an array of patterns.
- Type: array
- Default: false
--categoryEmulation/ --category-emulation Set to false to exclude tools related to emulation.
- Type: boolean
- Default: true
--categoryPerformance/ --category-performance Set to false to exclude tools related to performance.
- Type: boolean
- Default: true
--categoryNetwork/ --category-network Set to false to exclude tools related to network.
- Type: boolean
- Default: true
--categoryExtensions/ --category-extensions Set to true to include tools related to extensions. Note: This feature is currently only supported with a pipe connection. autoConnect, browserUrl, and wsEndpoint are not supported with this feature until 149 will be released.
- Type: boolean
- Default: false
--categoryExperimentalThirdParty/ --category-experimental-third-party Set to true to enable third-party developer tools exposed by the inspected page itself
- Type: boolean
- Default: false
--screenshotFormat/ --screenshot-format Override the default output format used by take_screenshot when the caller does not specify one. JPEG and WebP are ~3-5x smaller than PNG, which helps reduce context size in AI conversations. Unset preserves the existing default ("png").
- Type: string
- Choices: jpeg, png, webp
- Default: false
--screenshotQuality/ --screenshot-quality Override the default compression quality (0-100) used by take_screenshot for JPEG and WebP when the caller does not specify one. Lower values mean smaller files. Ignored for PNG. Unset preserves the Puppeteer default.
- Type: number
- Default: false
--screenshotMaxWidth/ --screenshot-max-width Maximum width in pixels for screenshots. If the captured image is wider, it is downscaled (preserving aspect ratio) before being returned. Reduces context size in AI conversations. Unset means no resize.
- Type: number
- Default: false
--screenshotMaxHeight/ --screenshot-max-height Maximum height in pixels for screenshots. If the captured image is taller, it is downscaled (preserving aspect ratio) before being returned. Can be combined with --screenshot-max-width; the smaller scale factor wins. Unset means no resize.
- Type: number
- Default: false
--slim Exposes a "slim" set of 3 tools covering navigation, script execution and screenshots only. Useful for basic browser tasks.
- Type: boolean
- Default: false
--redactNetworkHeaders/ --redact-network-headers If true, redacts some of the network headers considered sensitive before returning to the client.
- Type: boolean
- Default: false
--allowUnrestrictedPaths/ --allow-unrestricted-paths If set, disables the default path restriction that applies when the MCP client does not negotiate the roots capability. By default, file-writing tools are restricted to the OS temp directory when no roots are configured. Use this only when connecting a trusted local client that does not implement MCP roots and requires access to paths outside the temp directory.
- Type: boolean
- Default: false

Pass them via the args property in the JSON configuration. For example:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": ["webview-devtools-mcp@latest", "--port=9334"]
    }
  }
}

Remember to keep the injected script URL in sync with these options:

<script src="http://127.0.0.1:9334/target.js"></script>

Concepts

Instrumented WebViews, not launched browser tabs

webview-devtools-mcp can inspect and automate pages that have loaded target.js. It cannot inject the script into an arbitrary page by itself, and it cannot create a new WebView for you. If list_pages returns no pages, open or reload the WebView and verify that the script URL is reachable from that runtime.

Navigation

navigate_page operates on an already connected page. If navigation takes the WebView to a document that does not load target.js, the page will disconnect and no further tools can operate on it until an instrumented page loads again.

Security and privacy

webview-devtools-mcp exposes the connected page to MCP clients. A connected agent may inspect page content, read console output, observe network requests, execute JavaScript, click, type, and otherwise interact with the page.

Only connect pages and MCP clients that you trust. Avoid opening sensitive personal or production data in an instrumented WebView unless you intend to make it available to the connected MCP client.

When using --host=0.0.0.0 or another non-loopback host for a remote device, the debugging bridge may be reachable by other machines on the network. Use a trusted network, firewall the selected port, and stop the MCP server when you are done.

Known limitations

See Troubleshooting.

Name		Name	Last commit message	Last commit date
Latest commit History 84 Commits
.claude-plugin		.claude-plugin
.claude		.claude
.cursor-plugin		.cursor-plugin
.github		.github
.vscode		.vscode
docs		docs
packages		packages
patches		patches
skills/webview-devtools		skills/webview-devtools
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.gitmodules		.gitmodules
.prettierrc.json		.prettierrc.json
.yarnrc.yml		.yarnrc.yml
AGENTS.md		AGENTS.md
LICENSE		LICENSE
Makefile		Makefile
README.md		README.md
eslint.config.mjs		eslint.config.mjs
gemini-extension.json		gemini-extension.json
package.json		package.json
tsconfig.base.json		tsconfig.base.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

webview-devtools-mcp

Tool reference | Troubleshooting

Screenshots

How it works

Update checks

Requirements

Getting started

1. Add the MCP server to your client

2. Inject `target.js` into your starting HTML

3. Open or reload the WebView

Remote WebViews and mobile devices

MCP Client configuration

Your first prompt

Tools

Configuration

Concepts

Instrumented WebViews, not launched browser tabs

Navigation

Security and privacy

Known limitations

About

Uh oh!

Releases 1

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

webview-devtools-mcp

Tool reference | Troubleshooting

Screenshots

How it works

Update checks

Requirements

Getting started

1. Add the MCP server to your client

2. Inject target.js into your starting HTML

3. Open or reload the WebView

Remote WebViews and mobile devices

MCP Client configuration

Your first prompt

Tools

Configuration

Concepts

Instrumented WebViews, not launched browser tabs

Navigation

Security and privacy

Known limitations

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Contributors

Uh oh!

Languages

2. Inject `target.js` into your starting HTML