chrome-devtools

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

Default Flow

1. Open or reuse a page with new_page or navigate_page.
2. Wait for the relevant UI if needed with wait_for.
3. Capture structure with take_snapshot.
4. Interact using uid values from the snapshot.
5. 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

1. Re-run the smallest verification path after each code change.

Working Rules

• 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.

Common Patterns

• 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.

When Not to Use It

• 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.