How to debug your JavaScript web application

This post will cover the basics of debugging a JavaScript application in the browser, because sometimes is difficult to see what is happening in our code without inspecting what is happening in the execution, so let's start.

The most simple way to debug the application is using console.log(), and you can surely go to your JS file and write some log lines and it will print in the console the result of your execution, that will give you some result right? but I think that is not the optimal way, I want to include that sometimes developers abuse the use of console.log() when they are debugging code, putting logs in all possible ways and places of the code, losing time in writing in the IDE, saving the file, going back to the browser to verify if shows the required information and repeating the operation, also you can forget to remove the logs at the end of debugging and will hog precious ms of your execution time.

You can read my post of How to show logs in browser console

But we can do better, the browser has the right tools to save us time and effort, for the example we will work with a simple application of two files, first one is the html file, and the second one is the JavaScript file.

To start debugging we require the browser console, we can use Ctrl + Shift + J (on Windows) or Ctrl + Option + J (on Mac)

When the console is open we need to go to Sources -> Page and select the JavaScript file that we want to debug (in our case index.js).

As you can see the content of the file is opened in a new tab, from this tab we will debug the code, there are 2 options that we will cover in this post, first is Add breakpoint and second is Add logpoint.

As you can see in the image there are 4 stages.

1. If you right click the line number you will get the context menu.
2. If you select Add breakpoint line will be tagged blue/green (green in dark mode, also you can get same behavior with left click in the line number).
3. If you select Add logpoint you will be asked for a expression to log.
4. After expression to log is set, line will be tagged orange.

Starting with the breakpoint, if you refresh the page the code will be paused in that line that you selected, at this point you can see the values of the elements, hovering the element will also show the values, also you can execute the JavaScript line by line with the controls at the right top corner (resume script execution, step over next function call, step into next function call, step out current function or simply step).

Continuing with logpoint, if you fresh the page with your logpoint you will see the next result.

As you can notice the console contains two logs, one for the logpoint and other for the console.log() that was already in the code, in this case logpoint works exactly as console.log() "look ma, no code!".

The advantage of this debugging method is that you don't have to save the console.log() lines on your file and then remove those at the end of debugging because you can include them on the go with logpoints, also you don't lose time going back and forward with the IDE adding/removing logs and the better part is that you can stop the execution of the code with breakpoints and watch in real time the values.