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.