Agent skill · software engineering · aiskillstore
chrome-devtools-debugging
Debug and analyze web applications using Chrome DevTools MCP. Use for console log inspection, network request monitoring, performance analysis, and debugging authenticated sessions. For basic browser automation (screenshots, form filling), use browser-discovery skill instead.
Why this skill is useful
Adds specific Python scripts for interacting with Chrome DevTools that automate debugging tasks not covered in general documentation.
What it needs
Requires google-chrome, python installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Chrome DevTools Debugging Debug web applications by connecting to Chrome's DevTools Protocol. This skill enables: Console inspection: View errors, warnings, and log messages Network analysis: Monitor XHR/fetch requests with full headers/body Performance tracing: Record and analyze performance traces JavaScript evaluation: Execute code in browser context Authenticated session debugging: Connect to existing logged-in browsers When to Use This Skill Use Case This Skill browser-discovery ---------- ------------ ------------------- Console error inspection Yes No Network request analysis Yes Limited Performance tracing Yes No Authenticated sessions Yes No Screenshots No Yes Form filling No Yes Basic navigation Limited Yes Setup Requirements Option 1: Connect to Existing Chrome (Recommended) Start Chrome with remote debugging enabled: Set the environment variable: Option 2: Chrome Auto-Connect (145+) For Chrome 145+, enable remote debugging at chrome://inspect/#remote-debugging. Progressive Disclosure Pattern This skill uses progressive MCP disclosure for token efficiency: Benefits: 98%+ token reduction vs loading all MCP tools in system prompt. Quick Examples Get Console Errors List Network Requests Execute JavaScript Debug Authenticated Session Available Tool Modules console listconsolemessages(types, pagesize, pageidx) - Get console output getconsolemessage(messageid) - Get specific message details geterrors() - Convenience: get error messages only getwarnings() - Convenience: get warnings only network listnetworkrequests(resourcetypes, pagesize, pageidx) - List requests getnetworkrequest(requestid) - Get full request/response details getfailedrequests() - Convenience: get 4xx/5xx requests getapirequests() - Convenience: get XHR/fetch requests getslowrequests(thresholdms) - Convenience: get slow requests performance starttrace(reload, autostop) - Start recording trace stoptrace() - Stop and get trace data getinsights() - Get available insight sets analyzeinsight(insigh …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/chrome-devtools-debugging