DEV Community

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

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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"])
Enter fullscreen mode Exit fullscreen mode

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: ")
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

Screenshot of console outputs with styling

Top comments (24)

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 • Edited

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
 
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 🦁

.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 • Edited

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 🦁

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
 
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 🦁

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
 
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 🦁

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