Powerful Browser Debugging Console Object
Console objects provide access to the browser’s debugging console in modern browsers. The console object can be accessed from any global object. It’s exposed as a window.console and can also be referenced as a console. For example
window.console.log("Hello Console!");orconsole.log("Hello Console!");
Many web developers only use the limited methods of console object, but apart from logging, it provides lots more methods that are very useful when outputting on the console.
The most frequently used feature of the console is the logging of text and other JS objects. There are 5 categories of output you can generate using the console.log(), console.debug(), console.info(), console.warn(), and console.error(). The console.log(), console.debug() and console.info() are identical – the only difference is that debug messages are hidden by default, and log messages are visible in the recent versions of Chrome. Each of these outputs is styled differently in the logs and we can use the filtering controls provided by the browser to filter logs based on log level.
console.log("This is verbose level log");
console.debug("This is verbose level log");
console.info("This is info level log");
console.warn("This is warn level log");
console.error("This is error level log");
Logging objects : We can output single or multiple objects on the console.
var name = "Neeraj Kushwaha";
var profile = { profession: "Software Engineer", experience: 16 };
console.info("My name is ", name, ". My profile :", profile);
Using string substitutions
%o or %O - Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.%d or %i - Outputs an integer.%s - Outputs a string.%f - Outputs a floating-point value.
Styling console output, beautifying the log message with CSS. We can use the %c directive to apply a CSS style to beautify the console output.
console.log("This is %cMy stylish message", "font-size:24px; color: white; font-style: italic; background-color: blue;padding: 2px; border:2px solid red; border-radius:20px");
Groups to organize output by visually combining related information together. We can use a new nested block using console.group() and to exit the group, call console.groupEnd(). We can also use console.groupCollapsed() to create a new group but it will be collapsed by default.
console.log("This is outside the section");
console.group("First Section");
console.log("In the first section");
console.group("Second Section");
console.log("In the second section");
console.warn("Still in the second section");
console.groupEnd();
console.log("Back to the first section");
console.groupEnd();
console.debug("Back to outside of section");
console.log("This is outside the section");
console.group("First Section");
console.log("In the first section");
console.groupCollapsed("Second Section");
console.log("In the second section");
console.warn("Still in the second section");
console.groupEnd();
console.log("Back to the first section");
console.groupEnd();
console.debug("Back to outside of section");
Timers to measure the duration of a specific operation. Timers are helpful in measuring the time taken by any operation and help to benchmark the performance of function implementation. To start the timer, call console.time() with optional parameter as the name of timer and to end call console.timeEnd() with optional parameter the name of the timer, the elapsed duration will be shown in milliseconds. The console.timeLog() with optional parameter can be used to log current elapsed time.
console.time("timer-name");
alert("First alert message");
console.timeLog("timer-name");
alert("Last alert message");
console.timeEnd("timer-name");
console.trace() — Stack traces are really helpful while debugging which reveals the call path taken. The console object also supports outputting a stack trace with the help of console.trace() which shows the call path taken to reach the point at which console.trace() is called.
function firstFunc() {
function secondFunc() {
console.trace();
}
secondFunc();
}firstFunc();
console.table() — Display tabular data as a table with the help of console.table(). This takes one mandatory parameter as data which must be an array or an object and one optional parameter columns to select a subset of columns to display. The first column in the table will be labeled (index). If data is an array, then its values will be the array indices. If data is an object, then its values will be the property names.
// an array of strings
console.table(["Java", "Python", "HTML"]);
// an object whose properties are strings
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var myself = new Person("Neeraj", "Kushwaha");
console.table(myself);
// an array of objects, logging only firstName
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var neeraj = new Person("Neeraj", "Kushwaha");
var puneet = new Person("Puneet", "Sharma");
var payal = new Person("Payal", "Verma");
console.table([neeraj, puneet, payal], ["firstName"]);
console.dir() — To see all the properties of a specified JavaScript object in console by which the developer can easily get the properties of the object. This listing lets you use disclosure triangles to examine the contents of child objects.
console.dir(document);
console.dirxml() — Displays an interactive tree of the descendant elements of the specified XML/HTML element.
console.dirxml(document.location);
console.count() — Logs the number of times that this particular call to count() has been called. It takes an optional parameter label if supplied will output the number of times it has been called with that label. The console.countReset() method resets the counter used with console.count().
let user = "";
function greet() {
console.count(user);
return "hi " + user;
}
user = "neeraj";
greet();
user = "pankaj";
greet();
greet();
console.count();
I hope you found these console methods useful and that they will make your JavaScript coding experience more productive.