loading...
Cover image for There's more than just console.log()....other useful ways to use the console in javascript

There's more than just console.log()....other useful ways to use the console in javascript

developer_buddy profile image Buddy Agyin 🦁 Updated on ・4 min read

Update: After some requests from some of you I also added some ways for you to style your console outputs. Check out Facebook's console to see styling in action.

When working in JavaScript, one of the first debugging tools you're introduced to is the console. However, most of us are only shown how to utilize console.log() to log variables and strings but there are many other methods on the console object that you can use in order to more effectively debug your code.

console.assert()

Will write a message to the console only if the first argument is false.

console.assert() can be useful when you want to conditionally print an error message

let a = 3

let b = 4

let c = 5

function isOdd(num){
  console.assert((num % 2 === 0), "Number is odd")
}

isOdd(a) // output: Number is odd

isOdd(b) // output:

isOdd(c) // output: Number is odd

console.error()

Will write an error message to the console

console.error() can be very useful for testing purposes when you want to indicate that there is a code-breaking error within the code

console.error('There was an error with your code')

Screenshot of an error message in the console

console.warn()

Will output a warning message to the console

console.warn() is useful for testing purposes when you want to indicate that there is a non-breaking error in the code

console.warn("Make sure to parse your numbers to integers")

Screenshot of warning message in the console

console.group() & console.groupEnd()

Will create a group of messages in the console. Must use console.groupEnd() to indicate the end of a group.

console.group() can be useful when you have a collection of messages you want to keep together. If needed, you can also provide your group with a label.

// without label
console.log('Hello World!')
console.group()
console.log("I'm the first message")
console.log("I'm the second message")
console.log("I'm the third message")
console.groupEnd()

// with label
console.log('Hello World Pt.2!')
console.group('Group Label')
console.log("I'm a message")
console.log("I'm another message")
console.log("I'm also a message")
console.groupEnd()

Screenshot of a group of messages in the console without a label

Screenshot of a group of messages in the console without a label

console.table()

Will print a table in the console view.

console.table() is one of my favorite ones as it easily allows you to easily view a set of data in an organized fashion.

This method will also take in two parameters, tableData and tableColumns. tableData is required and should be either an array or an object while tabkeColumns is optional and is an array containing the names of the columns you want to display.

// passing in an object
console.table({ firstname : "John", lastname : "Doe" })

// passing in an array
console.table(["Kobe", "Lebron", "Shaq"])

// passing in an array of objects
let city1 = { name: "Salt Lake City", state: "UT" }
let city2 = { name: "San Diego", state: "CA" }
let city3 = { name: "Houston", state: "TX" }

console.table([city1, city2, city3])

// specify we only want "name" column shown 
let city1 = { name: "Salt Lake City", state: "UT" }
let city2 = { name: "San Diego", state: "CA" }
let city3 = { name: "Houston", state: "TX" }

console.table([city1, city2, city3], ["name"])

Screenshot of table inside the console

Screenshot of table of data in the console

Screenshot of table of data in the console

Screenshot of table of data in the console

console.time() & console.timeEnd()

console.time() will start a timer in the console view while console.timeEnd() stops the timer and displays the result in the console view

These two can be extremely useful when you want to see how long it takes your code to run. You can also pass in an optional label parameter.

// without label
console.time()

for(let i=0; i<100000; i++){
// some code here
}

console.timeEnd()

// with label
console.time("Timer1: ")

for(let i=0; i<100000; i++){
// some code here
}

console.timeEnd("Timer1: ")

Screenshot of timer result in the console, no label

Screenshot of timer result in the console, with label

console.trace()

Will log a stack trace to show how the code ended up at a certain point

console.trace() can be extremely useful when you want to see trace when your functions are being called. You can also pass in an optional label parameter

function myHOF(){
  myCallback()
}

function myCallback(){
  console.trace()
}

myHOF()

Screenshot of trace stack in the console

Format Specifiers (Style Your Outputs)

The console allows you to specify what type of formatting you would like to apply to your output. All format specifiers will start with a % followed by a letter.

I've provided a table with all of the different format specifiers you can use, but for this article, I'm going to show you how to add CSS styling.

