How to Debug a Console Code in JavaScript?

In this tutorial we will see how to debug a console code in JavaScript. The easiest method to debug JavaScript code is to use the console.log() method. We will see different console methods which are there to help us understand the concept. In order to show a simple string we can do this.

console.log('Hello World');   // Output: Hello World

Now if we want to show an object then we can do this. 

let john = { id: 1, name: 'John', course: 'JavaScript' };
let doe  = { id: 2, name: 'Doe', course: 'ES6' };
console.log(john);  // Output: {id: 1, name: "John", course: "JavaScript"}
console.log(doe);   // Ouptut: {id: 2, name: "Doe", course: "ES6"}

console.log({mike,tom});

The method console.table will show objects in tabular form. 

console.table({mike,tom});

The method console.warning() will display a warning in the console.

console.warn('Here is a Warning Message');

The method console.error() will output error messages in the console.

console.error('Here is the Error Message');

The method console.clear() will clear every message from the console.

console.clear();

The method console.group() will group information in the console. 

console.group('JS Developers');

console.group('John');
console.log('Id: 1');
console.log('Name: John');
console.log('Course: JavaScript');
console.groupEnd();

console.group('Doe');
console.log('Id: 2');
console.log('Name: Doe');
console.log('Course: ES6');
console.groupEnd();

console.groupEnd();

We can apply CSS to the console output by prepending %c to the string and adding CSS style as a second parameter in string form.

console.log('%cWelcome to laramatic!', 'color:black; background-color:red');