Little Dev Tools in Your Pockets

Every web developer has, at a point in their development journey used one of the various dev tools available in the browser. I am talking about the console object which provides access to the web debugging console.

Though some of us might be familiar with most of them, I will like to touch on a couple of them. There is no harm in having more tools in your pocket and use it when you need it.

console.log

The most used and known of the console methods is the console.log to output a message in the web console. The message may be a simple string with optional substitution values(%s, %c, etc...) or one or more javascript objects.

An example of console.log with objects.

const fruit = 'apple';
const vitamins = ['A','B1','B2','B6']
console.log(fruit);
console.log(fruit,vitamins);

The first console.log outputs the fruit, while the second one outputs the fruit and the array of vitamins. That is really cool, as we can display one or multiple objects with one call of the console.log.

The console.log also accepts substitution string when passing a string.

const car = 'BMW';
const fruits = ["orange","banana","grape"]
console.log('the %s X series is one of the best cars',car);

console.log("The list of fruits available is %o", fruits);

The first substitution string(%s) used outputs the string, while the second substitution string(%o) shows the Javascript object with its attributes displayed in the inspector.

You can also style the output of the message by using the %c directive. It applies CSS styles to the text that comes after the directive. The example below display a text of size 55px with a red colour.

console.log("%cThis is a big red text","font-size:55px; color:red")

console.dir

The next console method we will explore is the dir. The dir method displays an interactive list of the properties of a javascript object. Let's look at the example below.

const p = document.querySelector("p");
console.log(p)
console.dir(p)

The first line gets the p element from the HTML, however using console.log(p) only shows the element, while console.dir(p) displays the list of available properties under the p elements.

console.table

The table method, when called on the console object, displays the data in a table format. This method takes one mandatory parameter(array/object) which is the data to display and an optional parameter meant to specify which part of the data that is meant to be displayed.

The table displays the data in two columns(first column for index/property name and the second column for values) when the data passed to the method is a one-dimensional array or an object with primitive data.

console.table(["strawberries", "pineapples", "mangoes"]);

console.table({firstname:"Edem", lastname:"Agbenyo"})

The data passed to the table method could also be a collection of compound types; in which case the elements of the data passed are displayed in a row, one per column. Here is an example.

var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
console.table(people);

var fruits = [{name:"apple",color:"green"},{name:"pineapple",color:"yellow"}];
console.table(fruits)

The second parameter passed to the table method is used to select a subset of the columns to display. It is an array of the columns to display.

console.group

There come times where there is a need to visually organise the output by putting related data together. That is when console.group comes to the rescue. With console.group, a set of data can be grouped and contain sub-group of related data. Each group is closed using the console.groupEnd. The group method takes one optional parameter which is the label to identify a set of data.

console.log("This is the list of cars by country");
console.group("Cars"); console.group("German");
console.log("Benz");
console.log("BMW");
console.groupEnd()
console.group("US");
console.log("Tesla");
console.log("GMC");
console.groupEnd();
console.groupEnd();

In addition to the above methods of the console object we have the following:

console.count() : This method counts the number of time the line on which it is located has been called. It accepts a parameter that act as the label.
console.info() : this method log information information. accepts string substitution like console.log.
console.error() : outputs error message.
console.warn() : outputs a warning message.

There are other methods in the console object, however, these seem to be the one we tend to use or that mostly can help us output information when debugging in the browser.

The above methods tend to be very handy in our development process, as there is a constant need to debug and log to the console useful information. With the various methods available to us, we are in the position to output data in a way that will make debugging and development smoother for us. I recommend you give a try to the other methods as they have their use.