chrome-devtools

Chrome DevTools Browser Automation

This plugin provides full Chrome DevTools capabilities through the Chrome DevTools MCP server by Google.

Available Capabilities

After installation, the following tools become available:

Navigation & Automation

• navigate_page — Navigate to a URL in Chrome
• click — Click an element on the page
• fill — Type text into form fields
• take_screenshot — Take a screenshot of the current page
• evaluate_script — Execute JavaScript in the page context

DOM & CSS Inspection

• take_snapshot — Get the accessibility tree / DOM snapshot
• hover — Hover over an element to inspect it

Performance & Debugging

• performance_start_trace — Start a performance trace recording
• performance_stop_trace — Stop recording and analyze results
• performance_analyze_insight — Get performance insights
• list_console_messages — Read browser console output
• list_network_requests — Inspect network requests and responses
• lighthouse_audit — Run a Lighthouse audit

Tab Management

• list_pages — List open browser tabs
• new_page — Open a new tab
• close_page — Close a tab
• select_page — Switch to a specific tab

Usage Examples

Navigate and screenshot:

Please navigate to https://example.com and take a full-page screenshot

Extract design tokens:

Navigate to https://stripe.com, then for each major section:
1. Take a screenshot
2. Use evaluate_script to run getComputedStyle for colors, fonts, spacing
3. Download all images and SVGs

Performance analysis:

Record a performance trace of https://mysite.com loading, then analyze the results

Debug network issues:

Navigate to my app at localhost:3000, list all network requests, and identify any failures

Configuration

The Chrome DevTools MCP server runs locally and connects to a Chrome instance. All browser data stays on your machine.

Browser Requirements

• Google Chrome (latest stable version)
• Node.js 18+