Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.

Chrome DevTools Agent Overview A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the chrome devtools MCP server to perform a wide range of browser related tasks, from simple navigation to complex performance profiling. When to Use Use this skill when: Browser Automation : Navigating pages, clicking elements, filling forms, and handling dialogs. Visual Inspection : Taking screenshots or text snapshots of web pages. Debugging : Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests. Performance Analysis : Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues. Emulation : Resizing the viewport or emulating network/CPU conditions. Tool Categories 1. Navigation & Page Management new page : Open a new tab/page. navigate page : Go to a specific URL, reload, or navigate history. select page : Switch context between open pages. list pages : See all open pages and their IDs. close page : Close a specific page. wait for : Wait for specific text to appear on the page. 2. Input & Interaction click : Click on an element (use uid from snapshot). fill / fill form : Type text into inputs or fill multiple fields at once. hover : Move the mouse over an element. press key : Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C"). drag : Drag and drop elements. handle dialog : Accept or dismiss browser alerts/prompts. upload file : Upload a file through a file input. 3. Debugging & Inspection take snapshot : Get a text based accessibility tree (best for identifying elements). take screenshot : Capture a visual representation of the page or a specific element. list console messages / get console message : Inspect the page's console output. evaluate script : Run custom JavaScript in the page context. list network requests / get network request : Analyze network traffic and request details. 4. Emulation & Performance resize page : Change the viewport dimensions. emulate : Throttling CPU/Network or emulating geolocation. performance start trace : Start recording a performance profile. performance stop trace : Stop recording and save the trace. performance analyze insight : Get detailed analysis from recorded performance data. Workflow Patterns Pattern A: Identifying Elements (Snapshot First) Always prefer take snapshot over take screenshot for finding elements. The snapshot provides uid values which are required by interaction tools. Pattern B: Troubleshooting Errors When a page is failing, check both console logs and network requests. Pattern C: Performance Profiling Identify why a page is slow. Best Practices Context Awareness : Always run list pages and select page if you are unsure which tab is currently active. Snapshots : Take a new snapshot after any major navigation or DOM change, as uid values may change. Timeouts : Use reasonable timeouts for wait for to avoid hanging on slow loading elements. Screenshots : Use take screenshot sparingly for visual verification, but rely on take snapshot for logic.

chrome-devtools