Documentation Directory

Welcome to the documentation for debug-web-app!

Available Guides

1. DebugMCP + Playwright Full-Stack Debugging Architecture Guide

   • Comprehensive overview of the Node.js (Express) + Vue 3 (Vite) full-stack architecture.
   • Detailed breakdown of VS Code Debugging (.vscode/launch.json), source map resolution, Chrome DevTools Protocol (CDP) attachment, and Playwright target environments.
   • Step-by-step instructions for running dev servers, Playwright tests, and IDE debugging.

2. Staircasing Experiments Guide

   • Progressive 5-level experimental matrix for validating DebugMCP, Browser Subagent, and Playwright integration over CDP port 9222.

3. Level 1 Experiment Log & Lessons

   • Empirical DebugMCP execution log & technical learnings on blocking start_debugging mechanics and V8 scope evaluation.

4. Level 2 Experiment Log & Lessons

   • Playwright test runner debugging log & insights on Node-to-Chrome IPC evaluation limits and chrome-devtools-mcp DOM script evaluation.

5. Level 3 Experiment Log & Lessons

   • Dual-control live browser debugging log & lessons on environment resets, breakpoint cleanup, and Chrome extension prerequisites.

Quick Links

• Staircasing Experiments: docs/staircasing-experiments.md

• Level 1 Log & Lessons: docs/experiment-level-1-log.md | Lessons

• Level 2 Log & Lessons: docs/experiment-level-2-log.md | Lessons

• Level 3 Log & Lessons: docs/experiment-level-3-log.md | Lessons

• Backend Entry Point: server/src/index.ts

• Frontend Entry Point: client/src/App.vue

• Frontend Component with Breakpoint Markers: client/src/components/ItemList.vue

• Playwright Configuration: playwright.config.ts

• Playwright E2E Suite: tests/app.spec.ts

• VS Code Launch Profiles: .vscode/launch.json