DEV Community

Cover image for Use Javascript console like pro

Use Javascript console like pro

suprabhasupi profile image Suprabha ・3 min read

Every JavaScript developer has used `console.log("message")` .

It provides a simple debugging console that is similar to the JavaScript console mechanism provided by web browsers.

In this article we will talk about most of the console methods which everyone should start using.

All the following methods are available in the global instance console, so it is not necessary to require the console module.

Default: console.log( ) | info( ) | debug( ) | warn( ) | error( ) πŸ”₯

These console will directly print the raw string with appropriate color based on the type of event that is provided to them.

console.log("console log")"console info")
console.debug("console debug")
console.warn("console warn")
console.error("console error")
Enter fullscreen mode Exit fullscreen mode

default console type

Styling console output πŸ‘»

You can use the %c directive to apply a CSS style to console output

console.log("%cText color is green and increased font size", "color: green; font-size: 2rem;")
Enter fullscreen mode Exit fullscreen mode

Styling console type

We can add %c multiple times.

console.log("Multiple styles: %cred %corange", "color: red", "color: orange", "Additional unformatted message");
Enter fullscreen mode Exit fullscreen mode

styling multiple console type

1. console.table( )

console.table ( ) allows us to generate a table inside a console. The input must be an array or an object which will be shown as a table.

let info = [["Suprabha"], ["Frontend Dev"], ["Javascript"]]
Enter fullscreen mode Exit fullscreen mode

console table

2."group") & console.groupEnd("group")

To organize the console, let's use & console.groupEnd().

Using console group, your console logs are grouped together, while each grouping creates another level in the hierarchy. Calling groupEnd reduces one.
    console.log("Test 1st message")"info")
        console.log("Frontend Engineer")
Enter fullscreen mode Exit fullscreen mode

console group and groupEnd

3. console.dir( )

Prints a JSON representation of the specified object.

let info = {
    "name": "Suprabha", 
    "designation": "Frontend Engineer",
    "social": "@suprabhasupi"    
Enter fullscreen mode Exit fullscreen mode

console dir

4. console.assert( )

Log a message and stack trace to console if the first argument is false.

It will only print the false argument. It does nothing at all if the first argument is true.

console.assert(false, "Log me!")
Enter fullscreen mode Exit fullscreen mode


let name = "supi"
let msg = "Its not a number"
console.assert(typeof msg === "number", {name: name, msg: msg})
Enter fullscreen mode Exit fullscreen mode

console assert

5. console.count ( )

This function logs the number of times that this particular call toΒ count()Β has been called. This function takes an optional argumentΒ label.

IfΒ labelΒ is supplied, this function logs the number of timesΒ count()Β has been called with that particularΒ label.

Enter fullscreen mode Exit fullscreen mode

console count with label

IfΒ labelΒ is omitted, the function logs the number of timesΒ count()Β has been calledΒ at this particular line

for (let i = 0; i < 5; i++) {
Enter fullscreen mode Exit fullscreen mode

console count without label

6. console.time( ) and console.timeEnd( )

Check the performance of your code in execution time

console.time() is a better way to track the microtime taken for JavaScript executions.

let l = 0;
for (let i = 0; i < 5; i++) {
   l += i
console.log("total", l)
Enter fullscreen mode Exit fullscreen mode

console time and timeEnd

Reference 🧐

🌟 Twitter πŸ‘©πŸ»β€πŸ’» 🌟 Instagram

Discussion (30)

5alidshammout profile image
Khalid shammout • Edited

after I did this, my chrome went into a proplem

setInterval(() => {console.count()}, 0)

sudarshansb143 profile image
Sudarshan Sawandkar

You will get dangerous email from Sundar Pichai :)

5alidshammout profile image
Khalid shammout

what do you mean?

Thread Thread
iswiboni profile image

its a joke

mojosef profile image

3 days on β€” what’s the count?

sunflower profile image

lucky you are not spawning threads or processes

kevinmmansour profile image
Kevin M. Mansour

DDOS Attack. :)

steebe profile image
Stephen Bass

It seems you found & implemented, and then rewrote this featured original article on Hacker News:

If this is the case, I'm glad you got something from this, but why not credit the original author given how similar your post is?

Additionally, the post I'm linking to above is one of many similar articles that started getting popular in 2017/2018 (on the same note as @ra1nbow1 's comment here). At some point we have to acknowledge when we're steering away from the spirit of sharing information in pursuit of internet points.

z2lai profile image

Great screenshots, the examples are very clear!

Your console screenshot for using console.dir() seems like it returns the same object format as using console.log(), instead of returning JSON. Is that how JSON looks like in the console? I'm not too sure what the difference is between console.dir() and console.log() on an object.

brianarn profile image
Brian Sinclair

console.dir isn't technically emitting JSON, it's more that it's providing a way to interactively navigate through that object's properties.

It's the default approach that console.log will use on objects, but you can see a clear distinction when you use a DOM node instead.

If you were to console.log(document.body), you get an interactive version of the DOM in the console, because the console standard says to use an optimally useful format, which for the DOM is the same as console.dirxml(document.body).

But, if you console.dir(document.body) instead of getting the DOM representation, you get an Object representation and can navigate through the properties of the Object.

z2lai profile image

Thank you so much for the explanation, that is incredibly useful! I've always struggled with trying to read DOM element representations in console.

ra1nbow1 profile image
Matvey Romanov

One more post about JS console

sunflower profile image

ah... Javascript is spelled JavaScript... not that important but thought if we use it for 10 years, then may as well know the official name... I know... macOS, MacBook... it is all confusing...

hasanmainul profile image

it's really nice

steps0x29a profile image
Stefan Matyba

Thanks, I didn't know most of that, but I'll remember for the next JS project

suprabhasupi profile image
Suprabha Author

I am really glad you find this post useful ☺️

enriqueedelberto profile image
Edelberto Enrique Reyes

Thanks for sharing.

cahuichealberto profile image
Alberto Cahuiche

Thanks, great info

manuthecoder profile image

Wow! Never even knew most of these functions!
Thanks for sharing!

rishitkhandelwal profile image
Rishit Khandelwal

cool methods, I must remember to use these

ghedwards profile image
Gareth Edwards

what about console.trace() ?

5alidshammout profile image
suprabhasupi profile image
Suprabha Author

mmmm, I haven't covered all console methods. There are few more methods, I just though to cover which I see using mostly in daily life

zenel_bobi profile image
Zenel Bobi • Edited

I usually just do this :

for ex.
console.log('user data =>' , userData);

Never needed the other ones :P

mayccoll profile image

my console log
console.log('%c βš™οΈ ', 'background: #fff45d;', 'LOREM IPSUM');

hseritt profile image
Harlin Seritt

Good job, Suprabha! Enjoyed the read!

yaireo profile image
Yair Even Or • Edited


Made this some years ago, to awesomely make colorful logs

πŸ”₯ Please checkout all my other 50+ repos which are also awesome and you shouldn't miss.

grean profile image
RΓ©an Guillaume

It's nice until point 5 on ReactNative with Expo 41.
The rest of the console API are not implemented yet!

chamampi profile image


Forem Open with the Forem app