In this blog, we will learn structure, tools, and how to use browser dev tools to debug your code as quickly as possible.
Table of Contents
Different Ways of Debugging your Code
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.
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.
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.
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.
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.
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.
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
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
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
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
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.
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.