How to do JavaScript Debugging (Techniques You Should Know in 2019:)

Software development is a cumbersome task. Sometimes you’ll get your tasks done without any fuss and then there might be times when you’ll have no idea about the nature and origin of errors.

So what is debugging exactly?

Debugging is basically a part of software development where we look for the sources of these errors and fix them. When an individual starts learning JavaScript, debugging would seem quite gruelling. Looking for errors and resolving them can be difficult sometimes not only for new developers but also for the experienced ones.

This is where “console.log()” comes into the picture. We all would agree that we are tempted to use it. Isn’t it? The reason is that beginners usually don’t know much about the tools that are provided by a browser. Having a good comprehension of browser debugging tools can be a lifesaver for many developers.

Let us start this discussion with the console.log() itself and why we should avoid using it. 

console.log() 

We write “console.log()” in our code to check if the values are accessible in that particular block.

This leads to two issues. We need to write it manually and pass each object one by one to check their values. A good coding convention calls for a non-redundant code so it is not a good practice to write this console.log() in the code again and again.

In addition to this, there are other variants of console.log() that many of the developers, still don’t have a clear grasp of.

Let’s look at some of these techniques that every developer should keep handy for a hassle-free development as well as debugging.

We use the console to log strings and objects. This helps us to see if control is reaching a particular block of code. Let’s say we have an object or array of objects and we wish to see if the browser is able to seek the data. It would be convenient to write console.log(). But here for inspecting the objects, we need to expand each of them. This will take a lot of time as well as efforts to check each of the objects.

Figure 1: Values of the objects logged on the console

So instead of writing console.log() for inspecting an array of objects, we can use a variant of this, console.table().

Further, let us examine console.table()

When we pass an object in the console.table(), the value of this object is logged in a tabular structure and it becomes easy to inspect the values. This will save us some extra time expanding the logs.

Figure 2: Shows output generated by console.table()

These two methods are required to be written in the code manually but we have another technique that we can use to check the values which are in scope and we can do it from the Chrome browser window.

Breakpoints

A breakpoint is nothing more than a pause button. It stops the execution and checks for the values of the objects and variables. We can put breakpoints either by writing debugging logic in the code itself or by going to the sources tab in the inspect element of the browser.

 

Figure 3: Breakpoints in source code

In the source section, you will find the complete source code that you are currently working on. You will also find all the other files which are present in that directory. Click on the line number and now this line would act like a breakpoint and will stop the execution when the control comes over.

Figure 4: Options available with Breakpoints

The blue colored button in the image is used to resume script execution. When the control stops execution due to any breakpoint, you can click on this button. This will resume the execution. The execution will continue until the browser finds the next breakpoint.

After putting breakpoints you can choose to move ahead line by line and see the values that are present in objects. After you are done debugging you can disable the breakpoints. This will resume the execution without debugging.

Now let’s see how the debugger can be added in the code itself.

Figure 5: Writing debugging logic in the code

We use the “debugger” keyword for debugging a particular portion of code. The functionality is entirely the same as that of the breakpoints. The debugger keyword will stop the code from executing and calls the debugger function.

The technique of marking lines as breakpoints in the browser is quite considerable when we have to troubleshoot an application. Breakpoints are very helpful in finding bugs when we are working in a team and we have to debug codes that are written by other developers. So using breakpoints is clearly a better choice in comparison with logging consoles.

Keep reading and Keep learning!!!

If you’ve any doubts, please let us know through comment!!

Follow Us on Facebook | Twitter | LinkedIn.

Be it a software developer, programmer, coder, or a consultant, CronJ has it all. CronJ has been a trustworthy company for startups, small companies, and large enterprises. Hire the web of experienced ReactJS Development Services for your esteemed project today.

Let CronJ assist you..!

Thank you !!!