Web Debug Browser

Overview

Use Chrome DevTools MCP (chrome-devtools-mcp) to drive Chrome/Chromium for debugging and inspection tasks, with a default workflow that connects to a locally running Chrome instance via CDP on port 9222.

Default Connection (Local Chrome)

1. Assumes Chrome is already running with remote debugging enabled on port 9222.
2. If connection fails, ask the user to start Chrome with --remote-debugging-port=9222 and a dedicated --user-data-dir.
3. Verify the session with list_pages or by opening a page with new_page.

Debugging Workflow

1. Open page: new_page or navigate_page.
2. Capture refs: take_snapshot and use element uid values for actions.
3. Interact: click, fill, press_key, hover, drag, upload_file, handle_dialog.
4. Wait/verify: wait_for, take_snapshot, evaluate_script (e.g., document.title, location.href).
5. Inspect DevTools output: list_console_messages / get_console_message, list_network_requests / get_network_request.
6. Collect evidence: take_screenshot (use fullPage when needed), performance_start_trace / performance_stop_trace, performance_analyze_insight.
7. Manage pages: list_pages, select_page, close_page.