Browser debugging and E2E testing workflow using Chrome DevTools MCP
Executes browser debugging workflows using Chrome DevTools MCP to test UI interactions and capture evidence.
/plugin marketplace add metasaver/claude-marketplace/plugin install core-claude-plugin@metasaver-marketplaceDebug web applications, test UI interactions, and capture visual evidence using Chrome DevTools MCP integration.
When /debug is invoked, ALWAYS proceed to Phase 1 regardless of prompt content.
Chrome Setup:
# Start Chrome with remote debugging
google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
Dev Server:
# Ensure dev server uses host 0.0.0.0 for container access
pnpm dev --host 0.0.0.0
MCP Configuration:
.mcp.json/skill chrome-devtools-testing for setup detailsFollow: /skill workflow-steps/debug-plan
Parse prompt for URL/target, identify what to test, confirm with user (quick HITL), create debug steps.
Follow: /skill cross-cutting/chrome-devtools-testing
Check Chrome DevTools MCP connection, verify Chrome is accessible, check dev server status for localhost targets, start dev server if needed (HITL).
Follow: /skill workflow-steps/debug-execution
Navigate to target URL, capture baseline DOM and screenshots, execute planned interactions with MCP tools (click, fill, hover, press_key), capture state after each interaction, collect console messages and network requests, validate results.
Follow: /skill workflow-postmortem mode=summary
Run /skill workflow-postmortem mode=summary to generate final summary. This checks if the debug workflow followed expected phases and logs any issues.
Output: Summary of issues logged during workflow (if any), included in final report.
Follow: /skill workflow-steps/report-phase
Generate complete debug report with executive summary, steps executed with screenshots, findings (console errors, network issues, visual problems), and recommendations.
/debug "check if the login form works"
→ Plan → Setup → Execute (navigate, fill, submit, capture) → Postmortem → Report
/debug "the modal isn't centered on mobile"
→ Plan → Setup → Execute (resize, open modal, capture) → Postmortem → Report
/debug "test the checkout flow"
→ Plan → Setup → Execute full flow with screenshots → Postmortem → Report
/debug "there's a React error on the settings page"
→ Plan → Setup → Execute, capture console → Postmortem → Report: Error details + location
/skill workflow-postmortem mode=summary AFTER Execution, BEFORE Report phase