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.

If you like the post, don’t forget to clap. If you’d like to connect, you can find me on LinkedIn.

--

--

--

“Walking on water and developing software from a specification are easy if both are frozen”

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Create a picture-in-picture View in React

a person holding a photo of grand canal photo

Crab Update — TypeScript and Routes

My Vue/Nuxt Architecture Part 1

Integrating with Azure AD SAML 2.0 SSO using Devise Token Auth and Ember Simple Auth (Part 3)

Project setup for a full-stack JavaScript web application

Real-World Angular Ivy Upgrade (v9-next)

Javascript Array must know methods

How to Create a Web App with MySQL, Express and React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Neeraj Kushwaha

Neeraj Kushwaha

“Walking on water and developing software from a specification are easy if both are frozen”

More from Medium

Get Going With Git — Part 2

What is JWT

10 Github Extensions for VS Code that will ease your work 😀

GIthub image

Mocking a REST API