How to debug JavaScript in Chrome
Developers track down and fix coding errors through the technique called debugging. It reduces the development time and increases the quality of the product. Instead of manually checking the code by doing the dry run, Chrome offers a user-friendly interface that helps developers debug, profile, inspect, and test. This interface is called developer tools.
In this Answer, we'll focus on how to debug JavaScript using the developer tools.
Example
To get hands-on experience, we must run the following widget, open the app URL in the new tab, and start debugging by following the below steps.
<html>
<head>
</head>
<body>
Enter values: <br>
<input type="text" id="input1">
<input type="text" id="input2">
<input type="button" name="button" value="Result" onClick="testResults()">
<p id="result"></p>
<script>
function testResults () {
var first_val = document.getElementById("input1").value;
var second_val = document.getElementById("input2").value;
var result = parseInt(first_val) / parseInt(second_val);
document.getElementById("result").innerHTML = "Final Sum = " + result;
}
</script>
</body>
</html>The code above should calculate the sum of two variables. But, there is some issue and not returning the correct output. Let's debug the JavaScript code.
Steps
We'll open the web page that we want to debug in the browser. For example, we can open the above app in a new tab for debugging.
We'll open the developer tools. The developer tools can be accessed in different ways, including by pressing "Right-click > Inspect", "Command+Option+I" for Mac, and "Ctrl+Shift+I" for Windows or Linux.
Navigate to the "Sources" tab and open the JavaScript or any HTML file where JavaScript exists. For example, we can locate the "index.html" under the "Sources" tab in the application above.
We can now add
breakpoints A breakpoint is when a program is purposely paused or interrupted for debugging.
We'll run JavaScript code by activating an event that triggers JavaScript execution or refreshes the page. For example, we press the "Result" button, and the debugger pauses the code at the breakpoint as given below:
Now, we can see that the input values are correct in the "Scope" tab, but the
resultis incorrect. For example, the result should be8instead of0.6. That means there is an issue at the time of calculation, such as we're using the division operator instead of the addition operator.
In this developer panel, we can iterate over the code using the following buttons.
These buttons allow us to jump to the next line of code for debugging, to the next function call, or to step out of the current function. This can help developers efficiently debug their JavaScript code and quickly identify and fix errors. Additionally, the "Console" tab in the developer tools panel provides a useful way to inspect variables and log messages during debugging.
