Open Playground
JS TutorialLesson #117

JavaScript Debugging Console

The browser console is the most important debugging tool for JavaScript beginners.

Console Like a Pro

The browser console is the most important debugging tool for JavaScript beginners.

If you learn how to use the console properly, you will find bugs faster and understand your code better.

How to Open the Console

In Chrome or Edge, open the console like this:

  • Right-click anywhere on the page
  • Click Inspect
  • Click the Console tab

The console is where JavaScript shows errors, warnings, and messages from your code. > Always keep the console open when testing new JavaScript code.

console.log()

The most common console method is console.log().

Use it to print values and see what your program is doing.

Examples

Example Code

javascript
Try it Yourself
console.log("Hello from JavaScript!");

console.warn()

Use console.warn() to display warnings.

Warnings tell you something might be wrong, but your code can still run.

Example

Example Code

javascript
Try it Yourself
console.warn("This is a warning!");
Use warnings when you want to highlight something suspicious in your program.

console.error()

Use console.error() to display error messages.

Errors show that something has failed.

Example

Example Code

javascript
Try it Yourself
console.error("Something went wrong!");

Logging Multiple Values

You can log more than one value at once.

Example

Example Code

javascript
Try it Yourself
let x = 10;

let y = 5;

console.log("x =", x, "y =", y);

Inspecting Objects

The console is very useful for inspecting objects.

Example

Example Code

javascript
Try it Yourself
let user = {name: "John", age: 25};

console.log(user);
In the console, you can click the object to expand it and see its properties.

console.table()

Use console.table() to display data in a table format.

Example

Example Code

javascript
Try it Yourself
let users = [

  {name: "John", age: 25},

  {name: "Anna", age: 30}

];

console.table(users);
Tables make it much easier to debug arrays of objects.

Debugging Tip: Stop Guessing

Beginners often guess what the value is.

Professionals log the value and confirm it.

If your code is not working, do not guess.

Use console.log().


Next: Breakpoints, Watch, Scope

Logging is powerful, but sometimes you need to pause code execution.

Next page: Learn how to use breakpoints, step through code, and watch variables live.


Interactive Code Examples

Examples

javascript
Try it Yourself
Interactive runnable JavaScript example from EA Academy.
Live Output Preview:

JS Example 2

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
console.warn("This is a warning!");

JS Example 3

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
console.error("Something went wrong!");

JS Example 4

javascript
Try it Yourself
Interactive runnable JavaScript example from EA Academy.
Live Output Preview:

JS Example 5

javascript
Try it Yourself
Interactive runnable JavaScript example from EA Academy.
Live Output Preview:

JS Example 6

javascript
Try it Yourself
JavaScript syntax and algorithm demonstration.
let users = [

  {name: "John", age: 25},

  {name: "Anna", age: 30}

];


console.table(users);