| 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:
node scripts/new_page.js --url https://example.com
node scripts/take_snapshot.js
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:
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:
Expected Output:
Page data extracted, network requests logged, specific API responses captured.
Workflow: Performance Testing
Analyze page performance and Core Web Vitals:
Expected Output:
Performance trace with metrics, CWV scores (LCP, FID, CLS), actionable insights.
Workflow: Multi-Page Session Management
Work with multiple browser tabs:
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.js to get element UIDs before interaction
- Use wait_for for dynamic content: Don't assume instant loading
- Handle dialogs proactively: Use
handle_dialog.js if alerts/confirms appear
- Check console for errors: Use
list_console_messages.js to debug issues
- Monitor network for API calls: Use
list_network_requests.js to track backend communication
