Visual Debugger

Turning errors into lessons, explaining the 'why' behind every bug so you master your code while debugging.

Comment

Inspiration

We have all been there. You stare at a cryptic error message for hours, copy-paste it into an AI tool, applied the fix, and moved on without understanding what actually went wrong. We realized that while AI is great at solving problems, it often robs developers of the learning opportunity. We wanted to build a tool that doesn't just fix bugs but acts as a tutor. We were inspired to create a "Visual Debugger" that explains the "why" behind every error and the "how" behind every fix, appearing exactly when you need it within your workflow.

What it does

Visual Debugger is a VS Code extension that transforms the debugging experience into a learning loop. It works in two main phases:

Phase 1: Error Explanation When you encounter a syntax error or a runtime crash, the extension automatically detects it. Instead of just highlighting the red line, it uses Google Gemini to generate a plain English explanation of the bug. It breaks down complex compiler jargon into simple concepts you can understand.

Phase 2: Diff Review After you (or an AI agent) apply a fix, Visual Debugger activates again. It analyzes the code changes and explains exactly why this specific change resolved the error. It highlights the differences and teaches you the logic behind the solution.

Additionally, it features a Bug Dashboard that tracks your error history over time, categorizing mistakes so you can see patterns in your learning journey. It also includes an audio feature using ElevenLabs to read explanations aloud, making it accessible and easy to digest while you look at the code.

How we built it

We built Visual Debugger as a VS Code extension using TypeScript.

Core Logic: We used the VS Code Extension API to listen for diagnostic events (errors) and file document changes (diffs). AI Engine: We integrated Google Gemini (specifically the gemini-2.0-flash model) to power the intelligent explanations. We carefully prompted it to act as a patient tutor rather than just a code generator. Database: We used MongoDB Atlas to store bug records and user statistics, allowing the dashboard to persist data across sessions. Audio: We implemented ElevenLabs API for high-quality text-to-speech, giving the debugger a voice. UI: The side panels are built with React and webviews, ensuring a clean and modern interface that fits right into the editor.

Challenges we ran into

One of the biggest challenges was state management. We needed to link a specific error (Phase 1) to its subsequent fix (Phase 2). Determining if a file change was actually a fix for the previous error required careful logic in our "Diff Engine." We had to track file paths, timestamps, and error contexts effectively.

Another challenge was prompting the AI correctly. We didn't want it to just say "fix it like this." We had to iterate on the prompts multiple times to ensure Gemini analyzed the code context deeply and provided educational value, explaining concepts rather than just providing snippets.

Accomplishments that we're proud of

We are really proud of the seamless flow. The way the extension "wakes up" when you make a mistake and then "checks your work" when you fix it feels almost magical. It feels like having a senior engineer sitting next to you. We are also proud of the Bug Dashboard, as seeing a visual representation of your improvement over time is incredibly motivating.

What we learned

We learned a lot about the VS Code extension architecture and how to intercept editor events performance-efficiently. We also gained a deep appreciation for the capabilities of the new Gemini models. We learned that with the right context window, AI can understand the intent behind code much better than we expected. Most importantly, we learned that tools should be designed to empower developers, not just automate them away.

What's next for Visual Debugger

We plan to expand language support beyond JavaScript and TypeScript to include Python and Rust. We also want to implement a "Gamification" system where users earn experience points for fixing bugs and learning new concepts. Finally, we aim to add collaborative features so teams can see shared common pitfalls and learn from each other's debugging sessions.

Built With

Share this project:

Updates