Chrome Devtools

Chrome DevTools Skill

Control a real Chrome browser with Claude. The Chrome extension runs inside an authenticated browser session, allowing interaction with sites the user is already logged into -- Gmail, Google Docs, Notion, CRMs, and more.

Overview

Two integration paths exist: Claude Code + Chrome Extension (terminal-based browser control via claude --chrome) and Chrome DevTools MCP (26 browser automation tools via Model Context Protocol). Both operate on a real Chrome instance with existing logins, requiring no re-authentication. The Chrome extension also supports workflow shortcuts, scheduled recurring tasks, and multi-tab coordination independently of Claude Code.

Quick Reference

Not supported: Other Chromium browsers (Brave, Arc, Edge), WSL, headless mode (extension path only; DevTools MCP supports headless), mobile devices.

Common Mistakes

Delegation

• Automate repetitive browser workflows across sites: Use Task agent with Chrome extension to fill forms, extract data, or navigate multi-step flows
• Debug frontend issues with console and network inspection: Use Explore agent with DevTools MCP to capture console errors, network failures, and DOM state
• Plan complex multi-tab data extraction pipelines: Use Plan agent to design the workflow steps before executing browser automation
• Record and schedule recurring browser tasks: Use Chrome extension shortcuts with scheduling for daily/weekly automation

References

• Claude Code Chrome integration -- setup, capabilities, and how the extension communicates with Claude Code
• Chrome DevTools MCP tools -- all 26 MCP tools organized by category with configuration options
• Browser automation workflows -- common patterns for testing, data extraction, and content management
• Workflow shortcuts and scheduling -- creating reusable shortcuts and scheduled recurring tasks
• Troubleshooting and best practices -- fixing connection issues, handling dialogs, and security considerations

Browser Automation Workflows

Testing Local Development

Open localhost:3000, test the new form validation, check console for errors,
and screenshot any issues you find

Authenticated Data Extraction

Go to my Google Analytics, get this week's traffic summary,
and save it to a file

Content Management

Open my Notion workspace, find the Q4 planning doc,
and add a new section with today's meeting notes

Email Drafts

Open Gmail, find unread emails from the engineering team,
and draft replies for each one without sending

Multi-Site Research

Compare pricing on our product page vs the top 3 competitors.
Create a markdown table with the differences.

Form Automation

I have contacts in contacts.csv. For each row, go to crm.example.com,
click "Add Contact", and fill in the name, email, and phone fields.

Design Verification

Build this UI from the Figma mock, then open it in the browser
and verify it matches the design

Live Debugging Loop

Open the dashboard page, check the console for errors on load,
then fix the code that caused them and verify the fix in the browser

Multi-Tab Workflows

Claude works across tabs in the same tab group. Drag tabs into Claude's tab group for simultaneous access.

• Reference information from multiple tabs
• Copy data between tabs
• Coordinate actions across sites

When to Use Browser Automation

Good for:

• Form filling and data entry
• Button clicking and navigation
• Extracting data from authenticated pages
• Testing web applications
• Executing predefined workflows
• Tasks behind logins

Better manually:

• One-click tasks (faster by hand)
• Subjective decisions
• Exploratory research (use Claude.ai chat instead)

Tips

1. Be specific -- Ambiguous instructions produce inconsistent results 2. Add verification -- For long lists, add "verify you completed all items" 3. Handle modals -- Dismiss alerts manually, then tell Claude to continue 4. Use fresh tabs -- If a tab becomes unresponsive, ask for a new one 5. Filter console output -- Specify patterns instead of requesting all logs 6. Chain browser + terminal -- Claude can scrape a site, analyze the data, generate code, and commit in one workflow

Security

• Site-level permissions control which sites Claude can access
• High-risk actions (publish, purchase, share data) require confirmation
• Some site categories blocked (financial services, adult content)
• Manage permissions in extension settings

Claude Code Chrome Integration

Prerequisites

• Google Chrome browser (latest stable)
• Claude in Chrome extension (v1.0.36+) from Chrome Web Store
• Claude Code CLI (v2.0.73+)
• Paid Claude plan (Pro, Team, or Enterprise)

Setup

Update Claude Code:

claude update

Start with Chrome enabled:

claude --chrome

Check connection status:

/chrome

Enable Chrome by default (increases context usage since browser tools are always loaded):

