In JavaScript, the console is an object which provides access to the browser debugging console. We can open a console in web browser by using: Ctrl + Shift + I for windows and Command + Option + K for Mac. The console object provides us with several different methods, like :
console.log()
console.table()
console.trace()
console.error()
console.warn()
console.assert()
console.count() and console.countReset()
console.time(), console.timeEnd() and console.timeLog()
console.clear()
console.group() and console.groupEnd()
1. console.log()
This console is mainly used to log(print) the output. We can put any type inside the log(), it can be string, array, object or boolean.
console.log('abc');
console.log(1);
console.log(true);
console.log(null);
console.log(undefined);
console.log([1, 2, 3, 4]); // array inside log
console.log({a:1, b:2, c:3}); // object inside log2. console.table()
This method allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.
// Matrix
console.table([
["apple", "banana", "cherry"],
["Rs 80/kg", "Rs 100/kg", "Rs 120/kg"],
["5 ⭐", "4 ⭐", "4.5 ⭐"],
]);// Maps
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}const family = {};
family.mother = new Person("Jane", "Smith");
family.father = new Person("John", "Smith");
family.daughter = new Person("Emily", "Smith");
console.table(family);3. console.trace()
Are you having issues debugging a function? Left wondering how the execution flows? console.trace() is your friend!
function outerFunction() {
function innerFunction() {
console.trace();
}
innerFunction();
}
outerFunction();4. console.error()
This method is used to log error message to the console. Useful in testing of code. By default the error message will be highlighted with red color.
console.error("This is an error message");5. console.warn()
This method is used to log warning message to the console. By default the warning message will be highlighted with yellow color.
console.warn("This is a warning message");6. . console.assert()
This method is used to print out the trace when assertion fails.
function func() {
const a = -1;
console.assert(a === -1, "a is not equal to -1");
console.assert(a >= 0, "a is negative");
}
func();7. console.count() and console.countReset()
Console.count() method is used to count the number that the function hit by this counting method.
function fibonacci(num) {
console.count("fibonacci");
if (num < 2) {
return num;
}
return fibonacci(num - 1) + fibonacci(num - 2);
}
fibonacci(2);
console.countReset("fibonacci");
console.log("COUNTER RESET");
fibonacci(5);8. console.time(), console.timeEnd(), and console.timeLog()
Whenever we want to know the amount of time spend by a block or a function, we can make use of the time() and timeEnd() methods provided by the JavaScript console object. They take a label which must be same, and the code inside can be anything( function, object, simple console).
console.time("timeout-timer");
setTimeout(() => {
console.timeEnd("timeout-timer");
}, 1000);
setTimeout(() => {
console.timeLog("timeout-timer");
}, 500);NOTE: The setTimeouts are not executed immediately, resulting in a small deviation from the expected time.
9. console.clear()
This method is used to clear the console. The console will be cleared, in case of Chrome a simple overlayed text will be printed like : ‘Console was cleared’ while in Firefox no message is returned.
console.log("Some random text");
console.clear();10. console.group() and console.groupEnd()
group() and groupEnd() methods of the console object allows us to group contents in a separate block, which will be indented. Just like the time() and the timeEnd() they also accepts label, again of same value.
console.group('simple');
console.warn('warning!');
console.error('error here');
console.log('vivi vini vici');
console.groupEnd('simple');
console.log('new section');The Tech Platform