How to Use a Debugger in JavaScript

What is debugging? We, as a programmer, write some codes that may contain some error which we call a bug—identifying where and what the actual error is occurring is called debugging the code. We know debugging a code is not that easy; that’s why in the modern era, JavaScript has its built-in debugger, which is supported by almost every modern browser.

With this JavaScript debugger, we can set breakpoints too and get to know the root cause of the error while the code is executing.

“debugger” Keyword in JavaScript

JavaScript debugger keyword is something that we can put in any script we write. The debugger in JavaScript stops the execution of the code and calls the debugging function. Let’s understand it by an example given below:

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Debugger</title>
</head>
<body>
 <p>Debugger in JavaScript.</p>
 
 <script>
   let x = 21;
   const onClick = (ev)=>{
   x = 24;
   debugger;
   console.log('JavaScript debugger is enabled');
   x = 27;
   };
   document.addEventListener('DOMContentLoaded', ()=>{
   document.body.addEventListener('click', onClick);
 });
 </script>
</body>
</html>

In this example, we created an HTML document; we have a paragraph in the body. We have a variable “x” initialized with a value of 21, and we change its value a couple of times inside the function onClick().

When the page loads, we add the click listener onto the body; it will run the function onClick().

In the Chrome browser, to get the result, we need to launch dev tools by clicking on the top right corner and then navigating to developer tools. Now when you click on the body of the HTML page, it will jump over to the sources tab, and the debugger line (written in code) will get highlighted.

Now it tells us that it is paused in the debugger. It will wait for you to decide what you want to do, and you can skip to the next line or resume.

How do we add the breakpoints?

To add breakpoints in JavaScript, jump over the debugger area in chrome browser its sources tab. And we can click right here on the numbered lines, and we can add breakpoints. So clicking there, we get a blue arrow that says the breakpoint is added. This is now a line where the code will want to stop.

So by using breakpoints, we can pause at different points in the script to see where errors are happening, or even better, we can take a look to see what’s happening with variables, and that’s what this watch” section is inside the debugger. This watch section is helpful when you have a very complex script to keep track of many variables.

Major Browser’s Debugging Tools

In General, debugging can be activated by clicking the F12 key on your browser and selecting “Console” in the debugger menu. Kindly follow these steps to activate debugging window on your browser:

In Chrome Browser

  1. Open the Chrome browser.
  2. Select “More tools” from the menu.
  3. Choose “Developer tools” from the tool options.
  4. Then, select Console.

In Firefox Browser

  1. Open the Firefox browser.
  2. Select “Web Developer” from the menu.
  3. Then, select “Web Console”.

In Edge Browser

  1. Open the Edge browser.
  2. Select “Developer Tools” from the menu.
  3. Then, select “Console”.

In Opera Browser

  1. Open the Opera browser.
  2. Select “Developer” from the menu.
  3. Select “Developer tools”.
  4. Then, select “Console”.

In Safari Browser

  1. Open the Safari Browser, Go to Preferences, and Advanced in the main menu.
  2. Check on the “Enable Show Develop menu in the menu bar”.
  3. Then Choose “Show Error Console”.

That’s it for this tutorial.

Leave a Comment