As a front-end developer, I deal with bugs all the time. Those sneaky ones that pop up in runtime and mess with my flow or those silent ones that I can never understand what's wrong, are my worst nightmare, or to better phrase, it used to be... Today I want to present you with a solution.
Recently, I collaborated with theORQL team to try their AI runtime debugger. I met the founder, and we had a lovely chat as well as a practical demo of the product. (More info here.)
It's a tool that lets you debug right in Chrome and sync fixes back to VS Code, making it easier to spot and resolve issues without jumping between tabs or losing context.
In this article, I'm breaking down 5 bugs from a weather app demo. Each one shows what the bug looks like, how it breaks things, and how theORQL helps fix it. I based this on a weather demo repo. I'll link short clips from my YouTube video where I walk through each one, feel free to watch the full thing here for the step-by-step guidance.
If you're tired of manual debugging headaches, give theORQL a look. Let's dive in.
Scenario 1: Asset Load Failure in Visual Effect
💡Note: Click on the video and it will show you the exact error.
What the Bug Is
The weather effects should show clearly, like snowflakes falling on the snow page. But the snow mode looks empty. The network tab reveals a failed request for the snowflake texture (a 404 error), and the console has warnings from the loader. This breaks the visual without a hard crash, so it's easy to miss if you're not checking resources.
How We're Solving It
theORQL correlates the empty render with the failed network request and console error. It jumps me to the TextureLoader.load call that's requesting the wrong URL. The explanation covers why the effect stays blank (texture never loads), and it proposes fixing the path to the correct snowflake.src. I sync the change to VS Code, reload, and the snow appears as expected. Quick and targeted, no sifting through network logs manually.
Scenario 2: CalendarPanel Runtime Render Error
💡Note: Click on the video and it will show you the exact error.
What the Bug Is
In this setup, the calendar panel looks fine at first – you see the month header and day grid. But when you click any day, it triggers a runtime React error. The app crashes with a Next.js red error overlay, and the console logs a stack trace pointing to the CalendarPanel component. This happens because of a null or undefined access when formatting dates, like calling getFullYear on nothing.
How We're Solving It
With theORQL, I capture the exception and stack trace right away. It pinpoints the exact line in format YYYYMMDD where the null date causes the issue. The tool explains the failure in simple terms and suggests a fix: "Add a null check to handle bad inputs safely". I review the diff in VS Code, apply it, and the calendar works without crashing. No more hunting through logs, it's a small change that guards against empty states in the UI.
Scenario 3: Unauthorized Everywhere (Missing Required Header)
💡Note: Click on the video and it will show you the exact error.
What the Bug Is
The weather panel should load data fine, and switching cities updates it smoothly. But here, every request fails with a 401/403 unauthorized error, showing a visible error state in the panel. This is due to a missing required header in the API calls, like an auth token that's not being sent.
How We're Solving It
theORQL traces the failed requests and surfaces the missing header issue with the response details. It points to the fetch call in the weather service where the header should be added. The tool suggests inserting the auth header (e.g., with the right token). After that, the panel loads correctly, and city switches work without errors. Saves time on tracing auth flows across the app.
Scenario 4: Silent UI Failure (Calendar Dates Invisible)
💡Note: Click on the video and it will show you the exact error.
What the Bug Is
The calendar should show day numbers for the current month, and you can click them to select. Now, the calendar UI appears, but day numbers are invisible/blank. Clicking still changes the selected date. No errors or logs in the console. DOM inspection shows the elements exist with text, but computed styles hide it (e.g., color: transparent or opacity: 0).
How We Solve It
theORQL lets me select the calendar element and describe the issue ("the calendar dates aren’t appearing"). It captures DOM snapshots and computed styles to confirm the text exists but is hidden, then points to the exact className/style line responsible. It proposes removing the hiding style (e.g., text-transparent or opacity-0) and restoring a visible text color for day labels. I apply the small diff in VS Code, and the dates become visible again!
Scenario 5: Silent UI Failure (Planner “Add” Does Nothing)
💡Note: Click on the video and it will show you the exact error.
What the Bug Is
In the Planner modal, you should type a task in the input and click "Add" (or Enter) to insert a new checklist item. Now, you can type into the input, but clicking "Add" does nothing, no new item appears. No errors or logs in the console. Element inspection shows the input contains text in the DOM, but the add logic exits early because internal draft state is empty.
How We Solve It
theORQL lets me select the input or "Add" button and describe the symptom ("Add doesn’t add an item"). It traces the click to the handler, observes the state/value mismatch (draft.trim() sees empty despite typed text), and points to the broken binding (onChange or controlled value). It proposes restoring the input-to-state wiring so draft reflects the text. Now adding tasks works with the new item inserted correctly.
Conclusion
These five bugs (render errors, asset failures, auth issues, invisible UI elements, and silent logic failures) show typical runtime problems that don't always log loudly but break user experience.
theORQL helped by capturing evidence from Chrome (stack traces, network, DOM, events) and providing explainable fixes synced to VS Code, cutting down debug time.
🤓 If this sounds useful for your workflow, try theORQL and check their VS Code extension.
🐛 Share your bug stories or runtime tools in the comments. Happy debugging!
Top comments (1)
Let me know if there is anything I can do to help you folks debug your project.