JavaScript Debugging

❮ Previous Next ❯

Mistakes are likely to occur whenever you create fresh computer code.

Code Debugging

Code can have mistakes in the way it's written or in the logic it uses.

Several of these mistakes are challenging to identify.

Sometimes, if there are mistakes in the code, nothing happens. You won't see any error messages, and there won't be any clues about where to find the mistakes.

Looking for and fixing mistakes in programming code is known as code debugging.

JavaScript Debuggers

Fixing errors is challenging. Luckily, all current web browsers come with a built-in JavaScript debugger.

You can activate or deactivate built-in debuggers, making errors show up or not for the user.

Using a debugger allows you to mark breakpoints (points where the code can be paused) and inspect variables as the code runs.

Typically (or else, follow the steps at the bottom of this page), you turn on debugging in your browser by pressing the F12 key and choosing "Console" from the debugger menu.

The console.log() Method

If your web browser allows debugging, you can utilize the console.log() command to show JavaScript values in the debugger window

Hint: Learn more about the console.log() function in our JavaScript Console Reference.

Setting Breakpoints

In the debugger window, you can place markers in the JavaScript code.

At every breakpoint, JavaScript pauses its execution, allowing you to inspect the values of JavaScript variables.

After checking the values, you can restart the code's execution, usually by clicking a play button.

The debugger Keyword

The debugger word pauses JavaScript and activates any debugging function if present.

This works like when you set a breakpoint in the debugger.

If there is no debugging option, using the debugger statement won't make any difference.

When the debugger is activated, this code will pause its execution before reaching the third line.

Major Browsers' Debugging Tools

Usually, you turn on debugging in your browser by pressing F12 and then choosing "Console" from the debugger menu.

If not, do the following steps:

Chrome

Open the browser.
From the menu, choose "More tools."
In tools, select "Developer tools."
Finally, select Console.

Firefox

Open the browser.
From the menu, choose "Web Developer."
Lastly, choose "Web Console."

Edge

Open the browser.
Choose "Developer Tools" from the menu.
Finally, select "Console".

Opera

Open the browser.
Choose "Developer" from the menu.
Go to "Developer" and then choose "Developer tools".
Finally, select "Console".

Safari

Visit Safari, go to Preferences, and then click on Advanced in the main menu.
Enable the option that says "Show Develop menu in menu bar."
When you see the new choice labeled 'Develop' in the menu:
Select 'Show Error Console'.

Did You Know?

Debugging means checking, identifying, and fixing errors (bugs) in computer programs.
The initial computer bug was an actual insect trapped in the electronics.

<!DOCTYPE html>
<html>
  <body>
    <h2>My First Web Page</h2>
    <p>Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.</p>
    <script>
      a = 5;
      b = 6;
      c = a + b;
      console.log(c);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Debugger</h2>
    <p id="demo"></p>
    <p>With the debugger activated, the code should pause before reaching the third line.</p>
    <script>
      let x = 15 * 5;
      debugger;
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics