blog

Practicing Debugging Patterns with Elusive Bugs

Jess Brown

Jess Brown

— 2 min read
Practicing Debugging Patterns with Elusive Bugs
Photo by Jackson Simmer / Unsplash

I found a bug I was really worried I couldn't fix. I had made a feature on a site in which cards could be flipped over to reveal more information when you click on them. It was working great until someone tried it on their iPhone, and it would not respond at all.

Where to Start?

Pattern #1: Narrow the scope. Look for clues to inform where you should be troubleshooting. In this case, if something doesn't work on the iPhone, it's probably because it doesn't work on Safari, the iPhone's default web browser.

Always narrow the scope! Where does the bug NOT occur?

That little hint made it much easier to work on, since I can pull up my site on Safari and test it until it works. Once it works, then we can test on the iPhone, and it almost always means we've solved the problem.

Narrow Down Again

With only two very basic Javascript functions, I was puzzled at how this could be happening. I checked the caniuse site to see if any part of my Javascript was not supported by Safari, only to find I was "in the green" for compatibility.

Pattern #2: Eliminate potential offenders. Start with the most likely culprit. In this case, I went to Javascript (JS) because it's my weakest skillset, so I may have made a typo or did something that isn't widely used across browsers. I also chose JS because it manipulates the page, and if it doesn't appear to be changing, it's very likely that the JS has the bug.

Watch for the Unexpected

Now it's time to try watching the element behavior in the HTML. I pulled up the dev tools in both Chrome and Safari so I could see what was happening when I clicked the card. It was supposed to add a class and remove a class to flip a card to the back or to reset the card to the front. I saw the classes change in Chrome, but nothing happened in Safari.

Pattern #3: Watch for inconsistencies. Try something trivial—you can often find your bug or, at least, a lead when you try doing something basic. Maybe that's restarting the dev server, hard-refreshing your browser, or inspecting the element in the dev tools. It's the unexpected behavior in these little actions that can key you in on the bug.

After watching the behavior, I realized something unique. Whenever I right-clicked and chose "Inspect Element" in Chrome, it would focus on card-front, as expected. When I tried this in Safari, it kept selecting the body of card-back.

This tipped me off that there may be a stacking order issue from how Safari renders the DOM. I added 4 lines to my CSS, changing the z-index of the card-front, card-front.flipped, and card-back, card-back.flipped. That did the trick!

Everything now worked as expected including the "Inspect Element" behavior of the Safari dev tools.

Debugging Is Hard

Sometimes the troubleshooting process is extremely complex, involving many layers of investigating, Stackoverflow surfing, and tinkering. Stepping away from the debugging process for a while is sometimes necessary, too—when you're too frustrated or too focused for too long, taking a break often helps.

The point is to keep searching. Use the debugging patterns mentioned here to discover the source of the problem, use search engines and forums to find similar types of problems and solutions, and try to keep an open mind. It's tough, but you've got this!

Read more