FE Debug Logger

Capture frontend debug logs as structured Markdown for Claude Code

FE Debug Logger captures frontend debug data and exports it as structured Markdown — ready to paste into Claude Code or any AI assistant for instant bug analysis. ⚡ What it captures: • Console errors, warnings, unhandled exceptions with stack traces • User actions — clicks, form inputs, navigation with DOM selectors • Network issues — HTTP errors (4xx/5xx) and slow requests (> 3s) • Component state — auto-detects React & Vue, captures props/state trees • DOM annotations — click elements and add notes to highlight problem areas • Screenshots — full page or select region 🔒 Privacy-first: • All data stored locally — never sent to external servers • No analytics, no tracking, no third-party integrations • Sensitive fields (passwords, tokens, API keys) automatically masked • Open source: https://github.com/minhtn012/fe-debug-logger 🛠 How it works: 1. Navigate to the page with the bug 2. Click the extension icon → toggle capture categories 3. Click Start → reproduce the issue 4. Click Stop → Copy or Export the Markdown log 5. Paste into Claude Code — it has full context to fix the bug 🤖 MCP Integration (optional): Let Claude Code control recording programmatically via a local MCP server. Start/stop recording, read debug logs, and manage sessions — all from the CLI. Built with Manifest V3, vanilla JavaScript, zero external dependencies.