JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Debugging

A mistake in a program or a script is referred to as a bug.

Debugging is the process of testing, finding, and reducing bugs (errors) in computer programs.


JavaScript Debuggers

All modern browsers have a built-in JavaScript debugger.

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

With a debugger, you can halt your code at certain breakpoints (places where code execution can be stopped).

Once execution is halted, you can examine the state of the script and its variables in order to determine if something is amiss.

You can also watch variables for changes in their values.


The console.log() Method

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

Run code

To access your web browser's console, first press F12 key on the keyboard and then click on the "console" tab.


The debugger Keyword

The debugger keyword invokes any available debugging functionality, such as setting a breakpoint.

If no debugging functionality is available, this statement has no effect.

The following example shows code where a debugger statement has been inserted, to invoke a debugger:

Run code

When the debugger is invoked, execution is paused at the debugger statement. It is like a breakpoint in the script source.


Major Browser's Debugging Tools

Normally, you activate debugging in your browser with F12, and select "Console" in the debugger menu.

Otherwise follow these steps:

Chrome

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

Firefox

  • Open the browser
  • From the menu, select "Web Developer"
  • Finally, select "Web Console"

Edge

  • Open the browser
  • From the menu, select "Developer Tools"
  • Finally, select "Console"

Opera

  • Open the browser
  • From the menu, select "Developer"
  • From "Developer", select "Developer tools"
  • Finally, select "Console"

Safari

  • Go to Safari, Preferences, Advanced in the main menu
  • Check "Enable Show Develop menu in menu bar"
  • When the new option "Develop" appears in the menu:
    Choose "Show Error Console"