Skip to main content

Command Palette

Search for a command to run...

Use console.log() like a pro!

Updated
3 min read
Use console.log() like a pro!
M
Software Engineer.

Using console.log() for JavaScript debugging is the most common practice among developers. But, there is more...

The console object provides access to the browser’s debugging console. The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

The most common Console methods:

console.log() – For general output of logging information.
console. info() – Informative logging of information.
console.debug() – Outputs a message to the console with the log level debug.
console.warn() – Outputs a warning message.
console.error() – Outputs an error message.
Alt Text

Custom CSS styles for a console.log()

The console.log output can be styled in DevTools using the CSS format specifier. Alt Text

String substitutions

When passing a string to one of the console object’s methods that accept a string (such as log()), you may use these substitution strings:

%sstring
%i or %dinteger
%o or %0object
%ffloat
Alt Text

console.assert()

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

console.clear()

Clear the console. Alt Text

console.count()

Log the number of times this line has been called with the given label. Alt Text

console.dir()

Displays an interactive list of the properties of the specified JavaScript object. Alt Text

console.group() and console.groupEnd()

Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd(). Alt Text

HTML elements in the console

Alt Text

console.memory

The memory property can be used to check out the heap size status

Note: memory is a property and not a method. Alt Text

console.table()

Displays tabular data as a table. Alt Text

console.time() and console.timeEnd()

console.time() – Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
console.timeEnd() – Stops the specified timer and logs the elapsed time in seconds since it started. Alt Text

console.trace()

Outputs a stack trace. Alt Text

Happy coding! ❤️

If you liked this article, be sure to ❤️ it.

If you like what I write, chances are you'd love what I email. Consider subscribing to my newsletter.

A

can you please remove that space in the console. info() at the beginning? It's making my eye twitch.

Also, cool stuff ;)

H

stumble guys apk android is a new mobile game that has taken the world by storm. This multiplayer online game pits you against other players in a race to the finish line. The objective of the game is simple: be the last man standing. But with millions of other players all trying to do the same thing, it's anything but easy.

N

Great topic!

1
M

Thanks, Nicolas!

1
A

Nice article. console.table() I must try.

1
M

Thanks a lot.

B

Good base article.

Like having the color settings included.

You might also want to mention somewhere in the article that console is a separate API from the JavaScript engine. I've seen in tests that console will still fire ... event when JavaScript is thread-locked.

1
M

Thank you Bob.

B

Glad you mentioned console.table(). That’s been my go-to for a while now!

1
M

My favorite too. Great method indeed.

D

A nice tip is:

instead console.log("name", name) you can use console.log({name})

2
M

It is Daniel Schmitz. You can actually see it here.

1
D

Thanks for this cool tricks! I often just use console.log but ill try to use these options as well. Especially console.table was very useful to me.

1
M

Hey Dany Tulumidis. I'm glad you liked the article. The console.table() is my personal favorite too.

1