/chrome
# Select "Enabled by default"

On first use, Claude Code installs a native messaging host that allows communication between the CLI and Chrome. Restart Chrome if permission errors occur.

Browser Capabilities

Navigation and Interaction:

• Navigate to URLs
• Click elements (buttons, links, form fields)
• Type text into inputs
• Scroll pages
• Create and manage tabs
• Resize windows

Information Retrieval:

• Read page content and DOM state
• Access console logs and errors
• Monitor network requests
• Extract structured data from pages

Advanced:

• Fill forms automatically
• Record browser interactions as GIFs
• Chain browser + terminal commands in a single workflow
• Work across multiple tabs

How It Works

1. Extension uses Chrome's Native Messaging API to receive commands from Claude Code 2. Claude opens new tabs for tasks (does not take over existing tabs) 3. Uses the browser's login state -- no re-authentication needed 4. Pauses for CAPTCHAs, login prompts, or modal dialogs (user handles, then continues) 5. Requires a visible browser window; no headless mode for the extension path

Run /mcp and click into claude-in-chrome to see the full list of available tools.

Example Prompts

Basic Navigation

Go to github.com/anthropics and click on the "Code" tab

Form Testing

Open localhost:3000, try submitting the login form with invalid data,
and check if error messages appear correctly

Console Debugging

Open the dashboard page and check the console for any errors when
the page loads

Data Extraction

Go to the product listings page and extract the name, price, and
availability for each item. Save as CSV.

Authenticated Workflows

Draft a project update based on our recent commits and add it to
my Google Doc at docs.google.com/document/d/abc123

Record Demo GIF

Record a GIF showing the checkout flow from adding an item to cart
through to the confirmation page

Design Verification

Build this UI from the Figma mock, then open it in the browser and
verify it matches the design

Multi-Site Workflow

Check my calendar for meetings tomorrow, then for each meeting with
an external attendee, look up their company on LinkedIn and add a
note about what they do

Chrome DevTools MCP Tools

The chrome-devtools-mcp package is an official MCP server from the Chrome DevTools team. It uses Puppeteer under the hood for reliable browser automation with automatic wait-for-result behavior.

Installation

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

Or add to MCP config:

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

Available Tools (26 total)

Input Automation (8 tools)

• click -- Click elements
• drag -- Drag and drop
• fill -- Fill input fields
• fill_form -- Fill entire forms
• handle_dialog -- Handle alerts/confirms/prompts
• hover -- Hover over elements
• press_key -- Keyboard input
• upload_file -- Upload files

Navigation (6 tools)

• navigate_page -- Go to URL
• new_page -- Create new tab
• close_page -- Close tab
• list_pages -- List open pages
• select_page -- Switch to page
• wait_for -- Wait for element/condition

Debugging (5 tools)

• take_screenshot -- Capture page
• take_snapshot -- Capture accessibility tree/DOM
• evaluate_script -- Run JavaScript
• get_console_message -- Get console log
• list_console_messages -- Get all logs

Network (2 tools)

• list_network_requests -- List requests
• get_network_request -- Get request details

Performance (3 tools)

• performance_start_trace -- Start tracing
• performance_stop_trace -- Stop tracing
• performance_analyze_insight -- Analyze results

Emulation (2 tools)

• emulate -- Emulate device
• resize_page -- Resize viewport

Configuration Options

# Connect to running Chrome (with remote debugging enabled)
npx chrome-devtools-mcp@latest --browser-url http://localhost:9222

# Headless mode (no visible browser window)
npx chrome-devtools-mcp@latest --headless

# Custom viewport
npx chrome-devtools-mcp@latest --viewport 1920x1080

# Use Chrome Canary
npx chrome-devtools-mcp@latest --channel canary

# Disable usage statistics collection
npx chrome-devtools-mcp@latest --no-usage-statistics

Requirements

• Node.js v20.19 or newer (latest maintenance LTS)
• Chrome current stable version or newer

Security and Privacy

The MCP server exposes browser content to MCP clients, allowing inspection, debugging, and modification of any data in the browser. Avoid sharing sensitive or personal information not intended for MCP clients. Google collects usage statistics (tool invocation success rates, latency, environment information) by default; opt out with --no-usage-statistics.

Supported MCP Clients

