Code Smarter; Use a Debugger
Tags: beginners, javascript, selftaught
Published: 2022-03-28 14:28:11

---
title: Code Smarter; Use a Debugger
published: true
date: 2022-03-28 12:24:00 UTC
tags: Beginners,JS,SelfTaught
canonical_url: https://webdevwithseb.com/2022/03/28/work-smarter-use-a-debugger/?utm_source=rss&utm_medium=rss&utm_campaign=work-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 ![🤯](https://s.w.org/images/core/emoji/13.1.0/72x72/1f92f.png) 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](https://en.wikipedia.org/wiki/Newline#In_programming_languages) was the issue.

![Hide The Pain Harold Meme Image](https://i0.wp.com/webdevwithseb.com/wp-content/uploads/2022/03/Hide_The_Pain_Harold_2_panel.jpeg?resize=580%2C773&ssl=1)


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](https://developer.chrome.com/docs/devtools/javascript/) 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](https://twitter.com/_sbmsr) and subscribe to [my web dev newsletter](https://github.us19.list-manage.com/subscribe?u=3122ad8b8bdaf8335e05ec4fa&id=53643b22fa).

---

The post [Code Smarter; Use a Debugger](https://webdevwithseb.com/2022/03/28/work-smarter-use-a-debugger/) first appeared on [💻 Web Dev With Seb](https://webdevwithseb.com).