Debugging 5 Real-World Bugs: A Practical Walkthrough That Doesn't Include Console.log!

Source: Dev.to

Introduction

As a front‑end developer I’m constantly battling two kinds of bugs:

• Runtime‑visible bugs – they pop up in the console and break the UI.
• Silent bugs – they don’t throw errors, yet the app behaves incorrectly.

Both are a nightmare. That’s why I teamed up with the theORQL team to try their AI‑powered runtime debugger. After a great chat with the founder (more info here), I recorded a step‑by‑step video that shows how the tool works in practice.

In the era of AI, how do you debug?
Watch the full video guide (with tips from the founder) on YouTube: [Practical Video Guide – Debugging with theORQL]

What theORQL Does

• Runs inside Chrome – no need to switch tabs.
• Syncs fixes back to VS Code – one‑click diff application.
• Correlates errors – network failures, console warnings, DOM anomalies, and stack traces are all linked together.

Below are the five bugs I explored in a weather‑app demo. Each section contains:

1. What the bug looks like
2. Why it breaks the app
3. How theORQL identifies and fixes it
4. A short video clip (click the thumbnail to see the exact error)

1️⃣ Snowflake Texture Not Loading

💡 Note: Click the video to see the exact error.

• Symptom: The snow page should display falling snowflakes, but it’s empty.
• Root cause: A 404 error for the snowflake texture (snowflake.png) shown in the Network tab; console warns about a failed TextureLoader.load.
• theORQL fix:
  1. Correlates the empty render with the failed request.
  2. Highlights the line TextureLoader.load('assets/snowflake.src').
  3. Suggests correcting the URL to the proper path.
  4. Syncs the change to VS Code, reloads, and the snow appears.

▶️ Snowflake Bug Clip

2️⃣ CalendarPanel Runtime Render Error

💡 Note: Click the video to see the exact error.

• Symptom: Clicking any day triggers a React error; the Next.js red overlay appears.
• Root cause: null/undefined date value used in formatYYYYMMDD, causing getFullYear to be called on undefined.
• theORQL fix:
  1. Captures the exception and stack trace.
  2. Points to the exact line in formatYYYYMMDD.
  3. Recommends adding a null‑check before formatting.
  4. Apply the diff in VS Code → calendar works without crashing.

▶️ CalendarPanel Bug Clip

3️⃣ Weather Service Unauthorized Requests

💡 Note: Click the video to see the exact error.

• Symptom: Every API request fails with a 401/403 error; the weather panel shows an error state.
• Root cause: Missing authentication header (e.g., Authorization: Bearer ) in the fetch call.
• theORQL fix:
  1. Traces failed requests and surfaces the missing header.
  2. Highlights the fetch call in weatherService.js.
  3. Suggests inserting the required header.
  4. After syncing, requests succeed and city switching works.

▶️ Auth Header Bug Clip

4️⃣ Calendar Day Numbers Invisible

💡 Note: Click the video to see the exact error.

• Symptom: Calendar UI renders, but day numbers are invisible (clicking still selects a date). No console errors.
• Root cause: Computed styles hide the text (color: transparent or opacity: 0) via a stray CSS class.
• theORQL fix:
  1. Captures a DOM snapshot and shows that the text exists but is hidden.
  2. Points to the offending CSS rule (.day-label { color: transparent; }).
  3. Proposes removing the rule or changing the color to a visible one.
  4. Apply the diff → dates become visible.

▶️ Invisible Dates Bug Clip

5️⃣ Planner Modal “Add” Button Does Nothing

💡 Note: Click the video to see the exact error.

• Symptom: Typing a task works, but clicking Add (or pressing Enter) adds nothing. No console errors.
• Root cause: The component’s internal draft state is never updated because the onChange binding is broken; the handler sees an empty string.
• theORQL fix:
  1. Traces the click event to the handler, observes the state/value mismatch.
  2. Highlights the broken binding (value={draft} without proper onChange).
  3. Suggests restoring the two‑way binding.
  4. Sync the change → tasks are added correctly.

▶️ Planner Modal Bug Clip

Takeaways

These five bugs—asset failures, runtime exceptions, auth issues, hidden UI, and silent logic errors—represent common runtime problems that often lack clear console output.

theORQL helped by:

• Capturing evidence directly from Chrome (network, console, DOM, events).
• Providing an AI‑generated, human‑readable explanation.
• Offering a one‑click diff that syncs to VS Code.

The result? Faster, more focused debugging with less context‑switching.

🎯 Want to Try it Yourself?

• Install theORQL’s VS Code extension
• Open Chrome DevTools, run the debugger, and let the AI do the heavy lifting.

If you find it useful, share your own bug‑stories with the community!

Happy debugging! 🤓

Note: All video links above are placeholders; replace them with the actual YouTube URLs.