Console.log Like a Boss: Mastering JavaScript Debugging | The Ultimate Guide to JavaScript Console: Error Logging, Warnings, and More

When developing websites or applications using JavaScript, we primarily work within the browser environment. JavaScript allows us to modify the DOM (Document Object Model) and display various elements and values dynamically. However, during development, there are often times when we need to quickly check the value of a variable or track any errors or warnings in our code. This is where the JavaScript console proves invaluable.

The console is part of the Developer Tools in modern web browsers. To access it, you can press F12 on a Windows PC or CMD + OPT + I on a Mac. This will open the developer tools where you'll see several tabs—one of which is the console. If you prefer to open the console directly, you can use shortcuts like CTRL + ALT + J or CTRL + SHIFT + I(Windows) or CMD + OPT + J (Mac).

Once open, the console allows you to run JavaScript commands interactively. For example, try typing the following code into the console and pressing Enter:

 alert('Hello from the console'); 

Output:
A browser alert pops up with the message: "Hello from the console"

While you can execute JavaScript directly in the console, its primary use is for logging information, troubleshooting, and displaying errors during development.

Common Console Methods

In the browser, JavaScript gives us access to a built-in console object with several useful methods. These methods help developers interact with the console to log messages, display errors, and even format data. Let’s explore the most commonly used console methods.

console.log()

The console.log() method is by far the most frequently used. It allows you to output various types of information—such as strings, numbers, booleans, objects, arrays, and more—to the console.

Example: Logging a Number

 console.log(123); 

Output:
123

Example: Logging a String

 console.log('Hello World'); 

Output:
Hello World

Example: Logging Multiple Values

 console.log(123, 'Hello', true); 

Output:
123 Hello true

Example: Logging a Variable

 let x = 100; console.log(x); 

Output:
100

console.error()

To make an error message stand out in the console, you can use console.error(). This method highlights the output in red.

 console.error('An error occurred!'); 

Output:
An error occurred!

console.warn()

Similarly, to issue a warning, console.warn() can be used, which will display the text in yellow.

 console.warn('This is a warning!'); 

Output:
This is a warning!

console.clear()

If your console is cluttered, you can use the console.clear() method to clear all previous logs.

 console.clear(); 

Output:
The console is cleared, removing all previous logs.

console.table()

The console.table() method is useful when you want to log an object or an array in a more structured, table-like format.

 console.table({ name: 'John', city: 'New York' }); 

Output:
A formatted table will appear:

(index)	Values
name	"John"
city	"New York"

console.group()

The console.group() and console.groupEnd() methods allow you to group together related console messages, making it easier to organize and read logs.

    console.group('Log Group');
    console.warn('This is a warning');
    console.error('This is an error');
    console.log('Just a log');
    console.groupEnd();
    

Output:
The logs are grouped together and indented:

Log Group
  This is a warning!
  This is an error!
  Just a log

Logging with Custom Styles

For more advanced console output, you can even style your logs using CSS within console.log().

 
    const style = 'padding: 10px; background: lightgrey; color: blue;';
    console.log('%cStyled log message', style); 
    

Output:
Styled log message

These are the most common console methods you'll use when developing with JavaScript. Each method serves a unique purpose, helping you debug, log, and format information more efficiently. To explore more advanced console features, you can refer to the official documentation on MDN.

Previous Post: Code Structure Of JavaScript | Fundamentals of JavaScript Programming Language | Part - 2

Ashraf JavaScript Tutorial