Chrome DevTools Browser Automation

Control and inspect a live Chrome browser using the full power of Chrome DevTools. This skill enables AI agents to automate browser interactions, debug web applications, analyze performance, and inspect network traffic through a Model Context Protocol (MCP) server.

What This Skill Does

Provides comprehensive browser automation and debugging capabilities including:

Instructions

Initial Setup

1. **Verify the chrome-devtools-mcp server is installed** in your MCP client configuration:

```json

{

"mcpServers": {

"chrome-devtools": {

"command": "npx",

"args": ["-y", "chrome-devtools-mcp@latest"]

}

}

}

```

2. **Check available tools** by listing MCP tools from the chrome-devtools server

3. **Start with simple navigation** to verify the browser launches correctly

Core Workflows

#### Performance Analysis

1. Use `performance_start_trace` to begin recording

2. Use `navigate_page` to load the target URL

3. Use `performance_stop_trace` to end recording

4. Use `performance_analyze_insight` to extract performance metrics and recommendations

#### Web Automation

1. Use `navigate_page` to load the target page

2. Use `wait_for` to ensure elements are loaded

3. Use `click`, `fill`, or `fill_form` to interact with elements

4. Use `take_screenshot` to capture results

#### Debugging

1. Use `navigate_page` to load the page

2. Use `list_console_messages` to check for errors or warnings

3. Use `list_network_requests` to analyze network activity

4. Use `evaluate_script` to run diagnostic code

5. Use `take_snapshot` for full DOM inspection

#### Multi-Page Testing

1. Use `new_page` to open additional tabs

2. Use `list_pages` to see all open pages

3. Use `select_page` to switch between tabs

4. Use `close_page` when done with a tab

Available Tool Categories

**Input Automation** (8 tools)

**Navigation** (6 tools)

**Performance** (3 tools)

**Network** (2 tools)

**Debugging** (5 tools)

**Emulation** (2 tools)

Best Practices

1. **Always wait for page load** - Use `wait_for` after navigation to ensure content is ready

2. **Use specific selectors** - Prefer unique CSS selectors or ARIA labels for reliability

3. **Handle dialogs** - Set up `handle_dialog` before triggering actions that may show alerts

4. **Check console errors** - Use `list_console_messages` to catch JavaScript errors

5. **Analyze network first** - Use `list_network_requests` to understand page behavior before automation

6. **Take screenshots for verification** - Capture screenshots after key actions to confirm success

7. **Clean up tabs** - Close pages when done to free resources

Common Use Cases

**Example: Performance audit**

```

1. Start performance trace

2. Navigate to target URL

3. Wait for page load

4. Stop performance trace

5. Analyze insights for metrics and recommendations

```

**Example: Form submission test**

```

1. Navigate to form page

2. Fill form fields using fill_form

3. Click submit button

4. Wait for navigation or success message

5. Take screenshot of result

```

**Example: Network debugging**

```

1. Navigate to page with issues

2. List network requests

3. Filter for failed requests (status 4xx/5xx)

4. Get detailed request info for failures

5. Check console messages for related errors

```

Requirements

Important Notes

Configuration Options

Advanced configurations available: