This skill helps launch and configure the Chrome DevTools MCP server, giving Claude visual access to a live browser for debugging and automation. Use when the user asks to set up browser debugging, launch Chrome with DevTools, configure chrome-devtools-mcp, see what my app looks like, take screenshots of my web application, check the browser console, debug console errors, inspect network requests, analyse API responses, measure Core Web Vitals or page performance, run a Lighthouse audit, test button clicks or form submissions, automate browser interactions, fill out forms programmatically, simulate user actions, emulate mobile devices or slow networks, capture DOM snapshots, execute JavaScript in the browser, or troubleshoot Chrome DevTools MCP connection issues. Supports Windows, Linux, and WSL2 environments.
View on GitHubhenkisdabro/wookstar-claude-plugins
developer
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/henkisdabro/wookstar-claude-plugins/blob/main/plugins/developer/skills/devtools/SKILL.md -a claude-code --skill devtoolsInstallation paths:
.claude/skills/devtools/# Chrome DevTools MCP Setup ## Overview This skill automates the setup and launch of Chrome with remote debugging for use with the chrome-devtools-mcp server. It handles environment detection, Chrome installation verification, MCP configuration, and browser launch across Windows, Linux, and WSL2. **GitHub Repository:** https://github.com/ChromeDevTools/chrome-devtools-mcp ## Why Give Claude Browser Access? Without browser access, Claude is "coding blindfolded" - making changes without seeing the results. The Chrome DevTools MCP server provides **26 specialised tools** that give Claude eyes into your running application: | 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 | This enables Claude to: - **Verify changes visually** instead of guessing if CSS/layout is correct - **Debug runtime errors** by reading actual console output - **Test user flows** by simulating clicks and form submissions - **Identify performance issues** with real Core Web Vitals data - **Catch regressions** by comparing screenshots before/after changes ## Quick Start Workflow Execute these steps in order: ### Step 1: Detect Environment Run the environment detection script to determine the platform: ```bash bash scripts/detect_environment.sh ``` The script returns one of: `windows`, `linux`, or `wsl2` ### Step 2: Verify Chrome Installation Run the Chrome check script with the detected environment: ```bash bash scripts/check_chrome.sh