FE Debug Logger

About

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.