chrome-devtools

What problem does it solve?

Manually interacting with Chrome DevTools for debugging, scraping, or automation is repetitive and time-consuming, often leading to browser lock issues and inefficient workflows. This skill provides programmatic control over Chrome, streamlining web-related tasks with optimized performance.

Core Features & Use Cases

• Programmatic Browser Control: Automate navigation, clicks, form filling, and JavaScript execution on web pages.
• Web Debugging & Inspection: Capture console messages, inspect network requests, and take full-page screenshots or content snapshots.
• Optimized Performance Patterns: Utilizes a cleanup; sleep; echo commands | timeout shell pattern to prevent browser lock conflicts and ensure fast, reliable execution.
• Use Case: Automatically navigate to a web application, log in, perform a series of actions, and then capture console errors and network requests for a daily health check report, significantly reducing manual effort.

Quick Start

Check Console Errors on localhost (FASTEST)

pkill -9 -f "chrome-devtools-mcp" 2>/dev/null; sleep 1; echo -e 'navigate_page {"url":"http://localhost:3000"} list_console_messages {"pageIdx":0} exit' | timeout 30 mcp shell bunx -y chrome-devtools-mcp@latest -- --isolated

Screenshot a Page

pkill -9 -f "chrome-devtools-mcp" 2>/dev/null; sleep 1; echo -e 'navigate_page {"url":"https://example.com"} take_screenshot {"fullPage":true,"format":"png"} exit' | timeout 30 mcp shell bunx -y chrome-devtools-mcp@latest -- --isolated