In this article, we are going to explain how to debug JavaScript using DevTools in Chrome step by step. If you want to debug your JavaScript code in Chrome then you have to follow these steps as mentioned below.
Project Overview
I am going to demonstrate an example of how to debug JavaScript Code within Chrome. In this step, I am going to give a basic description of the code. This project is about computing modulo operation between two numbers. This example permits you to pass the value of dividend and divisor respectively. Subsequently, on clicking the compute button, it will take a minute to calculate mod between two numbers and will give you the output. The syntax of modulo operation is as follows:
Where x = dividend, y = divisor, and r = remainder
There are two files in this project, .html and .js file. JavaScript file contains 5 functions in order to calculate mod of two numbers:
- Click handler: It gives an alert message if one or both input fields are empty
- Inputs are empty(): This function is used to check if input fields are empty or not
- updateLabel(): This function is used to compute the mod of two numbers
- getNumber1(): Used to get the value of first number
- getNumber2(): Used to get the value of second number
Javascript code is illustrated below:
function onClick() {
if (inputsAreEmpty()) {
label.textContent = ‘Alert: You have to enter numbers in both fields.’;
return;
}
updateLabel();
}
function inputsAreEmpty() {
if (getNum1() === ” || getNum2() === ”) {
return true;
} else {
return false;
}
}
function updateLabel() {
var value1 = getNum1();
var value2 = getNum2();
var mod = “value1” % “value2”
label.textContent = value1 ‘ % ‘ value2 ‘ = ‘ mod;
}
function getNum1() {
return inputs[0].value;
}
function getNum2() {
return inputs[1].value;
}
HTML file code is illustrated below:
<html>
<head>
<title>How to Debug JavaScript in Chrome Tutorial</title>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<style>
h1 {
font-size: 1em
}
input, button {
min-width: 72px;
min-height: 36px;
border: 1px solid grey;
}
label, input, button {
display: block;
}
input {
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1>Calculate Mod between two Numbers</h1>
<label for=“number1”>Enter the value of dividend</label>
<input placeholder=“Please enter number” id=“number1”>
<label for=“number2”>Enter the value of divisor</label>
<input placeholder=“Please enter number” id=“number2”>
<button>Compute mod(%)</button>
<p></p>
<script src=“index.js”></script>
</body>
</html>
Output of the project:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-1.png" data-lazy- height="351" src="data:image/svg xml,” width=”513″>
Bug Detection
The sad part is whenever we will run this code, it would show some bugs to you. As you can clearly observe in the example below, when we are inserting the values the output is undefined instead of an actual result. So, now we have to detect the original cause of the bug which is explained briefly in the same article later.
Example
In this example, we are going to pass values that give the undefined output as shown in the picture below.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-2.png" data-lazy- height="346" src="data:image/svg xml,” width=”483″>
So, now we have to fix this bug quickly. In this step, our main target is to detect the source of bugs. For rapid detection of the bug, you should debug the JavaScript code in Chrome.
For this, you need to run the application on Chrome, and then you have to open devTool by pressing the short keys CTRL SHIFT I. After opening the devTool, you will be able to see the screen shown below. Besides many tasks performed by Devtool, it can also monitor requests, change CSS.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-3.png" data-lazy- height="461" src="data:image/svg xml,” width=”729″>
Developers tool Overview
You can debug your JavaScript code in the source panel tab. It has 3 parts as shown below:
- File navigator page: Requests of every file can be listed in this tab.
- Code editor: It displays file contents
- Javascript debugging pane: Used to inspect JavaScript
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-4.png" data-lazy- height="444" src="data:image/svg xml,” width=”956″>
Code Debugging
The simplest way to debug a bug in your code is that you have to insert the console.log() function within your code for inspecting values simultaneously.
function updateLabel() {
var value1 = getNum1();
console.log(‘value1:’, value1);
var value2 = getNum2();
console.log(‘value2:’, value2);
var mod = parseInt(value1) % parseInt(value2);
console.log(‘result:’, mod);
label.textContent = value1 ‘ % ‘ value2 ‘ = ‘ mod;
}
Although the console.log() function can be a good option for detecting the bugs but breakpoints could be a more effective option as it allows you to pause code during its execution and analyze the corresponding value. Moreover, a breakpoint is better than console.log() because working with console.log() you have to observe many steps which have to be done manually in order to view values in the console window while breakpoints make it easier by working directly.
Insertion of breakpoints in code
In case you get back and have a look at the application’s functionality, you will get to know that the result of the modulo operation appears to be incorrect after clicking the “Compute button”. Therefore, you will need to put a breakpoint before the click event.
Event listener breakpoints help you to find the specific event which you want to cease by expanding the corresponding group as shown below. As the picture clearly shows that by checking the click-box will stop the execution wherever the click listener event is present.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-5.png" data-lazy- height="491" src="data:image/svg xml,” width=”953″>
Step into your code
The picture below illustrates that if you want to stop the execution of a specific line e.g. we say line 21, then we will click on it and observe a blue marker on that specific line which makes sure that the execution will automatically stop when it reaches line 21.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-6.png" data-lazy- height="523" src="data:image/svg xml,” width=”953″>
Detecting the cause of a bug
As we put a breakpoint on line 21, which means that code always pauses whenever the execution of code reaches that line. When the code is paused on a certain line, then the scope panel specifies its local and global variables.
As you see in the picture below, both values are not integers. They are enclosed in quotes as you see in the picture below as well as mod value also seems suspicious. Finally, the source of the bug is detected.
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-7.png" data-lazy- height="426" src="data:image/svg xml,” width=”906″>
Bug fixing
Now you can modify the code and test it again. Click on the resume icon as shown on the right of the window screen. Now replace line 20 with the line mentioned below and save the changes.
var mod = parseInt(value1) % parseInt(value2);
Then deactivate breakpoints and test the code with different values to check the correct outcomes.
The output of 24%9 is as follows:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-8.png" data-lazy- height="442" src="data:image/svg xml,” width=”902″>
The output of 5%3 is as follows:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/How-to-debug-JavaScript-in-Chrome-9.png" data-lazy- height="430" src="data:image/svg xml,” width=”901″>
Conclusion
JavaScript is the most popular language and its need is increasing day by day. Almost everywhere JavaScript is being used. In this article, we explained debugging of JavaScript code in Chrome. Subsequently, we discussed each step in-depth. Example pictures are also provided for each step to help you understand.
About the author
<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2021/10/echo/7011409B3A384F43A8417D1DAC68D179-150×150.jpg6164f87375e3f.jpg" height="112" src="data:image/svg xml,” width=”112″>
Shehroz Azam
A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.
