The preview image of the console object article

Deep dive into the console object.

Joy Sen
4 min readAug 14, 2022

--

console.log() is like a magic wand for all Javascript or javascript framework(node, express, angular) programmers. For the past three years console.log() has been a must-have tool for me whenever I want to see the output of a particular part of a Javascript program or debug a program.

In this article, I have shared what I have learned about the console object and the console.log() method.

In the beginning, let’s know what console and console.log()?
A console is an object through which we can access the browser’s debugging console(web console in firefox, devtool console in chrome).
Similarly, console.log() is a method of console object, which is typically used to output logging information.

To log a variable using console.log() is easy.

logging a variable into the browser console.

In the console.log() method we can use string substitutions, Let’s make our above example more attractive by using the “%c” directive.

Add style to the logging information using the %c directive.

For node users, there is an npm package called “chalk” to highlight different required parts of console.log() separately. If you want, you can check this npm package, I have provided the link below
https://www.npmjs.com/package/chalk
Again, there are some directives (such as integer(%i), double(%d) and float(%f).) that use the type formatting of logging information.

Type formatting in the console.

[Note: The string substitutions described above will work only in Mozilla Firefox (I tried in two browsers that use the v8 engine (brave and chrome) but did not get the expected result). Note here that Mozilla Firefox uses a JIT engine called SpiderMonkey, on the other hand, Brave or Chrome browsers are using the V8 engines. I have an article about Javascript engines, you can read this article if you want. Here is the article link https://santunu23.medium.com/in-javascript-what-is-just-in-time-compilation-jit-8248e6452b15]

In console logging, an object is pretty easy
const myidentity={name:”Joy Sen”,age:29}
console.log(myidentity)
We can make this logging statement more attractivly by using a string substitutions %s.

We can log more than one object to the console if we want.

console more than one object

We can use “%O” directive to get more information about an object.

using “%O” directive to get more information of an object

So far I have shared some useful uses of the console.log() method, let’s jump into other useful methods of console object.
1) To log an error into the console we can use console.error()

2) For log an warn information we can use console.warn()

3)console.info() method display an information message to the console.

For displaying information,console.info() method has used.

4) To log out a series of information we can use the group method.

Use console.group() method for logging a series of information

To exit from an inline group we can use console.groupEnd()

5) To logging information in more organise manner we can use console.table() method, this method has two part data and column(which is optional).The method basically log data field as a table, data can be an array or an object.

6)console.trace() method helps us to display a stack trace in the console.

For display a stack trace we can use console.trace()

That’s all, I tried to share the major concept of console object.If you find this helpful please share this article with your friends and hit clap.

--

--

Joy Sen

A tech savvy, like to learning and sharing computer programming related knowledge.