160 lines
6.4 KiB
Markdown
160 lines
6.4 KiB
Markdown
---
|
|
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
|