Debugging JavaScript — The Right Way

Still using console.log to debug your code ?— you’re wasting a hell lot of time.

Let’s discuss a better way to debug your JavaScript code.

Whenever we’re debugging an issue, we always start by reproducing the issue — to find the series of actions that led to the bug.

For this article, we’ll be using this buggy sum application provided by Google.

In this application, suppose we add 6 & 7, it’s returning the sum as 67— this is the issue we need to debug.

Now, you can say that I can use console.log to debug this issue, so before moving further, let me tell you about the demerits of using it.

1. Finding relevant code in a big codebase is an overhead task.
2. Then to sprinkle console.log, here & there in the hope to reach the buggy part.
3. Then refresh the page & checking the console.

And, if the above three steps don’t work, then you need to repeat the above three steps again & again.

DevTools enables you to pause the code in execution, inspect scope variables & see the code execute one line at a time.

Let’s start debugging this faulty application.

Open the console & go to the sources tab, debugging happens in the sources tab.

On the left side, you’ll find the File Navigator Pane — which displays all the JavaScript files. And on the right side, we’ve JS debugging pane, where all the magic happens

By looking at the app we can say there’s some problem when ‘click’ event-listener is called. Let’s get to that moment in the code.

Go to Event Listeners Breakpoint -> Mouse -> Click. It has now added a breakpoint at the first click event listener.

When we now click the ‘Add number 1 and number 2’ button, the controller reaches the first line of the onClick function.

Breakpoints are not the only events that are mentioned in this list, these can be of different types. It could be a specific line of code, a change of any DOM node, or anything where you want to stop your code & see it execute line by line.

Code stepping controls, at the top of debugging pane, help to execute one line at a time. Let’s discuss them -

Resume script execution — resumes the script execution. If you feel like you’re not at the required point in the code, resume the script until you reach the required point

Step over to the next function call — this bypasses the current statement & takes us to its end.

Step out of current function call — helps to come out of a particular function

You’ll get to know the functionality of each when you start using them, let’s come back to our problem.

After reviewing the code, we can say that the error is somewhere at the updateLabel function, let’s set a breakpoint there.

In the debugging pane, we have the call stack, which shows all the variables that are in scope. When we look at the variables, addend1 & addend2, we see that they are strings.

Let’s head over to the Watch section — which enables us to watch values of expressions over time. Let’s add typeof sum & see it after the addition.

When the code is paused we can access the scope variables. Let’s just change the code in the debugging phase & see if we got the correct error.

Now, after correcting the error & running the code (after saving with Ctrl+S) we get the typeof sum as number.

And, we get the same result in the browser as well!!

Hope you got to learn about the amazing DevTools through this article. For more amazing content, stay tuned!!!😁 😁

Connect with me on LinkedIn.