---
name: mcp-chrome-devtools
description: Automate Chrome browser via DevTools Protocol. Navigate pages, interact with elements, inspect network/console, analyze performance, and capture screenshots for web testing and automation tasks.
server-version: 0.10.2
---

# Chrome DevTools Skill

Control Chrome browser programmatically using the Chrome DevTools Protocol. This skill provides 26 tools for browser automation, web scraping, testing, and performance analysis.

## Prerequisites

- Node.js 18+ installed
- mcp2rest running on http://localhost:28888
- chrome-devtools server loaded in mcp2rest
- Package: `chrome-devtools-mcp@latest`
- Dependencies installed (already done during generation)

## Quick Start

Launch a browser, navigate to a page, and interact with elements:

```bash
# 1. Open a new page
node scripts/new_page.js --url https://example.com

# 2. Take a text snapshot to identify elements
node scripts/take_snapshot.js

# 3. Click a button (use UID from snapshot output)
node scripts/click.js --uid button_submit_abc123
```

**Expected Output:**
- Page opens in Chrome browser
- Snapshot shows page structure with element UIDs
- Button is clicked and any action triggers

## Tool Groups

This skill provides 26 tools organized into 4 groups:

### 1. Page Management
Browser window and tab operations: creating pages, navigation, switching contexts.

**Tools:** new_page, list_pages, close_page, navigate_page, select_page, resize_page

See: @workflows/page-management.md for detailed workflows

### 2. Element Interaction
User input simulation: clicking, typing, form filling, drag & drop.

**Tools:** click, fill, fill_form, hover, drag, upload_file, press_key

See: @workflows/element-interaction.md for detailed workflows

### 3. Inspection & Debugging
Monitoring and debugging: snapshots, screenshots, console logs, network requests.

**Tools:** take_snapshot, take_screenshot, list_console_messages, get_console_message, list_network_requests, get_network_request

See: @workflows/inspection-debugging.md for detailed workflows

### 4. Performance Analysis
Scripting and performance tools: JavaScript execution, performance tracing, device emulation.

**Tools:** evaluate_script, wait_for, handle_dialog, emulate, performance_start_trace, performance_stop_trace, performance_analyze_insight

See: @workflows/performance-analysis.md for detailed workflows

## Common Workflows

### Workflow: Automated Form Submission

Complete end-to-end form filling and submission:

- [ ] **Open page:** `node scripts/new_page.js --url https://example.com/login`
- [ ] **Get structure:** `node scripts/take_snapshot.js` (identify UIDs)
- [ ] **Fill email:** `node scripts/fill.js --uid email_input_xyz --value test@example.com`
- [ ] **Fill password:** `node scripts/fill.js --uid pass_input_abc --value mypassword`
- [ ] **Submit form:** `node scripts/click.js --uid submit_btn_def`
- [ ] **Verify:** `node scripts/wait_for.js --text "Welcome" --timeout 5000`
- [ ] **Capture result:** `node scripts/take_screenshot.js --format png --filePath result.png`

**Input Example:**
```
Email field UID: input_email_1a2b3c
Password field UID: input_password_4d5e6f
Submit button UID: button_submit_7g8h9i
```

**Expected Output:**
Form submitted successfully, redirected to dashboard, screenshot saved.

### Workflow: Web Scraping with Network Monitoring

Capture page data and network activity:

- [ ] **Start monitoring:** `node scripts/new_page.js --url https://example.com/data`
- [ ] **Wait for load:** `node scripts/wait_for.js --text "Data loaded" --timeout 10000`
- [ ] **Get page snapshot:** `node scripts/take_snapshot.js --verbose true --filePath snapshot.txt`
- [ ] **List network calls:** `node scripts/list_network_requests.js --resourceTypes fetch,xhr`
- [ ] **Get specific request:** `node scripts/get_network_request.js --reqid request_123`
- [ ] **Extract via script:** `node scripts/evaluate_script.js --function "() => document.querySelector('.data').textContent"`

**Expected Output:**
Page data extracted, network requests logged, specific API responses captured.

### Workflow: Performance Testing

Analyze page performance and Core Web Vitals:

- [ ] **Open page:** `node scripts/new_page.js --url https://example.com`
- [ ] **Start tracing:** `node scripts/performance_start_trace.js --reload true --autoStop false`
- [ ] **Wait for page:** `node scripts/wait_for.js --text "Content loaded" --timeout 15000`
- [ ] **Stop tracing:** `node scripts/performance_stop_trace.js`
- [ ] **Review insights:** Check trace output for performance metrics and CWV scores
- [ ] **Analyze specific insight:** `node scripts/performance_analyze_insight.js --insightSetId set_123 --insightName LargestContentfulPaint`

**Expected Output:**
Performance trace with metrics, CWV scores (LCP, FID, CLS), actionable insights.

### Workflow: Multi-Page Session Management

Work with multiple browser tabs:

- [ ] **List current pages:** `node scripts/list_pages.js`
- [ ] **Open new tab:** `node scripts/new_page.js --url https://example.com/page1`
- [ ] **Open another tab:** `node scripts/new_page.js --url https://example.com/page2`
- [ ] **List all pages:** `node scripts/list_pages.js` (note page indices)
- [ ] **Switch to page 0:** `node scripts/select_page.js --pageIdx 0`
- [ ] **Interact with page 0:** `node scripts/take_snapshot.js`
- [ ] **Switch to page 1:** `node scripts/select_page.js --pageIdx 1`
- [ ] **Close page 1:** `node scripts/close_page.js --pageIdx 1`

**Expected Output:**
Multiple tabs managed, context switching works, specific pages closed.

## State Persistence

This server maintains state between script calls:
- Browser instance stays open across multiple commands
- Page context persists until explicitly changed with `select_page.js`
- Console messages and network requests accumulate since last navigation
- State resets when mcp2rest server restarts

## Reference

- **Complete tool listing:** @reference/all-tools.md
- **Troubleshooting guide:** @reference/troubleshooting.md
- **Advanced examples:** @reference/advanced-examples.md

## Quick Tips

1. **Always take snapshots first:** Use `take_snapshot.js` to get element UIDs before interaction
2. **Use wait_for for dynamic content:** Don't assume instant loading
3. **Handle dialogs proactively:** Use `handle_dialog.js` if alerts/confirms appear
4. **Check console for errors:** Use `list_console_messages.js` to debug issues
5. **Monitor network for API calls:** Use `list_network_requests.js` to track backend communication