Chrome DevTools logo

Chrome DevTools

OrganizationPopular
ChromeDevTools

Chrome DevTools for coding agents

PublisherChromeDevTools
Repositorychrome-devtools-mcp
LanguageTypeScript
Forks
4.4K
Stars
52.4K
Available tools
29
Transport typestdio
Categories
LicenseApache-2.0
Links
  • Connect tools to AI workflows

    Chrome DevTools exposes MCP capabilities that can be used by compatible AI clients and agents.

  • 29 available tools

    Browse the callable actions below, including names and descriptions when provided by the server.

  • Ready-to-copy setup

    Use the installation snippets to configure this server in your preferred MCP client.

  • Open source signals

    52.4K stars and 4.4K forks from the linked repository.

Chrome DevTools for agents

npm chrome-devtools-mcp package

Chrome DevTools for agents (chrome-devtools-mcp) lets your coding agent (such as Antigravity, Claude, Cursor or Copilot) control and inspect a live Chrome browser. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to the full power of Chrome DevTools for reliable automation, in-depth debugging, and performance analysis. A CLI is also provided for use without MCP.

Tool reference | Changelog | Contributing | Troubleshooting | Design Principles

Key features

  • Get performance insights: Uses Chrome DevTools to record traces and extract actionable performance insights.
  • Advanced browser debugging: Analyze network requests, take screenshots and check browser console messages (with source-mapped stack traces).
  • Reliable automation. Uses puppeteer to automate actions in Chrome and automatically wait for action results.

Disclaimers

chrome-devtools-mcp exposes content of the browser instance to the MCP clients allowing them to inspect, debug, and modify any data in the browser or DevTools. Avoid sharing sensitive or personal information that you don't want to share with MCP clients.

chrome-devtools-mcp officially supports Google Chrome and Chrome for Testing only. Other Chromium-based browsers may work, but this is not guaranteed, and you may encounter unexpected behavior. Use at your own discretion. We are committed to providing fixes and support for the latest version of Extended Stable Chrome.

Performance tools may send trace URLs to the Google CrUX API to fetch real-user experience data. This helps provide a holistic performance picture by presenting field data alongside lab data. This data is collected by the Chrome User Experience Report (CrUX). To disable this, run with the --no-performance-crux flag.

Usage statistics

Google collects usage statistics (such as tool invocation success rates, latency, and environment information) to improve the reliability and performance of Chrome DevTools MCP.

Data collection is enabled by default. You can opt-out by passing the --no-usage-statistics flag when starting the server:

json
"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google handles this data in accordance with the Google Privacy Policy.

Google's collection of usage statistics for Chrome DevTools MCP is independent from the Chrome browser's usage statistics. Opting out of Chrome metrics does not automatically opt you out of this tool, and vice-versa.

Collection is disabled if CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS or CI env variables are set.

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

Getting started

Add the following config to your MCP client:

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

[!NOTE] Using chrome-devtools-mcp@latest ensures that your MCP client will always use the latest version of the Chrome DevTools MCP server.

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

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

See Slim tool reference.

MCP Client configuration

For setup instructions specific to your editor or agent (e.g. Antigravity, Claude Code, Cursor, VS Code), please see our Client Configurations Guide.

Your first prompt

Enter the following prompt in your MCP Client to check if everything is working:

Check the performance of https://developers.chrome.com

Your MCP client should open the browser and record a performance trace.

[!NOTE] The MCP server will start the browser automatically once the MCP client uses a tool that requires a running browser instance. Connecting to the Chrome DevTools MCP server on its own will not automatically start the browser.

Tools

If you run into any issues, checkout our troubleshooting guide. See the full Tool Reference for a complete list of all supported MCP capabilities.

Configuration

Find the complete list of server parameters (e.g., --headless, --isolated, --slim) and how to configure WebSocket connections in the Configuration Guide.

Advanced Usage

For advanced features such as handling concurrent sessions, persistent user data directories, connecting to a running Chrome instance instead of starting a new one, or debugging on Android, see our Advanced Usage Guide.

Integrating as a browser subagent

If you are developing agentic tooling and want to provide an integrated browser subagent as part of your product, we recommend building on top of Chrome DevTools for agents.

For a reference implementation, see the Gemini CLI browser agent documentation.

Installation

TypingMind
Prerequisites:

Node.js 18+

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

