How to debug JavaScript code

How to debug JavaScript code in Detail

In this article, I am going to discuss how to debug JavaScript code in detail. 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 is called error/bug. 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 JavaScript console screen (press F12 Key) under 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 browser. On each breakpoint, the browser will stop executing JavaScript, and by this, we can test the JavaScript code. After testing JS code we can continue the execution of 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 F12 key and selecting console from 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. I hope you enjoy this article.

Leave a Reply

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