6.4 KiB
name, description, server-version
| name | description | server-version |
|---|---|---|
| mcp-chrome-devtools | 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. | 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:
# 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
- Always take snapshots first: Use
take_snapshot.jsto get element UIDs before interaction - Use wait_for for dynamic content: Don't assume instant loading
- Handle dialogs proactively: Use
handle_dialog.jsif alerts/confirms appear - Check console for errors: Use
list_console_messages.jsto debug issues - Monitor network for API calls: Use
list_network_requests.jsto track backend communication