Prior to delving into the topic of 'how to debug JavaScript', it is essential to grasp the concept of "debugging".
What is Code Debugging?
During the process of programming or creating software, it is common to encounter various types of mistakes, including logical errors, syntax errors, and others. Debugging is a critical practice that helps us identify the specific location or point at which an error has occurred. By executing our code line by line during debugging, we can pinpoint the exact moment of the mistake. Once we identify where the error lies, we can implement the necessary modifications to rectify it. Moreover, debugging tools provide the functionality to make temporary adjustments to the program's code. This comprehensive procedure of identifying and correcting errors within the code is referred to as debugging.
In summary, we can assert that Code Debugging refers to the method of identifying and rectifying errors within a program.
JavaScript Debuggers
It is clear that debugging presents a significant challenge, as it demands considerable practice and expertise. Fortunately, contemporary web browsers come equipped with integrated Debuggers. These web browsers offer users the flexibility to activate or deactivate the Debugging feature as needed. Additionally, they enable the setting of breakpoints—specific locations in the code where execution can be halted—allowing us to inspect variable values during runtime.
Typically, we can access the integrated JavaScript debugging tools by pressing the F12 key, which allows us to view JavaScript values through the "console".
The console.log Method
The console.log function can be utilized to output JavaScript values, provided that the browser offers support for debugging.
Syntax of console method
<script>
x = 5;
y = 6;
z = x + y;
console.log(c);
</script>
A clearer understanding can be achieved through the use of an example:
Program
<!DOCTYPE html>
<html>
<body>
<h1>This is my first web page</h1>
<script>
x = 5;
y = 6;
z = x + y;
console.log(c);
</script>
</body>
</html>
How to set breakpoints?
When utilizing a debugger, we have the capability to establish breakpoints within the JavaScript code of a program. Upon reaching any designated breakpoint, the program's execution halts, enabling us to inspect the values within the JavaScript environment. After we have reviewed the JavaScript values and are content with our findings, we can continue the program's execution by clicking the play button.
The debugger Keyword
The execution of the program can be halted at any line by utilizing the "debugger;" statement. It is important to note that this statement will only function if the debugging capabilities are accessible. Additionally, we can inspect the values in JavaScript when the debugger function is present. After we have finished reviewing the JavaScript values, we can continue the execution and look for other errors that need to be addressed.
Syntax
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
Program
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo"></p>
<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Explanation of program
In the preceding program, a variable named x has been instantiated, wherein we have carried out the multiplication of 15 by 5. The debugger keyword has been utilized to establish a breakpoint. During the debugging phase, the program's execution will halt at this specific line, allowing us to inspect the variable's value. Should we find that no modifications are necessary, we can continue the execution process.
Let's see an example with practical
- First of all open the console in the chrome by following the given steps.
- Once the console is opened, we can perform the debugging process.
- While the debugging process, the execution of the programs will stop on the line where we have created a breaking point by using the "debugger" keyword and it also provides the essential information about the JavaScript values. In the below image, you can see the how console and debugging process looks.
Let’s explore the methods for accessing the console across various contemporary web browsers.
The subsequent five prominent modern web browsers provide support for debugging functionalities.
Chrome
- Open the browser by double clicking on its icon.
- From the menu, select "More tools" option.
- From tools, choose "Developer tools" options.
- Finally, select Console.
- Open the Firefox browser by double clicking on its icon.
- From the menu, select "Web Developer" option.
- Finally, select "Web Console".
- Open the Edge browser by double clicking on its icon.
- From the menu, select "Developer Tools" option.
- Finally, select "Console".
- Open the Opera browser by double clicking on its icon.
- From the menu, select "Developer" option.
- From "Developer", select "Developer tools" option.
- Finally, select "Console".
- Go to Safari, Preferences, Advanced in the main menu.
- Check "Enable Show Develop menu in menu bar".
- When the new option "Develop" appears in the menu:
- Choose "Show Error Console".