Understand your bug. Learn how to fix it.

Screenshot Debugger is an open-source guided debugging workshop for students learning JavaScript, TypeScript, and React.

When an error appears, finding a suggested fix is only part of the challenge. Understanding what failed, what evidence supports the diagnosis, and how to verify the correction matters just as much.

Our application turns a PNG or JPEG error screenshot, with optional code and context, into a structured investigation.

What users can do

• Choose Learn mode for guided exploration, or Direct diagnosis for a more immediate explanation.
• Examine numbered evidence, with observed facts separated from hypotheses.
• Continue the investigation by answering follow-up questions and supplying missing context.
• Review a before/after code diff, explanations of the proposed changes, and manual verification steps.
• Export a reusable Markdown debugging card and retain cards locally in their browser.

The application never executes the proposed fix. The student remains responsible for understanding, applying, and checking the correction.

Real multimodal AI with Gemma 4

Screenshot Debugger uses the open-weight model Gemma 4, gemma-4-26b-a4b-it, to analyze screenshots and produce the debugging report. The Gemini API is the access channel; Gemma is the model.

The interface identifies the model and displays a live badge for live analyses. The application uses the Files API for image input and validates structured model responses with Zod.

Open-source engineering

The public GitHub repository includes:

• Application source code under the MIT license.
• An original model harness: input validation → diagnostic prompt → Gemma → structured response validation.
• A CLI using the same diagnostic pipeline as the web application.
• An Agent Skill using the open Agent Skills format.
• Documentation and synthetic screenshots for reproducible demonstrations.

API credentials remain on the server. The application runs on DigitalOcean App Platform, while model inference is accessed through Google’s API.

Try the live demo

Open the application, select “Exemple 2 · null length”, choose “Apprendre”, and click “Analyser”. Explore the evidence, reveal the proposed correction, inspect the diff, and export the debugging card.

Built during Hacktoberfest Hack Day Montréal x AGEEI on October 9, 2026.

Our goal: help a student move from an error screenshot to an explained correction and a reusable debugging principle.