How to debug JavaScript code

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)

How to debug JavaScript code

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.

Leave a Reply

Your email address will not be published. Required fields are marked *