Back to: JavaScript Tutorial For Beginners and Professionals
How to debug JavaScript code
In this article, I am going to discuss how to debug JavaScript code in detail with Examples. Please read our previous article before proceeding to this article, where we discussed how to write JavaScript Program.
How to debug JavaScript code:
Mistakes made by developers while writing code are called errors/bugs. Debugging is the process of fixing the bug by testing, finding, and removing bugs/errors from the program.
There is no specific way of debugging client-side JavaScript, except the only way to debug JavaScript is through the browser. Fortunately, all browsers have their own built-in debugging tool that makes it easier to debug
- Firefox has Firebug to debug
- Chrome and Internet Explorer have Web developer tools, debugging can be seen in the browser by pressing the F12 key and selecting console from the debugger menu.
Modern browsers have a JavaScript console screen (press F12 Key) under the developer tool where errors in JavaScript’s are reported
JavaScript Console Object
The Console object exists only if there is a debugging tool supported by the browser.
console.log() is used to display JavaScript values in a console window under the debugging tool of the browser. It is used to write a log message at runtime. For example
<html>
<body>
<h1>Debugging</h1>
<script>
a = 15;
b = 16;
c = a + b;
console.log(c);
</script>
</body>
</html>
Methods of console objects are:
-
- debug(message)
- info(message)
- log(message)
- warn(message)
- error(message)
Other ways to do debugging are either by setting a breakpoint or by using the debugger keyword.
Setting breakpoints
In our JavaScript code, we can set breakpoints under the sources window of developer tools of the browser. On each breakpoint, the browser will stop executing JavaScript, and by this, we can test the JavaScript code. After testing the JS code we can continue the execution of the code.
Using debugger Keyword
Another way of debugging the JS code is by using the debugger keyword. It stops the execution of JavaScript the same as setting a breakpoint in the code. When the code execution reaches the line where the debugger is mentioned, it will stop executing from that point before it executes the next line.
<html>
<body>
<h1>Debugging</h1>
<script>
a = 15;
b = 16;
debugger;
c = a + b;
</script>
</body>
</html>
How to open browsers Developer tool for debugging?
Basically, we can enable debugging in a browser by pressing the F12 key and selecting the console from the debugger menu. Another alternative way to enable the same is different for a different browser which is:
Chrome:
- Open the Chrome browser.
- From the Chrome menu select “More tools”.
- From More tools select “Developer tools”.
- In the end, select the Console window.
Microsoft Edge:
- Open the Microsoft Edge browser.
- From the Edge menu select “More tools”.
- From the More tools select “Developer tools”.
- In the end, select the Console window.
In the next article, I am going to discuss Where to place JavaScript code in the HTML file. Here, in this, I try to explain how to debug JavaScript code with Examples. I hope you enjoy this how to debug JavaScript code article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
My suggestion is that you can explain more about debugging and add some more examples to explain.
and how we can understand debugging in Js if we really do not know more about Js