Agent skill · software engineering · laguagu
chrome-devtools
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance (LCP/CLS/INP), or verify visual output with real runtime data. Complements Playwright — use this for live debugging and performance work, Playwright for stable E2E test suites.
Why this skill is useful
Adds specific commands and workflows for debugging and performance analysis in Chrome DevTools that the AI wouldn't reliably generate on its own.
What it needs
Requires chrome-devtools-mcp installed locally. About 8k tokens when loaded. Last updated 2026-08-03. 58 stars on the source repository.
What this skill does
Browser Testing with DevTools Overview Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it. When to Use Building or modifying anything that renders in a browser Debugging UI issues (layout, styling, interaction) Diagnosing console errors or warnings Analyzing network requests and API responses Profiling performance (Core Web Vitals, paint timing, layout shifts) Verifying that a fix actually works in the browser Automated UI testing through the agent When NOT to use: Backend-only changes, CLI tools, or code that doesn't run in a browser. Setting Up Chrome DevTools MCP Installation Available Tools Chrome DevTools MCP provides these capabilities: These are the actual tool names — call them as written, prefixed with the server namespace your client uses (e.g. mcpchrome-devtoolstakesnapshot): Tool What It Does When to Use ------ ------------- ------------- takescreenshot Captures the current page state Visual verification, before/after comparisons takesnapshot Reads the live DOM as an accessibility-annotated tree Verify rendering and structure, get element uids for interaction listconsolemessages / getconsolemessage Retrieves console output (log, warn, error) Diagnose errors, verify logging listnetworkrequests / getnetworkrequest Captures network requests and responses Verify API calls, check payloads performancestarttrace / performancestoptrace / performanceanalyzeinsight Records and analyses performance timing Profile load time, identify bottlenecks evaluatescript Runs JavaScript in the page context Computed styles, read-only state inspection (see Security Boundaries) navigatepage / newpage / selectpage / listpages Tab and navigation control Open the app, switch between pages click / fill / f …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laguagu/chrome-devtools