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
