Setup Beginner

Get the Chrome DevTools MCP server installed, configure it in Claude Code, launch Chrome with remote debugging enabled, and run your first browser interaction from the terminal.

1. Installing the Chrome DevTools MCP Server

The chrome-devtools MCP server is an npm package that you can install globally or configure directly in Claude Code's settings:

Terminal

# Option 1: Install globally
$ npm install -g @anthropic/chrome-devtools-mcp

# Option 2: Use npx (no install needed)
# Configure Claude Code to use npx directly (see step 2)

2. Configuring in Claude Code Settings

Add the MCP server to your Claude Code configuration. You can configure it at the project level (.claude/settings.json) or globally:

JSON (.claude/settings.json)

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

Claude Code CLI: You can also add it with the command: claude mcp add chrome-devtools npx -y @anthropic/chrome-devtools-mcp

3. Launching Chrome with Debugging Port

Chrome needs to be started with remote debugging enabled so the MCP server can connect to it:

Terminal (macOS)

# macOS
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
    --remote-debugging-port=9222

Terminal (Windows)

# Windows
$ "C:\Program Files\Google\Chrome\Application\chrome.exe" ^
    --remote-debugging-port=9222

Terminal (Linux)

# Linux
$ google-chrome --remote-debugging-port=9222

Important: Close all existing Chrome windows before launching with the debugging port. If Chrome is already running, the debugging port flag is ignored. Alternatively, use a different user data directory: --user-data-dir=/tmp/chrome-debug

4. Connecting Claude Code to the Browser

Once Chrome is running with debugging enabled, start Claude Code and begin interacting with the browser:

Claude Code Session

$ claude

# List available browser tabs
Claude > List all open browser pages

# Select a specific tab
Claude > Select the tab that has "My App" in the title

# Navigate to a URL
Claude > Navigate to http://localhost:3000

5. Your First Interaction

Try these basic interactions to verify everything is working:

Claude Code Session

# Take a screenshot of the current page
Claude > Take a screenshot of the page

# Claude captures the screenshot and shows you the page state

# Click a button
Claude > Click the "Sign In" button on the page

# Fill a form field
Claude > Fill the email input with "test@example.com"

# Run JavaScript to check something
Claude > What is the current page title? Run document.title
         in the browser

Action	Claude Code Prompt	MCP Tool Used
Screenshot	"Take a screenshot"	take_screenshot
Click	"Click the Login button"	click
Type	"Fill the email field with test@test.com"	fill
Navigate	"Go to /dashboard"	navigate_page
Console	"Show me the console messages"	list_console_messages
JavaScript	"Run document.querySelectorAll('button').length"	evaluate_script

Try It Yourself

Set up the MCP server, launch Chrome with debugging enabled, and use Claude Code to take a screenshot, click a button, and read the page title. Get comfortable with the basic interaction flow before moving to advanced debugging.

Next: Debugging →

← Introduction Debugging →

Ready to Go Deeper?

Live instructor-led courses from our partners. Affiliate disclosure.

🧠

AI & ML Courses - 30% Off

Live instructor-led AI, machine learning, data science, and cloud courses for working professionals. Use code Limited30 at checkout.

Edureka

📊

DataCamp - AI & Data Science

Hands-on Python, machine learning, and AI courses with interactive exercises and real projects.

DataCamp

🎓

edX - Top AI Courses

University-level AI courses from MIT, Harvard, Stanford. Earn certificates that employers recognize.

edX