In this tutorial, you will learn about debugging in JavaScript with the assistance of examples.
In this article, you will learn-
Code Debugging
Programming code may contain syntax errors, or logical errors.
A significant number of these blunders are hard to analyze.
Frequently, when programming code contains mistakes, nothing will occur. There are no mistake messages, and you will get no signs where to look for blunders.
Looking for (and fixing) mistakes in programming code is called code debugging
JavaScript Debuggers
Debugging isn’t simple. Be that as it may, luckily, all modern browsers have a built-in JavaScript debugger.
The built-in debugger can be turned on and off, compelling mistakes to be reported to the user.
With a debugger, you can likewise set breakpoints (places where code execution can be halted), and look at variables while the code is executing
You can and will encounter blunders while composing programs. Mistakes are not really downright terrible. Truth be told, most of the time, they assist us with recognizing issues with our code. It is fundamental that you realize how to debug your code and fix mistakes.
Debugging is the way toward inspecting the program, finding the mistake and fixing it.
There are various ways you can debug your JavaScript program.
The console.log() Method
In the event that your browser supports debugging, you can use console.log() to show JavaScript values in the debugger window:
Example
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>
1. Using console.log()
You can use the console.log() technique to debug the code. You can pass the worth you need to look into the console.log() technique and check if the information is right.
The syntax is:
console.log(object/message);
You could pass the object in console.log() or essentially a message string.
In the previous tutorial, we used the console.log() technique to print the output. Nonetheless, you can likewise use this technique for debugging. For instance,
let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) { // do something }
Using console.log() method in the browser opens the value in the debugger window.
The console.log() isn’t explicit to browsers. It’s additionally accessible in other JavaScript engines.
The debugger Keyword
The debugger catchphrase stops the execution of JavaScript, and calls (if accessible) the debugging function.
This has a similar function as setting a breakpoint in the debugger.
In the event that no debugging is accessible, the debugger statement has no impact.
With the debugger turned on, this code will quit executing before it executes the third line.
Example
var x = 15 * 5; debugger; document.getElementById("demo").innerHTML = x;
Major Browsers’ Debugging Tools
Normally, you activate debugging in your program with F12, and select “Console” in the debugger menu.
Otherwise, follow these steps:
Chrome
- Open the browser.
- From the menu, select “More tools”.
- From tools, choose “Developer tools”.
- Finally, select Console.
Firefox
- Open the browser.
- From the menu, select “Web Developer”.
- Finally, select “Web Console”.
Edge
- Open the browser.
- From the menu, select “Developer Tools”.
- Finally, select “Console”.
Opera
- Open the browser.
- From the menu, select “Developer”.
- From “Developer”, select “Developer tools”.
- Finally, select “Console”.
Safari
- 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”.
2. Using debugger
The debugger catchphrase stops the execution of the code and calls the debugging function.
The debugger is accessible in almost all JavaScript engines.
Let’s see an example,
let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);
Let’s see how you can use debugger in a Chrome browser.
The above program stops the execution of the program in the line containing the debugger.
You would then be able to resume the flow control subsequent to analyzing the program.
The remainder of the code will execute when you resume the script by pressing play in the console.
3. Setting Breakpoints
You can set breakpoints for JavaScript code in the debugger window.
JavaScript will quit executing at each breakpoint and allows you to look at the values. At that point, you can resume the execution of code.
You can set breakpoints through the Developers tool anyplace in the code.
Setting breakpoints is like putting a debugger in the code. Here, you just set breakpoints by tapping on the line number of the source code rather than manually calling the debugger function.
In the above methods, we have used the Chrome browser to show the debugging process for effortlessness. Notwithstanding, it’s not your only option.
All good IDEs give an approach to you to troubleshoot the code. The debugging process might be somewhat extraordinary yet the concept behind debugging is the equivalent.
Did You Know?
Debugging is the way toward testing, finding, and reducing bugs (errors) in computer programs.
The initially realized computer bug was a real bug (an insect) stuck in the electronics.
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.