JS Debugging

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

JavaScript Debugging

Code Debugging

Programming code consists of syntax errors or logical errors

These errors are difficult to resolve.

Often, when programming code consists of errors, nothing happens. There are no error messages, and you will get no indications where to search for errors.

Finding for (and fixing) errors in programming code is called code debugging.

JavaScript Debuggers

Debugging is not easy. All modern browsers consist of built-in JavaScript debugger.

Built-in debuggers can be turned on and off, reporting errors to the user.

With a debugger, you can adjust breakpoints and observe the variables while the code is executing.

The console.log() Method

In case your browser supports debugging, use the console.log() to show JavaScript values in the debugger window:

Example       

<!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>

Output

My First Web Page

Activate debugging in your browser (Chrome, IE, Firefox) with F12, and select "Console" in the debugger menu.

Setting Breakpoints

In the debugger window, you can adjust the breakpoints in the JavaScript code.

At each breakpoint, JavaScript stops the executing, and enables you to examine JavaScript values.

After observing the values, you can resume the execution of code.

The debugger Keyword

The debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function.

It works similarly as setting a breakpoint in the debugger.

If no debugging is available, the debugger statement consists of no effect.

When the debugger turned on, this code stops the execution before it executes the third line.

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Debugger</h2>

<p id=”demo”></p>

<p>With the debugger turned on, the code below should stop executing before it executes the third line.</p>

<script>

let x = 15 * 5;

debugger;

document.getElementById(“demo”).innerHTML = x;

</script>

</body>

</html>

Output

JavaScript Debugger

With the debugger turned on, the code below should stop executing before it executes the third line.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420