Getting to know the Console API for better debugging

13 / Apr / 2016 by Devendra Madheshiya 0 comments

Developer tools are powerful tools to debugging javascript file in development of front-end web applications. The console has an API that provides a number of methods that make debugging easier. There has a multiple method for debugging JavaScript files in web applications. Debug your web applications using the methods provided by the console API but some browsers do not support this functionality. It’s had a browser compatibility issue.

In this blog post you’re going to learn how to debug JavaScript files in your web applications using these methods provided by the console API.

Console.log():

In debugging, console.log() are most frequently used by web developers. Using this method to print a log messages in the console window. If you have an object and want to populate loges to use console.log() and passed variable as an attribute.

var country = [
	{ countryCode: "93", countryName: "Afghanistan", capital: "Kabul"},
	{ countryCode: "355", countryName: "Albania", capital: "Tirana"},
	{ countryCode: "213", countryName: "Algeria", capital: "Algiers"},
	{ countryCode: "684", countryName: "American Samoa", capital: "Pago Pago"}
];

console.log(country);

console-log

Console.table() :

In debugging we face more difficulties to find undefined values because few of the keys in object may be undefined values and that takes more time to debuggers. Using this method to show all data in tabular format and all the key and value shows in tabular format. Still, the property values are neatly arranged and give you a good overview.

var country = [
{ countryCode: "93", countryName: "Afghanistan", capital: "Kabul"},
{ countryCode: "355", countryName: "Albania", capital: "Tirana"},
{ countryCode: "213", countryName: "Algeria", capital: "Algiers"},
{ countryCode: "684", countryName: "American Samoa", capital: "Pago Pago"}
];

console.table(country);

console-table

Console.trace() :

Javascript is not a very structured language, it can sometimes be hard to get an overview of what happened and when because the views are created, multiple events are triggering functions and in the end you want to know what/why caused this function call. In Javascript console have a trace method to solve this type of issues. It’s arranged all the calls and shows in a console window.

var mobile;
var func1 = function(){
func2();
}

var func2 = function(){
mobile = new Mobile();
mobile.funcX();
}

var Mobile = function(){
this.brand = 'motorola';
this.color = 'black';

this.funcX = function(){
this.funcY();
}

this.funcY = function(){
console.trace('trace car');
}
}

func1();

console-trace

console.count(label) :

The console.count() method will output the number of times that the count() method has been called. This method can be useful for finding out how many times a function is being called in your code.

function counter() {
console.count('counter called');
}

for (var i = 0; i < 10; i++) {
counter();
}

console-count

console.time() & console.timeEnd() :

The console.time() and console.timeEnd() method gives a way to how long it takes for a piece of code to execute. Both the time() and timeEnd() methods should be passed the same label parameter.

console.time('time counter');
function counter() {
console.count('counter called');
}
for (var i = 0; i < 10; i++) {
counter();
}
console.timeEnd('time counter');

console-time

Console.group() , console.groupCollapsed() and console.groupEnd() :

The console.group() method is used to group together a series of log messages. Once this method is called, any further log messages will be added to the group until console groupEnd() is executed to close the group.

The console.groupCollapsed() method is same as console.group() except that the group is initially displayed collapsed rather than open in the console.

console.group("Log Details");
console.log("Log 1")
console.log("Log 2")
console.log("Log 3")
console.log("Log 4")
console.log("Log 5")
console.groupEnd();

console-group

console.dir() :

This method prints a JS representation of the define object. It is especially useful for examining HTML elements, as it will display the DOM representation of the element.

console.dir(document.body);

console-dir

console.dirxml(object) :

This method displays an interactive tree of the descendant elements of the specified XML/HTML element. The output is presented as a hierarchical listing of expandable nodes that let you see the contents of child nodes.

console.dirxml(document.body);

console-dirxml

console.log(‘%c’) :

To make interactive console output in console window, have a styling %c format specifier to allow to style in console output.

console.log('%c CSS in Console log', 'color: #ffffff; background-color: #999999; font-size: 20px; padding: 5px;');

console-style

console.assert() :

The assert method accepts two parameters a boolean expression, which references whether your test passed or failed and a short description of your test. When expression is false, then it’s shows defined message.

var count = 5;
console.assert(count > 10, 'count is not larger than 10');

console.info() :

This method in the same as console.log() but it’s a show with info flag. This can be used to filter log messages using flags.

console.info('Hello Treehouse');

console.warn() :

This method shows log message in the console windows with warning flag.

console.warn('This is warning message);

console.clear() :

The console.clear() method clears the console window.

console.clear();

monitor() :

Monitors the function call and its arguments. Every time the function is called, it will be logged with the values that was passed in function.

var calculator = function(x,y,z){
};
monitor(calculator);

calculator (1,2);

monitor

For more:

github reference : https://github.com/devendra-gh/Getting-to-know-the-Console-API-for-better-debugging-

Hope this will help!!

FOUND THIS USEFUL? SHARE IT

Leave a comment -