Chrome DevTools MCP Server

How to use

Use the Chrome DevTools MCP server to connect your MCP client to a running or freshly launched Chrome instance. Your agent can automate browser actions, collect performance traces, analyze network activity, take screenshots, and read console messages. Start with a simple prompt that asks for a performance check or a quick UI interaction, and observe the browser window opening (if not running headlessly) and a trace being recorded. If you connect to a running Chrome instance, you can preserve session state between manual and automated testing and avoid signing into websites that would block automated sessions.

How to install

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

Connecting to a running Chrome instance

You can connect to an already-running Chrome instance by enabling remote debugging and providing the browser URL or WebSocket endpoint to the MCP server. This lets you share state between manual testing and agent-driven automation and can be necessary when you are operating inside a sandbox.

Your first prompt

Enter a prompt to check the performance of a website and start a trace. For example: Check the performance of https://developers.chrome.com. The MCP client should open the browser and record a performance trace.

Security and privacy considerations

The MCP server exposes the contents of the browser and DevTools to MCP clients. Avoid sharing sensitive or personal information you do not want to expose to those clients.

Troubleshooting tips

If you encounter issues, review the troubleshooting guide for common problems with connecting to a running Chrome instance, remote debugging setup, and permission prompts. Ensure the browser is started with the correct debugging flags when you rely on manual connections.

Notes on automatic vs manual connection

Automatic connection (available in newer Chrome channels) lets the MCP server connect to a running Chrome instance, sharing state with manual testing. Manual connection uses a remote debugging port to attach to a browser already started outside the MCP server.

First steps recap

1) Install the Chrome DevTools MCP server in your MCP client. 2) Start Chrome with remote debugging enabled or connect to an existing instance. 3) Run a simple check prompt to confirm the setup and capture a trace.

Input automation.click

Click interactions to simulate user input on elements.

Input automation.drag

Drag actions to move or reveal UI elements.

Input automation.fill

Fill individual fields with specified values.

Input automation.fill_form

Fill out an entire form with provided values.

Input automation.handle_dialog

Handle modal or alert dialogs during automation.

Input automation.hover

Hover the cursor over elements to trigger hover states.

Input automation.press_key

Press a keyboard key or key combination.

Input automation.upload_file

Upload a file to an input element.

Navigation automation.close_page

Close the current tab or page.

Navigation automation.list_pages

List all open pages in the browser.

Navigation automation.navigate_page

Navigate to a specified URL within the page.

Navigation automation.new_page

Open a new browser tab or window.

Navigation automation.select_page

Switch focus to a specific page by index or ID.

Navigation automation.wait_for

Wait for a condition or network/request/event to occur.

Emulation.emulate

Emulate device metrics, user agent, or other environment aspects.

Emulation.resize_page

Change the viewport size for rendering tests.

Performance.performance_analyze_insight

Analyze performance data to extract actionable insights.

Performance.performance_start_trace

Start recording a performance trace.

Performance.performance_stop_trace

Stop and retrieve the recorded performance trace.

Network.get_network_request

Fetch a specific network request by ID.

Network.list_network_requests

List all network requests captured during a session.

Debugging.evaluate_script

Evaluate a JavaScript snippet in the page context.

Debugging.get_console_message

Retrieve messages from the browser console.

Debugging.list_console_messages

List all console messages captured during a session.

Debugging.take_screenshot

Capture a screenshot of the current page.

Debugging.take_snapshot

Capture a DOM snapshot or page state.