1---2name: chrome-devtools3description: Handle `browser-related` tasks and control a live Chrome browser through Chrome DevTools MCP for browser automation, visual inspection, debugging, performance analysis, and emulation. Use when navigating pages, clicking elements, filling forms, handling `alerts/prompts.`, taking snapshots or screenshots, inspecting console and network activity, evaluating JavaScript, profiling Core Web Vitals, or testing viewport and network conditions.4license: MIT5---67<!-- Generated from harness/github-copilot/skills/chrome-devtools/SKILL.md by harness/claude-code/scripts/convert_from_copilot.py. Edit the source, not this file. -->89# Chrome DevTools agent1011Use Chrome DevTools MCP to operate a real browser tab, inspect accessibility snapshots and screenshots, debug console and network failures, evaluate page JavaScript, and capture performance evidence with stable element identifiers instead of guessing selectors.1213## When to invoke1415- "Open this page in Chrome and click through the form."16- "Take a screenshot and inspect what the browser renders."17- "Check the console and network errors for this failing page."18- "Profile this page for Core Web Vitals or layout shifts."19- "Emulate a mobile viewport or slow network condition."2021## Prerequisites and context2223- Chrome DevTools MCP must be available in the active environment.24- Interaction tools require `uid` values from the current accessibility snapshot; screenshots alone do not provide stable targets.25- Take a new snapshot after navigation, reloads, significant DOM changes, or modal/dialog state changes because `uid` values can change.2627## Tool categories2829| Category | Tools | Use |30| --- | --- | --- |31| Navigation and pages | `new_page`, `navigate_page`, `select_page`, `list_pages`, `close_page`, `wait_for` | Open a `tab/page.`, choose context, navigate, and wait for visible text. |32| Input and interaction | `click`, `fill`, `fill_form`, `hover`, `press_key`, `drag`, `handle_dialog`, `upload_file` | Operate controls using snapshot `uid` values. |33| Debugging and inspection | `take_snapshot`, `take_screenshot`, `list_console_messages`, `get_console_message`, `evaluate_script`, `list_network_requests`, `get_network_request` | Inspect DOM `text-based` accessibility tree, visuals, JavaScript errors, runtime state, and HTTP traffic, including `4xx/5xx` failures. |34| Emulation and performance | `resize_page`, `emulate`, `performance_start_trace`, `performance_stop_trace`, `performance_analyze_insight` | Test viewport/device conditions and `CPU/Network` or `network/CPU` throttling and profile load or interaction performance. |3536## Workflow patterns3738| Pattern | Steps | Evidence to report |39| --- | --- | --- |40| Snapshot-first interaction | Run `take_snapshot`, find the target `uid`, then call `click(uid=...)`, `fill(uid=..., value=...)`, or `press_key`; repeat snapshot after DOM changes. | Target role/name and action result. |41| Page failure triage | Run `list_console_messages`, `list_network_requests`, then inspect relevant entries with `get_console_message` or `get_network_request`. | Error text, status code, failed URL, initiator when available. |42| Visual verification | Use `take_snapshot` for structure and `take_screenshot` only when pixels, layout, or visual regression matter. | Screenshot path/description and matching accessibility evidence. |43| Performance profiling | Start trace with `performance_start_trace(reload=true, autoStop=true)` for a `load/trace` scenario or chosen interaction, stop or wait for auto-stop, then call `performance_analyze_insight`. | LCP, layout shift, long tasks, render-blocking resources, or other named insight. |44| Emulation | Set viewport or throttling with `resize_page` or `emulate`, rerun the scenario, then restore if needed. | Emulated condition and observed difference. |4546## Gotchas4748- **Use snapshots for element IDs**: `click` and `fill` need `uid` from `take_snapshot`; visual coordinates are brittle.49- **Refresh `uid` values after changes**: navigation, rerendering, and dialogs can invalidate prior snapshot IDs.50- **Check page context before acting**: run `list_pages` and `select_page` when multiple tabs are open or the active tab is uncertain.51- **Screenshots do not replace console/network evidence**: visual success can still hide failed API requests or JavaScript errors.52- **Performance traces need a defined scenario**: record page load or one user interaction, not an unbounded browsing session.5354## Troubleshooting5556| Symptom | Likely cause | Resolution |57| --- | --- | --- |58| Interaction hits the wrong element | Stale snapshot `uid` or wrong active page. | Run `list_pages`, `select_page`, and `take_snapshot` again before interacting. |59| `wait_for` times out | Text never appears, app is stuck, or wrong route loaded. | Check console and network, then verify current URL and snapshot. |60| Fill/click fails on custom control | Target `uid` belongs to wrapper, not focusable input. | Snapshot deeper nearby nodes; use `click` to focus then `press_key` or `fill` the input `uid`. |61| Performance trace has no useful insight | Scenario not captured or trace stopped too early. | Start a new trace with reload/interaction and wait for completion before analysis. |626364- **Slow pages need explicit waits**: for `slow-loading` pages, wait for stable text or network evidence before declaring failure.6566## Output template6768```markdown69## Chrome DevTools result7071**Status:** complete | needs follow-up | blocked72**Page:** <URL or page title>73**Scenario:** <navigation/debug/performance/emulation task>7475### Evidence76- Snapshot: <role/name/uid evidence or not needed>77- Console: <errors or "none observed">78- Network: <failed requests or "none observed">79- Screenshot/performance: <artifact or insight>8081### Actions performed82- `<tool>`: <result>83```8485## Quality gate8687- [ ] The correct page/tab was selected before interacting.88- [ ] Element interactions used current `uid` values from `take_snapshot`.89- [ ] Console and network evidence were checked for debugging tasks.90- [ ] Screenshots were used only when visual evidence was needed.91- [ ] Performance profiling included a bounded load or interaction scenario.92- [ ] The output follows `## Output template` exactly.
paulasilvatech