browser-testing-with-devtoolslisted

# Browser Testing with DevTools I'll connect to a running browser session and inspect it at runtime: DOM state, console errors, network traffic, and rendering performance. Requires Chrome DevTools MCP to be configured. Arguments: `$ARGUMENTS` — URL to open or test to perform (e.g., "check login flow at http://localhost:3000") ## Token Optimization **Expected range**: 300–800 tokens per inspection (snapshot + analysis) **Early exit**: If no issues are found in the initial snapshot, report "No issues detected" and stop **Patterns used**: Progressive disclosure (summary first, full DOM/network only on specific request) ## Prerequisites Chrome DevTools MCP must be configured. Verify: ```bash # Check if chrome-devtools-mcp is in MCP config grep -r "devtools\|chrome" ~/.claude/settings.json .claude/settings.json 2>/dev/null | head -5 ``` If not configured, report the requirement and stop. ## Step 1 — Open or Connect to Page Navigate to the target URL: ``` Navigate to: [URL from $ARGUMENTS or inferred from project] Wait for: DOM ready / network idle ``` Take an initial snapshot of the page state (accessibility tree + title). ## Step 2 — Console Error Scan Capture all console messages: ``` Console output: errors: [count] warnings: [count] logs: [count] Top errors (if any): [message] — [source file:line] ``` Any `console.error` or unhandled promise rejection is a test failure. Report immediately. ## Step 3 — DOM Inspection For the specific flow being