Code Smarter; Use a Debugger

I was helping a friend debug an issue yesterday. He just started learning PHP, and was building an auth login page in HTML/CSS/JS.

The bug was strange – there was an if statement in his client side javascript which always resolved to false:

if (response.html == "OK") {
  // Response Success
  console.log("This Print Statement Never Executes")
} else {
  // Error Occurred
  console.log("This Print Statement Always Executes")
}

There was no indication as to why response.html was never equal to “OK”. The backend logs looked fine, and the client network logs even showed “OK” in the response.

My friend spent the whole day trying to figure out what the hell was going on. He eventually called me and asked if I could take a look.

The Moment

On initial inspection, everything seemed fine. I couldn’t immediately tell why this didn’t work. So I jumped in to chrome devtools to start the debugger.

We put down some breakpoints and found the issue in a minute. It turned out the backend response was “\nOK”. A single, measly newline was the issue.

My friend couldn’t believe there was an alternative to debugging with console.log(). I showed him how to place breakpoints in his code, pause his code mid-execution, check the state of the program, and use this information to figure out why things aren’t working.

Seeing how happy it made him motivated me to share this story. If you find yourself getting stuck on bugs and start writing print statements everywhere to fix the issues, I urge you to look into using a debugger.

If you’re doing web development, Chrome has fantastic dev tools built in to the browser. Here are their docs on how to set up debugging breakpoints in your client side javascript apps.

Conclusion

My goal is to inspire people who are currently not using a debugger to finally do it. For reference, I spend at least 30% of my time in the debugger as a professional developer. That’s how useful it is.

If you’re on the self-taught track, you need to be resourceful with your time and energy. Code smarter, not harder, by using a debugger. I guarantee it will make the journey much easier.

Want more web dev tips? Follow me on twitter and subscribe to my web dev newsletter.

The post Code Smarter; Use a Debugger first appeared on 💻 Web Dev With Seb.