Easy Tutorial
Js Scope Jsref Class Extends Js Window Location Js Statements Js Variable Js Typeof Js Lib Prototype Js Cookies Javascript Json Parse Js Strict Js Json Js Conventions Js Loop For Js Function Parameters Js Htmldom Nodelist Js Objects Met Win Postmessage Js Comparisons Js Datatypes Jsref Split Js Ex Objects Js Function Js Chrome Js Async Js Obj String Js Obj Regexp Js Validation Api Js Htmldom Elements Js Form Validation Jsref Obj Array Js Function Closures Jsref Class Super Js Void Js Comments Js Object Prototype Js Ex Browser Js Class Inheritance Js Obj Date Js Summary Js If Else Js Htmldom Html Js Window History Jsref Regexp G Js Syntax Js Obj Math Js Loop While Js Window Jsref Obj Date Js Lib Jquery Js Examples Js Variables Js Switch Js Operators Js Obj Intro Js Break Js Obj Number Jsref Regexp I Js Let Const Js Htmldom Eventlistener Js Obj Array Js Timing Js Errors Jsref Replace Js Mistakes Js Htmldom Js Validation Js Tutorial Js Promise Js Function Invocation Js Reserved Js Htmldom Events Js Ex Dom Jsref Search Js Obj Boolean Js Output Js Libraries Jsref Match Js Htmldom Css Js Regexp Js Type Conversion Js Htmldom Collections Js Function Definition Js Events Js Class Intro Javascript Async Jsref Constructor Class Js Debugging Js Functions Js This Js Window Screen Js Howto Javascript Json Stringify Js Intro Jsref Class Static Js Window Navigator Obj Window Js Class Static Js Strings Index Js Popup Js Hoisting
❮ Jsref Constructor Class Js Functions ❯

JavaScript Debugging

When writing JavaScript, not having debugging tools can be quite painful.

JavaScript Debugging

Writing JavaScript programs without debugging tools is very difficult.

Your code may contain syntax errors, logical errors, and without debugging tools, these errors are hard to detect.

Usually, if there's an error in JavaScript, there won't be any alert messages, so you won't be able to locate the code errors.

| | Typically, you make errors while writing new JavaScript code. | | --- | --- |

JavaScript Debugging Tools

Finding errors in program code is called debugging.

Debugging is hard, but fortunately, many browsers come with built-in debugging tools.

Built-in debugging tools can be turned on or off, and severe error messages are sent to the user.

With debugging tools, we can set breakpoints (places where code execution stops), and inspect variables while the code is running.

To enable debugging tools in a browser, usually press F12 and select "Console" from the debugging menu.

console.log() Method

If your browser supports debugging, you can use the console.log() method to print JavaScript values in the debug window:

Example

a = 5;
b = 6;
c = a + b;
console.log(c);

Setting Breakpoints

In the debug window, you can set breakpoints in your JavaScript code.

At each breakpoint, JavaScript execution stops, allowing us to inspect JavaScript variable values.

After checking, you can resume code execution (like pressing the play button).

debugger Keyword

The debugger keyword stops the execution of JavaScript and calls the debugging function.

This keyword works the same as setting a breakpoint in the debugging tools.

If debugging is not available, the debugger statement has no effect.

With debugger on, code execution stops before the third line.

Example

var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;

Main Browser Debugging Tools

Typically, to enable debugging tools in a browser, press F12 and select "Console" from the debugging menu.

Here are the steps for each browser:

Chrome

Alternatively, right-click and select "Inspect".

Firefox

Safari

Internet Explorer

Opera

A simpler way is to right-click and select "View Element".

❮ Jsref Constructor Class Js Functions ❯