playwright-debuglisted

# Playwright MCP Live Debugging Connect to a running VoiceTree Electron app for live debugging via browser automation. ## Quick Start (3 steps) ### 1. Start Electron in debug mode ```bash cd webapp && npm run electron:debug ``` This starts Electron with CDP enabled on port 9222 **and** automatically calls `prettySetupAppForElectronDebugging()` once the renderer is ready — loading the `example_small` project and spawning 3 debug terminals. > Run with a bash timeout (e.g. 30s) since this is a long-running dev server. ### 2. Verify CDP is ready ```bash curl -s http://localhost:9222/json/version ``` Should return JSON with `"Browser": "Chrome/..."`. ### 3. Go straight to inspecting — do NOT navigate The app is already loaded with the project and debug terminals. **Do not** run `browser_navigate` or `page.goto()` — this would force-refresh and destroy the loaded state. Instead, jump directly to: ```javascript // browser_evaluate — check cytoscape nodes const cy = window.cytoscapeInstance; JSON.stringify({ nodeCount: cy.nodes().length, edgeCount: cy.edges().length }); ``` Use `browser_snapshot` or `browser_take_screenshot` for visual inspection. ### Opening a specific project (optional) If you need a specific project instead of the test fixture: ```javascript await window.electronAPI.main.initializeProject('/path/to/folder'); ``` ## Available Tools | Tool | Purpose | |------|---------| | `browser_snapshot` | Get accessibility tree of current page | | `browser_click