Agent skill · software engineering · aiskillstore
chrome-devtools
Control Chrome browser programmatically using chrome-devtools-mcp. Use when user asks to automate Chrome, debug web pages, take screenshots, evaluate JavaScript, inspect network requests, or interact with browser DevTools. Also use when asked about browser automation, web scraping, or testing websites.
Why this skill is useful
Adds multiple executable scripts for Chrome automation and debugging that are not commonly found in public documentation.
What it needs
Requires mcp installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Chrome DevTools MCP Skill Control Chrome browser programmatically via chrome-devtools-mcp. ⚡ Performance Tip: Always use the patterns in "Quick Start" section below. They include cleanup and run everything in ONE command to avoid browser lock issues. Speed Comparison: ❌ OLD WAY: Multiple attempts, manual cleanup, 5-10 commands → ~60-90 seconds ✅ NEW WAY: One optimized command → ~5-10 seconds 📚 See also: MCP CLI Guide for general MCP CLI patterns and best practices Setup Quick Start (FASTEST) Check Console Errors on localhost Single command (copy-paste ready): Full Debug: Console + Network + Page Content Screenshot a Page Execute JavaScript on Page ⚡ Pattern: cleanup; sleep; echo commands timeout shell This avoids: ❌ Browser profile locks (cleanup first) ❌ Multiple shell sessions (one pipeline) ❌ Hanging commands (timeout wrapper) Usage List available tools: Call tools (individual commands): Interactive shell mode (RECOMMENDED - maintains single browser instance): With Chrome launch options: Common Workflows Check localhost console logs: Automate form filling: Network debugging: Key Tools navigatepage - Go to URL (returns page list) newpage - Open new tab (returns page list) selectpage - Switch to different page by index closepage - Close page by index click - Click element fill - Fill input/textarea evaluatescript - Run JavaScript takescreenshot - Capture page as image takesnapshot - Get page content as text with UIDs listconsolemessages - View console logs (use {"pageIdx":0}) listnetworkrequests - View network activity (use {"pageIdx":0}) waitfor - Wait for text/condition Important Notes Always use bunx (not npx) for chrome-devtools-mcp Correct syntax: mcp call TOOLNAME bunx -y chrome-devtools-mcp@latest -- --isolated --params '{...}' Server command comes AFTER tool name, BEFORE --params Parameters are passed directly (no "arguments" wrapper) Use -- --isolated to create temporary profile (prevents browser lock conflicts) Server exposes full browser content - avoid …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/chrome-devtools