Available Tools

  • click

    Clicks on the provided element

  • close_page

    Closes the page by its index. The last open page cannot be closed.

  • drag

    Drag an element onto another element

  • emulate

    Emulates various features on the target page.

  • evaluate_script

    Evaluate a JavaScript function inside the target page. Returns the response as JSON, so returned values have to be JSON-serializable.

  • fill

    Type text into an input, text area or select an option from a element.

  • fill_form

    Fill out multiple form elements (inputs, selects, checkboxes, radios) at once. ALWAYS prefer this tool over multiple individual 'fill' or 'click' calls when interacting with forms. It is significantly faster, more reliable, and reduces turn count. Example: Fill username, password, and check "Remember Me" in one call.

  • get_console_message

    Gets a console message by its ID. You can get all messages by calling list_console_messages.

  • get_network_request

    Gets a network request by an optional reqid, if omitted returns the currently selected request in the DevTools Network panel.

  • handle_dialog

    If a browser dialog was opened, use this command to handle it

  • hover

    Hover over the provided element

  • lighthouse_audit

    Get Lighthouse score and reports for accessibility, SEO, best practices, and agentic browsing. This excludes performance. For performance audits, run performance_start_trace

  • list_console_messages

    List all console messages for the target page since the last navigation.

  • list_network_requests

    Lists the most recent requests for the target page since the last navigation.

  • list_pages

    Get a list of pages open in the browser.

  • navigate_page

    Go to a URL, or back, forward, or reload. Use project URL if not specified otherwise.

  • new_page

    Open a new tab and load a URL. Use project URL if not specified otherwise.

  • performance_analyze_insight

    Provides more detailed information on a specific Performance Insight of an insight set that was highlighted in the results of a trace recording.

  • performance_start_trace

    Start a performance trace on the target webpage. Use to find frontend performance issues, Core Web Vitals (LCP, INP, CLS), and improve page load speed.

  • performance_stop_trace

    Stop the active performance trace recording on the target webpage.

  • press_key

    Press a key or key combination. Use this when other input methods like fill() cannot be used (e.g., keyboard shortcuts, navigation keys, or special key combinations).

  • resize_page

    Resizes the page's window so that the page has specified dimension

  • select_page

    Select a page as a context for future tool calls.

  • take_heapsnapshot

    Capture a heap snapshot of the target page. Use to analyze the memory distribution of JavaScript objects and debug memory leaks.

  • take_screenshot

    Take a screenshot of the page or element.

  • take_snapshot

    Take a text snapshot of the target page based on the a11y tree. The snapshot lists page elements along with a unique identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected in the DevTools Elements panel (if any).

  • type_text

    Type text using keyboard into a previously focused input

  • upload_file

    Upload a file through a provided element.

  • wait_for

    Wait for the specified text to appear on the selected page.

Use Chrome DevTools MCP with multiple AI models

TypingMind connects MCP tools at the workspace level, so once Chrome DevTools is connected, you can use it with different AI models in TypingMind instead of setting it up separately for each model. This MCP runs locally through the TypingMind MCP connector on your device.

Setup guide to use the local connector

Use this when the MCP server needs access to local files, apps, or private resources on your computer.

1

Open the MCP settings

In TypingMind, go to Settings, Advanced Settings, then Model Context Protocol and choose Setup Connector.

  1. Open TypingMind in your browser.
  2. Click the Settings icon.
  3. Go to Advanced Settings.
  4. Open the Model Context Protocol section.
  5. Click Setup Connector and choose This Device.
TypingMind MCP connector setup screen with This Device selected
2

Run the connector command

Choose This Device, copy the command from TypingMind, and run it in Terminal. Keep the process running while you use MCP.

  1. Copy the setup command shown by TypingMind.
  2. Open Terminal on macOS or Windows Terminal on Windows.
  3. Paste and run the command.
  4. Approve the package install if Terminal asks you to proceed.
  5. Keep the Terminal window running while using MCP tools.
3

Add Chrome DevTools as a server

When the connector status is Ready, click Edit Servers and paste the MCP server configuration.

  1. Wait until the connector status shows Ready.
  2. Click Edit Servers.
  3. Paste the Chrome DevTools MCP server configuration.
  4. Save the server list.
  5. Refresh if you want to confirm the connector is still ready.
TypingMind MCP settings showing active server and Edit Servers button
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}
4

Use it across models

Save the server list, open Plugins, enable the Chrome DevTools MCP tools, then select any supported AI model in TypingMind and use the tools in chat or assign them to an AI agent.

  1. Open the Plugins page in TypingMind.
  2. Enable the Chrome DevTools MCP tools.
  3. Start a chat and choose the AI model you want to use.
  4. Use the MCP tools in chat or assign them to an AI agent.
  5. Switch to another AI model whenever needed without reconnecting MCP.
TypingMind chat using enabled MCP tools with a selected AI model
Can you use Chrome DevTools to help me with this task?
Chrome DevTools
Sure. I read it.
Here is what I found using Chrome DevTools.

Frequently asked questions

What is the Chrome DevTools MCP server used for?

Chrome DevTools is an MCP server that lets compatible AI clients connect to external tools and context. In TypingMind, you can add this MCP server once and make its tools available in your AI workspace.

Can I use Chrome DevTools MCP with multiple AI models in TypingMind?

Yes. TypingMind connects MCP tools at the workspace level, so you can use Chrome DevTools with different AI models such as Claude, ChatGPT, Gemini, or other models you have configured in TypingMind without setting up the MCP server separately for each model.

Why use Chrome DevTools MCP with TypingMind?

TypingMind is one of the best frontends for LLM chat because it brings multiple AI models, prompts, plugins, AI agents, API keys, and MCP tools into one workspace. With Chrome DevTools connected, you can use its MCP tools across your preferred models while keeping your chat workflow organized in TypingMind.

How do I connect Chrome DevTools MCP to TypingMind?

Chrome DevTools runs through the TypingMind local MCP connector. This is best when the MCP server needs access to local files, desktop apps, command-line tools, or private resources on your computer.

What tools does Chrome DevTools MCP provide in TypingMind?

Chrome DevTools exposes 29 MCP tools that can be enabled from the TypingMind Plugins page and used in chat or assigned to AI agents.

Do I need to share my API keys with TypingMind to use Chrome DevTools MCP?

No. TypingMind is local-first and lets you keep your model providers, API keys, prompts, and MCP configuration under your control. If Chrome DevTools requires authentication, add the required headers, OAuth settings, or local configuration for that MCP server when you create the connection.

Related MCP Servers

View all

Set up your own AI workspace now

Get notified about new features and future giveaways by subscribing to our newsletter 👇