WebDevRecorder

About

**Remember the last time a bug report said "it doesn't work" but had no context?**

Debug smarter with WebDevRecorder: The essential companion for frontend developers and systems architects that captures the *whole story*.

=== The Problem: "It work's on my machine" ===

You receive a bug report from a QA tester or a user. All you get is a screenshot of an error message.
- "Which API call failed?"
- "What was the payload?"
- "Did a console error fire?"
- "What did the UI look like *before* the error?"

Usually, this means jumping on a call, asking them to open DevTools (scary for non-techies), and hoping they can reproduce it.

=== The Solution: Visual + Technical Context ===

WebDevRecorder solves this by recording your session in the background. It doesn't just capture logs; it builds a timeline of your user's journey.

It rests on **Three Pillars of Context**:

1. 🌐 **Network Traffic**: Capture every XHR and Fetch request automatically. See headers, request bodies, and response payloads.
2. 📸 **Smart Screenshots**: We automatically snap a picture of the page when you click or navigate. See exactly what the user saw.
3. ⚠️ **Console Logs**: Don't let silent failures slip by. We capture `console.error`, `warn`, and `log` with full stack traces. Inspect them in a terminal-like view alongside your API calls.

=== Key Benefits ===

*   **Reverse Engineer with Ease**: Perfect for "old dashboard" archaeology. Map out every API call as you click through a legacy site.
*   **End Context Switching**: No more toggling DevTools. Record your session and review the organized flow later.
*   **AI-Driven Debugging**: Instantly export your captured data to **OpenAPI specs** or **Markdown**. Feed them directly into LLMs (like ChatGPT or Claude) to generate boilerplate code, fix bugs, or document legacy systems.
*   **Privacy First**: Your data is stored locally in your browser. We don't send it to any cloud.

Stop debugging harder. Start recording smarter.