inspectlisted

# Inspect, Headless Browser Zwei Modi je nach Aufgabe: **Nutzung:** - `/inspect`, Screenshot + visuelle Analyse (URL aus Projekt abgeleitet) - `/inspect https://example.com`, Direkte URL - `/inspect https://example.com mobile`, Mobile Viewport (390x844) - `/inspect https://example.com interact`, Interaktiver Modus via Playwright MCP (navigieren, klicken, Console-Errors prüfen) --- ## Modus A: Screenshot (Default) Für visuelle Analyse: Layout, Rendering, Fonts, Farben. ### 1. URL bestimmen Wenn keine URL übergeben wurde, in dieser Reihenfolge suchen: 1. `.env` oder `.env.local`, `NEXT_PUBLIC_APP_URL`, `APP_URL`, `SITE_URL` 2. `package.json`, Port aus `dev`-Script (z.B. `--port 3001`, Standard: 3000) 3. `.ddev/config.yaml`, `name`-Feld → `https://<name>.ddev.site` 4. Fallback: `http://localhost:3000` ### 2. Screenshot erstellen Seite erst komplett durchscrollen bevor Screenshot gemacht wird, damit IntersectionObserver, GSAP ScrollTrigger, Framer Motion whileInView etc. triggern können. ```bash INSPECT_OUT="/tmp/inspect_$(date +%s).jpg" MOBILE="${MOBILE:-false}" # "true" fuer Mobile-Modus cat > /tmp/pw-inspect.mjs << 'SCRIPT' import { chromium } from 'playwright'; const url = process.argv[2]; const out = process.argv[3]; const mobile = process.argv[4] === 'mobile'; const browser = await chromium.launch(); const page = await browser.newPage(); await page.setViewportSize(mobile ? { width: 390, height: 844 } : { width: 1280, height: 800 }); await page.goto(url, { waitU