DEV Community

Seif Ahmed
Seif Ahmed

Posted on

How to Hunt a Bug at 10 PM 🌙

#programming #javascript #webdev #debugging

The Story:

Picture this:

  • It is 10 PM.
  • I was eating my dinner while adding one final touch to my social media app, Vlox.
  • It should just say "Processing..." while generating a card.

Simple, right?
See the nightmare. 🔥

The Nightmare Scenario 📉

Suddenly, my "Download Card" button broke.
htmlToImage started spitting out completely empty 0b images.
The hunt was on.

Failed Mission Log 🛰️

  • Attempt 1: Swap to html2canvas 🔄
    • Result: Error stating the element was not found in the cloned iframe.
    • Verdict: The parent container was completely lost.
  • Attempt 2: Use CoolAlertJS Toast 🍞
    • Result: It looked ugly and means loading two different alert libraries for the same job? Not my game.
    • Verdict: Total waste of bundle size.
  • Attempt 3: Append card preview to body + display: none 🙈
    • Result: The canvas process failed entirely.
    • Verdict: Canvas snapshot engines completely ignore hidden elements.

The "Aha!" Moment 💡

Why did the element vanish?
Because the card generator lives entirely inside a Swal popup.
When you click the download/confirm button, Swal instantly destroys that entire popup DOM tree.
You cannot snapshot an element that no longer exists. 👻

The Ultimate Fix 🚀

Inside the new "Processing" popup, I appended the #card-generator-image-preview directly into the new alert container.
The element stays alive in the active DOM.
The snapshot succeeds perfectly.
Clean code. Happy developer. Delicious dinner.

Want to see the exact JavaScript code block that fixed it? Drop a comment below or check Vlox on Github.

Top comments (3)

Collapse
 
frank_signorini profile image
Frank •

How do you handle situations where the bug seems to disappear when debugging tools are applied? I'd love to swap ideas on this, been there many times at 10 PM.

Collapse
 
codemaster_121482 profile image
Seif Ahmed • • Edited

Hey Frank!

That's a really good question, and this is how I handle it:

  1. Ask myself, "What was the last fix or feature I tried to add?"
  2. Try to remove the last thing I added.
  3. Does it work after removing the feature?
  4. If yes, add the feature again, but not all at once. Add it part by part until I find the specific part that breaks the system.
  5. Now that the snippet causing the issue is found, try to fix it.
  6. Congrats! You successfully hunted down the bug!

How about you? How do you handle it?