Specifier Output
%s Formats the value as a string
%i or %d Formats the value as an integer
%f Formats the value as a floating point
%o Formats the value as an expandable DOM element
%O Formats the value as an expandable JS Object
%c Applies CSS style rules to the output string
console.log("%c Here is some really large, red text", "font-size: 58px; color: red;")

console.log("%c I'm Serif and Blue", "color: blue; font-family: serif; font-size: 32px")

Screenshot of console outputs with styling

Discussion

pic
Editor guide
Collapse
andrea_dispe profile image
Andrea Disperati

Hi, this article is going to be very useful, thank you.
I do have a question though. I encountered this problem not a long time ago but I couldn't find an answer to it.
When I run this on the Chrome console:

console.time("Timer1: ")
for(let i=0; i<100000; i++){
   console.log('test')
}
console.timeEnd("Timer1: ")
Enter fullscreen mode Exit fullscreen mode

it takes around 35 seconds to display on Chrome console the result which is around 5000 ms.
Does this mean that while the (V8?) takes 5 seconds to run the code, Chrome console is much slower to show the result of all iterations?

Collapse
matthewpardini profile image
Matthew Pardini

Printing to the console is slow. Yes. Have you tried the same thing without a .log in the loop? Probably much much faster

Collapse
andrea_dispe profile image
Andrea Disperati

Yep, just tried as you suggested and it turned out that an addition without console.log() is roughly 2500 times faster. I got it, thank you.

Thread Thread
matthewpardini profile image
Matthew Pardini

This isn’t specific to chrome

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
andrea_dispe profile image
Andrea Disperati

the code is not the reason why it froze, it runs smoothly.

Collapse
mrzacsmith profile image
Zac Smith

Excellent, I love .table() and now I have some new console tools to use! Great job and great clarity in your style.

Collapse
developer_buddy profile image
Buddy Agyin 🦁 Author

.table() has become one of my new favorites, it makes viewing datasets much easier

Collapse
tassoman profile image
Tassoman

Using console.info('my message') you can deliver my message 😆

Collapse
ipanardian profile image
Ipan Ardian

Nice info

Collapse
matthewpardini profile image
Matthew Pardini

I love using css colors and sizing in my logging when I have a lot of noise. console.log(“%cMy Message”, color: “red”) will print a red colored My Message.

Thanks for the tips

Collapse
developer_buddy profile image
Buddy Agyin 🦁 Author

This is something I actually didn't know was possible, thanks for that tip. I'll actually update the post to include this as well

Collapse
matthewpardini profile image
Matthew Pardini

Looks like I forgot my quotation marks around the color:red part. Check out facebook’s console sometime. It’s decked out (or at least it used to be, I don’t have fb anymore)

Collapse
danielo515 profile image
Daniel Rodríguez Rivero

I come here to see all the methods I already know, not expecting anything new, but I actually saw some that I didn't knew, so thank you.

Collapse
developer_buddy profile image
Buddy Agyin 🦁 Author

I'm glad you were able to find some new methods on here

Collapse
simerca profile image
Ayrton

Can you expend your post with color syntaxes ?
Thank you so much, .table save my mind now ! 😂

Collapse
developer_buddy profile image
Buddy Agyin 🦁 Author

Yes, working on an update to include color syntax as well

Collapse
a_sandrina_p profile image
Sandrina Pereira

TIL about console trace and assert! Thank you!

Collapse
dilipchalamalasetty profile image
Dilip Chalamalasetty

Thanks for .table()😁

Collapse
katrinadierking profile image
Katrina Dierking

This is great information. I honestly had no idea. Thank you so much for sharing this.

Collapse
martincleto profile image
S. Martín-Cleto

Thanks for that overview, console object is definitely underused. I also write 'console.count()' to get the times a function is called.

Collapse
hemalr profile image
Hemal

Fantastic - bookmarked!

Collapse
rajasekharguptha profile image
Rajasekhar Guptha

Recently I accidentally came to know about these from MDN reference and thinking of making a post on this...
Anyway Nice post 🤍

Collapse
dionnyprensa profile image
Dionny Prensa

It is also possible to use console.log with JSON.stringify(someObject, null, 2)
Example

Collapse
alejandrowebdev profile image
Ale

My mind has been blown.

Great article indeed.

I actually learned stuff.

I did not know FB had styled the console like that!

Very useful console functions.

Thanks!