How to debug JavaScript in browser?

Do you use console.log to find and fix the issue in your javascript code? Then you might spend a lot of time consoling each value at every stage to debug. But what if I tell you that there is a powerful in-house debugger in your browser that you can use to debug Javascript in browser with much detail.

In this blog, we will learn structure, tools, and how to use browser dev tools to debug your code as quickly as possible.

Different Ways of Debugging your Code

Before moving forward to debug code using dev tools, first, we need to know what are the different types of methods we use to debug our Javascript code.

Using console.log()

Using console.log is by default the approach of many young developers and some seasoned developers. It is one of the easiest ways to track any variable current value at any point in code.

let a = 1
let b = 2
let sum = a+b

console.log('Current value of sum -->',sum) // 3

For example, If you want to track what is the value currently stored in the variable sum, you can easily console by adding your message and variable. It might look easier to use but it becomes a little tiring when you have a large number of codes. You need to console on a number of places to understand what is the value you are tracking at that point of the code line.

Also read, Cracking the code: Young Palestinians take hold of their futures at Gaza’s tech hub

Using debugger

A debugger is a special keyword that stops the execution and calls the debugging function present in most browsers.

let a = 1
let b = 2
let sum = a+b

debugger

console.log('Current value of sum --',sum) // 3

When you use the debugger keyword at a certain line and run the program, codes get executed just before the debugger line and the rest program gets paused, the current values of the variables and function are displayed in the debugger section of the browser.

The rest of the code gets executed once you press the play button in the devtool.

Also read, What is JavaScript Event Loop?

Debugging Javascript using Devtool

Devtools is one of the most powerful sets of options that you can apply in order to track the value and function which is being executed at that moment in time and walk through the code one line at a time.

You can open devtools by pressing command + option + J on Mac or control + shift + J on Windows and Linux, Or you can simply right-click and choose the Inspect Element option.

You will see a big devtool panel with a number of options that perform different functions which you can require while testing different dynamics in development. Once your panel is opened, click on the Sources tab. The sources panel is a place where you debug your Javascript code.

Sources Tab is divided into three main sections,

• At the extreme left, you would see the file navigator pane, where you can inspect and select the file in which your code which needs to debug is present.
• After clicking on the file, you can see the content of the file in the code editor section.
• And at the right, you have a Javascript debugging pane with various options.

Also read, What is a Callback Functions in JavaScript

Now let us understand how we can debug our javascript code using devtool. Look at the code below,

Example

Here is a small snippet, We need to find how values get assigned to a variable,

let a = 1
let b = 2
let sum = a+b

console.log('Current value of sum --',sum)

Now open your devtool panel and click on the sources tab and open the file whose code you want to debug with the help of the navigation pane. Here I have just created a code snippet file in the browser and added the above code to it.

The blue marker appears on the left side in the number column of the code editor, for example, in lines 1 and 3, if you observe, you would notice a blue marker on the left side of the line number which is a breakpoint known as Line-of-code.

Line-of-code breakpoint is used at the exact region that you are trying to debug, when you run your code, debugging gets paused just before this line-of-code marker. This line-of-code is very equivalent debugger keyword that you can simply use in your code.

So after attaching the breakpoint when you run your program, you would notice your code execution gets paused at your first breakup point, and right side of the devtool panel, there are a number of sections which is appeared in front of you. This section is known as the JavaScript debugging pane.

In order to keep the tutorial short, I would jump directly to the main sections, If you would focus here first we see a section called Breakpoints, which displays all the places we have placed line-of-code markers in the code editor. Under it, You would see a section known as Scope, which shows you what local and global variable is currently defined or holds value.

Also read, An Easy Explanation of JavaScript Closure

Now in the very above section, you would see a button like this -> icon known as step, if you press the icon browser executes one line at a time. If you analyze the scope section in the above image, you would see three variables a,b and sum which currently hold undefined as we have paused the execution at the very first line of our code.

Now once we will click the step function the line of execution represented by the green line moves to a new line and the variable a value is assigned as 1.

Now we again click on the step function which will move the line of execution to the next line and variable b value is assigned as 2.

Now we again further click on the step function, the execution line moves to the next line, and now variable sum get value 3 assigned by adding values of variables a and b.

Thus we were able to track and understand what is happening in our code and how values are getting assigned to the variables in a more efficient way than just by using the console method.

Also read, How do JavaScript works? A detailed explanation of JavaScript’s Engine Working

Final Words

I hope you are able to understand the working of JavaScript debugging of the browser, It is all about understanding and tracking the code execution process in an efficient manner. Initially, it might all sound a little confusing but as you keep practicing, you will be able to get a hold of it.

If you like my article please share more with your friends and colleagues, and please bookmark this website to get awesome articles like these more.