Javascript provides the console object which is a useful utility that can be used to simulate browser console perhaps the most used function used in common is console.log() but there are other useful methods in console that can be used.

 

 

Console.log()

This is the most commonly used function in the Console object and it’s used to log any textual message to the browser console.

console.log("hello world");
// or
window.console.log("hello world");

 

Console.table(data)

The console.table() logs arrays or objects to the console but it differs from console.log() is that it displays it as a table in much the same way as html table. The first column has a header of “index” and this is the item indices for arrays or property names for objects.

let data = new Array("PHP", "Java", "Asp.net");

console.table(data);

For array of arrays:

let country = [["Country", "USA"], ["Capital", "Washington"]];

console.table(country); <img class="aligncenter wp-image-2015 size-full" src="http://webmobtuts.com/wp-content/uploads/2019/03/javascript-console-table-2.png" alt="javascript console table" width="1017" height="75" />

In case of objects:

let person = {firstname: "Alex", secondname: "Niclos", age: "28"};

console.table(person);

Using array of objects:

let person = [{firstname: "Alex", secondname: "Niclos", age: "28"},
		{firstname: "Bob", secondname: "John", age: "36"}];

console.table(person);

 

Console.debug(obj1, obj2,…)

The console.debug() acts like the same as console.log() but console.debug() only appears in browser if debug level is enabled which you may be turned off by default.

console.debug(window.location, window.document);

As you see the logs are displayed in consecutive order corresponding to the function argument order. 

Using substitution strings

// using %o or %O to substitute objects

console.debug(`This is location object: %o, 
This is document object: %o`, window.location, window.document);

// using %d or %i to substitute integer numbers
console.debug("Amount: %d", 100);

// using %s to substitute strings
let week_days = {first: "Saturday", second: "Sunday", third: "Monday", fourth: "Tuesday", fifth: "Wedensday", sixth: "Thursday", seventh: "Friday"};

for(var i in week_days) {
     console.debug("The %s day of the week is: %s", i, week_days[i]);
}

// using %f to substitute floating point value
console.debug("Amount: %.2f", 90.6)

 

Console.error()

Logs an error message to the console when the error display level is enabled. In this level the error is styled with a red color by default indication that this is an error.

try {
	var result = 10 / 0;

	if(result == "Infinity") {
	     throw "Trying to divide by 0";
	}
} catch(err) {
    console.error(err);
}

Console.warn()

Logs an error message to the console when the warning display level is enabled. In this level the error is styled with an yellow color by default indication that this is an error.

try {
	var result = 10 / 0;

	if(result == "Infinity") {
	     throw "Trying to divide by 0";
	}
} catch(err) {
    console.warn(err);
}

 

Console.info()

This function actually used to display informative messages usually a small “i” icon is shown next to the message in web browsers. This level is shown when the info display level is enabled.

console.info("Jquery 2.1 is running");

 

Console.time()

Starts a timer in the console to track how long an operation could take, you may have up to 10000 timers running on a single page. The time() function takes a label to mark that timer, then to stop the timer use timeEnd() passing in the timer label as the argument and use timeLog() to the log the timer messages.

console.time("Timer1");

for(var i = 0; i<= 10; i++) {
	console.log(i);
}

console.timeLog("Timer1");

console.timeEnd("Timer1");

The time is logged when calling timeLog() and timeEnd().

// Multiple timers

console.time("Timer2");

for(var i = 0; i<= 20; i++) {
	console.log(i);
}

console.timeLog("Timer2");

console.timeEnd("Timer2");


console.time("Timer3");

for(var i = 0; i<= 40; i++) {
	console.log(i);
}

console.timeLog("Timer3");

console.timeEnd("Timer3");

 

Console.trace()

This function displays a stack trace starting from the point the code begins executing:

var mainObj = {
	sendRequest: function() {
	    console.trace()

            return 'hello world';
},
	renderTemplate: function(data) {
	    return '<p>'+data+'</p>';
	},
	display: function() {
	    return this.renderTemplate(this.sendRequest());
	}
}

mainObj.display();

// output
console.trace() 

sendRequest
display
<anonymous>

 

 

Console.group() and console.groupEnd()

Those functions used to group log messages into hierarchical display when printed into the console. Whenever you started console.group() the log messages indents by some space, the inner groups also takes indentation relative to the outer most group, to close the group use groupEnd().

 

console.log("Level 1 start");   // the outermost group start
console.group("First group");   // start group 1
console.log("Level 2");         // block inside group 1
console.group("Second group");  // start nested group 2 inside group 1 
console.log("Level 3");         // block inside group 2
console.warn("Other messages"); // other messages inside group 2   
console.groupEnd();             // close group 2
console.log("Back to level 2"); // return to group 1 logs
console.groupEnd();             // close group 1
console.log("Back to the outer level");  // the outermost group end

Console.clear()

This function just clears the console from log messages:

console.clear();