chrome-devtools - SKILL.md Agent Skill

name: chrome-devtools description: Use Chrome DevTools MCP to inspect live pages, reproduce browser issues, automate user flows, inspect console and network activity, and verify frontend fixes in a real Chrome session. Trigger when the user mentions browser bugs, client-side errors, broken forms, flaky UI behavior, or asks to interact with a site directly.

Use this skill when source inspection alone is not enough and Codex should operate a live browser.

Open or reuse a page with new_page or navigate_page.
Wait for the relevant UI if needed with wait_for.
Capture structure with take_snapshot.
Interact using uid values from the snapshot.
Inspect the relevant evidence surface:
- list_console_messages or get_console_message for runtime errors
- list_network_requests or get_network_request for API and asset failures
- take_screenshot when visible state matters
- evaluate_script for targeted DOM or app-state checks
Re-run the smallest verification path after each code change.

Prefer take_snapshot over screenshots for navigation and form work.
Take a fresh snapshot after navigation or DOM-changing actions.
Keep console and network queries filtered or paginated to reduce noise.
Save large artifacts to disk with filePath when the tool supports it.
If you need an already-running browser session, point the MCP server at it with --browser-url=... instead of launching a fresh instance.

Reproduce a bug: navigate, wait, snapshot, interact, inspect console and network.
Verify a fix: repeat the exact user path and compare visible state plus console and request results.
Gather evidence: capture a screenshot, the failing request, and the matching console message.

If the question is purely about static source code and no live browser state matters.
If the MCP server is running in a restricted mode that does not expose the tools you need.