Debugging In JavaScript

Your code will not be right the first time and that’s okay. Debugging is a very important thing to do. If you understand how to debug well, you will be able to code better and more efficiently.

In JavaScript, there is the “debugger” keyword. This will stop the program and open up the debugging tools.

When the program reaches that line, it will be paused. This will only do this if you have the console open in your web browser, for me that is Google Chrome. Let’s run through what I most commonly use

Here I mostly look at “Watch” and “Scope”. With “Watch” you will have to enter something that you want to keep you eye on. Such as a variable that keeps changing, or an Array that keeps getting stuff pushed into it. Here I have an object, and everything in there looks to be fine. There other thing I watch is “Scope”. More importantly, “Local”

Here, I can usually see what “This” is. “This” is a very important keyword and its always good to see what it is referring to. For this app, I am using react and it is telling my things about the component, such as functions, state, and props.

The last tool and the one I use the most is the console

If you are not keeping watch, they can enter anything here and see what it is at that time. You can see that this, this.props.entry, and this.state are the same as above. More importantly you can enter variables, arrays, or objects here and it will tell you what it is and what’s inside of them. This is what I believe is the most helpful tool in all of JavaScript.

The other thing that people will do is console.log.

As you can see, it will throw whatever “this.props.entry” is into the console. And that isn’t a bad thing. Sometimes having them is a good reminder on what something is. However I don’t recommend to use them in every situation.

Debugging is a great skill to have. Master it, and you won’t be sitting there for hours wondering what exactly went wrong, and why your code isn’t working.