Works with Claude Code, Cursor, Copilot/VS Code, Gemini CLI, Amp, Cline, JetBrains IDEs, and other MCP-compatible clients.

Workflow Shortcuts and Scheduling

These features are part of the Claude in Chrome extension (not Claude Code CLI). Shortcuts and scheduling work directly in the extension sidebar.

Workflow Shortcuts

Shortcuts are saved prompts accessible by typing "/" in the extension chat. They allow reuse of proven workflows without retyping instructions.

Record a Workflow

1. Click the cursor/record icon in the extension panel (or type "/" then "Record workflow") 2. Perform actions while Claude watches 3. Claude generates a shortcut with name, description, and URL

Save from Conversation

• Click "Convert to task" on the conversation header to save a completed workflow
• Hover over a sent prompt to reveal an icon that saves it directly as a shortcut

Edit and Manage

Edit or delete shortcuts through the extension settings.

Scheduled Tasks

Once a workflow runs reliably, schedule it to run automatically.

How to Schedule

1. When creating or editing a shortcut, toggle "Schedule" at the bottom 2. Set frequency: daily, weekly, monthly, or annually 3. Choose date/time and select which model to use 4. Claude runs the workflow at the specified time and notifies on completion

Alternatively, click the clock icon in the upper right corner of the extension panel to schedule shortcuts.

Requirements

• Chrome must be open for scheduled tasks to run; if the browser is closed, the task waits until reopened
• Claude does not retain context across scheduled runs; each execution starts fresh
• Enable notifications to receive alerts when Claude requires permission or completes a task

Shortcut Examples

Email Management

/inbox-cleanup
Archive emails from newsletters, star emails mentioning deadlines,
delete obvious spam

Research

/competitor-scan
Check competitor blogs, pricing pages, and careers pages.
Summarize any changes since last week.

Form Filling

/vendor-application
Fill vendor application form using our company documents.
Pause before final submission for review.

Meeting Prep

/stakeholder-map
Research LinkedIn profiles of meeting attendees.
Summarize their backgrounds and priorities.

Analytics Summary

/weekly-traffic
Navigate to Google Analytics, get this week's traffic summary,
and save it to a file.

Troubleshooting and Best Practices

Extension Not Detected

If Claude Code shows "Chrome extension not detected":

1. Verify the Chrome extension (v1.0.36+) is installed from Chrome Web Store 2. Verify Claude Code is v2.0.73+ by running:

claude --version

3. Check that Chrome is running 4. Run /chrome and select "Reconnect extension" 5. If the issue persists, restart both Claude Code and Chrome

First-Time Setup Issues

On first use, Claude Code installs a native messaging host for CLI-to-Chrome communication. If permission errors occur, restart Chrome for the installation to take effect.

Browser Not Responding

• Check for blocking modal dialogs (alert, confirm, prompt) -- these prevent Claude from receiving commands
• Ask Claude to create a new tab and retry
• Restart Chrome extension (disable/re-enable in chrome://extensions)

Context Usage

Enabling Chrome by default (via /chrome > "Enabled by default") increases context consumption because browser tools are always loaded. Use the --chrome flag only when browser tasks are needed to reduce context usage.

Best Practices

1. Be specific -- Ambiguous instructions produce inconsistent results; name exact fields, values, and actions 2. Add verification -- For long lists or multi-step flows, add "verify you completed all items" 3. Handle modals -- Dismiss JavaScript alerts, confirms, and prompts manually, then tell Claude to continue 4. Use fresh tabs -- If a tab becomes unresponsive, ask Claude to create a new one 5. Filter console output -- Specify log patterns or error types rather than requesting all console output

Security Considerations

• Site-level permissions control which sites Claude can access
• High-risk actions (publish, purchase, share data) require user confirmation
• Some site categories are blocked (financial services, adult content)
• Manage permissions in the Chrome extension settings
• Run /chrome to view current permission settings

When to Use Browser Automation

Good for:

• Form filling and data entry across authenticated sites
• Button clicking and multi-step navigation
• Extracting structured data from web pages
• Testing web applications (forms, flows, console errors)
• Executing predefined workflows behind logins
• Recording interactions as GIFs for documentation

Better handled manually:

• One-click tasks (faster by hand)
• Subjective decisions requiring human judgment
• Exploratory research (use Claude.ai chat instead)