From developer
Launches and configures Chrome DevTools MCP server for visual access to live browser, enabling screenshots, DOM snapshots, console debugging, network inspection, Core Web Vitals measurement, Lighthouse audits, and automation of interactions on Windows/Linux/WSL2.
npx claudepluginhub henkisdabro/wookstar-claude-plugins --plugin developerThis skill uses the workspace's default tool permissions.
**GitHub Repository:** https://github.com/ChromeDevTools/chrome-devtools-mcp
Provides Chrome DevTools access via MCP for web debugging, browser automation, performance analysis, network inspection, element interaction, screenshots, and extension testing.
Tests and debugs browser apps using Chrome DevTools MCP to inspect DOM, capture console errors, analyze network requests, profile performance, and verify visuals.
Automates Chrome browser using 70 tabz MCP tools for screenshots, form filling, network debugging, responsive design testing, performance profiling, DOM inspection, and TTS notifications.
Share bugs, ideas, or general feedback.
GitHub Repository: https://github.com/ChromeDevTools/chrome-devtools-mcp
Without browser access, Claude is "coding blindfolded" - making changes without seeing results. The Chrome DevTools MCP server provides 26 specialised tools across these categories:
| Category | Capabilities |
|---|---|
| Visual Inspection | Take screenshots, capture DOM snapshots, see rendered output |
| Console & Logging | Read console messages, catch JavaScript errors, debug issues |
| Network Analysis | Inspect API requests/responses, analyse headers, debug fetch calls |
| Performance | Record traces, measure Core Web Vitals (LCP, CLS, TBT), identify bottlenecks |
| User Simulation | Click elements, fill forms, drag-and-drop, handle dialogs |
| Device Emulation | Simulate mobile viewports, throttle CPU/network, test responsive design |
Execute these steps in order:
bash scripts/detect_environment.sh
Returns one of: windows, linux, or wsl2
bash scripts/check_chrome.sh <environment>
Outputs status:installed or status:not_installed. If not installed, see references/chrome-installation.md for installation options.
IMPORTANT: Do not proceed until Chrome is installed and verified.
claude mcp list | grep -i chrome
If not installed:
claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222
For advanced configuration options and alternative connection methods, see references/mcp-configuration.md.
bash scripts/detect_dev_server.sh
Checks ports 5173, 5174, 5175, 3000, 3001, 8080, and 8000. If no dev server is running and one is needed, offer to start it.
bash scripts/launch_chrome.sh <environment> <url> [headed]
<environment>: windows, linux, or wsl2<url>: Target URL (e.g., http://localhost:5173)[headed]: Optional - pass headed for visible browser, omit for headless (default)curl -s http://127.0.0.1:9222/json/version
Once connected, test with the mcp__chrome-devtools__list_pages tool.
| Issue | Solution |
|---|---|
| "Target closed" error | Close all Chrome instances, restart with debugging |
| Module not found | Clear npm cache: rm -rf ~/.npm/_npx && npm cache clean --force |
| Connection refused | Ensure Chrome launched with --remote-debugging-port=9222 |
| Port already in use | Kill existing Chrome or use different port |
| Chrome won't start in sandbox | Use --browserUrl to connect to manually-started Chrome |
| WebDriver sign-in blocked | Use --autoConnect to connect to your normal browser session |
For detailed troubleshooting steps, see references/troubleshooting.md.