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. fruit = ; vitamins = [ , , , ] .log(fruit); .log(fruit,vitamins); const 'apple' const 'A' 'B1' 'B2' 'B6' console console 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. car = ; fruits = [ , , ] .log( ,car); .log( , fruits); const 'BMW' const "orange" "banana" "grape" console 'the %s X series is one of the best cars' console "The list of fruits available is %o" 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. .log( , ) console "%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. p = .querySelector( ); .log(p) .dir(p) const document "p" console console 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 data. primitive .table([ , , ]); .table({ : , : }) console "strawberries" "pineapples" "mangoes" console 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. people = [[ , ], [ , ], [ , ]] .table(people); fruits = [{ : , : },{ : , : }]; .table(fruits) var "John" "Smith" "Jane" "Doe" "Emily" "Jones" console var name "apple" color "green" name "pineapple" color "yellow" console 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. .log( ); .group( ); .group( ); .log( ); .log( ); .groupEnd() .group( ); .log( ); .log( ); .groupEnd(); .groupEnd(); console "This is the list of cars by country" console "Cars" console "German" console "Benz" console "BMW" console console "US" console "Tesla" console "GMC" console console In addition to the above methods of the console object we have the following: : 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.count() : this method log information information. accepts string substitution like console.log. console.info() : outputs error message. console.error() : outputs a warning message. console.warn() 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.

Apple

ORANGE

Tesla

Yellow

We created a Covid19 tracking dashboard

Optimize Your CSS Length with CSS Variables

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Little Dev Tools in Your Pockets

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Advanced Testing Techniques in React: Enhancing Test Resilience and Efficiency

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

7 Must Use Tools For Newbie Web Developers

A Beginner's Guide to Debugging With Google Chrome Dev Tools

A Simple Guide to Log JavaScript Events to the Console for Debugging

Advanced Testing Techniques in React: Enhancing Test Resilience and Efficiency

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

7 Must Use Tools For Newbie Web Developers

A Beginner's Guide to Debugging With Google Chrome Dev Tools

A Simple Guide to Log JavaScript Events to the Console for Debugging

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps