DEV Community

loading...
Cover image for Use console.log() like a pro

Use console.log() like a pro

denicmarko profile image Marko Denic Originally published at markodenic.com ・2 min read

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

If you like this article, chances are you'd like what I tweet as well. Consider following me on Twitter.

Discussion (17)

pic
Editor guide
Collapse
stegriff profile image
Stephen Griffiths

Great post!

I'd add that you can console.log a few things, separated with commas, and they will come out with their "native" formatting instead of the dev tools trying to change them to strings. Sometimes this is better than using the string substitutions, and it's better than concatenating them with +

Example: Example

Collapse
denicmarko profile image
Marko Denic Author

Great addition. Thank you, @stegriff .

Collapse
blossom profile image
Blossom Babs

This is a great hack! I didn't know half of this before now. Thanks.

Collapse
denicmarko profile image
Collapse
shookcodes profile image
Sarah Shook 💎

Thank you for sharing this article, so many great uses of console.log() I haven't explored yet. I'm especially excited about console.clear()!!

Collapse
denicmarko profile image
Marko Denic Author • Edited

Thanks, @joojaco . My personal favorite is the console.table(). I'm so glad you liked the article.

Collapse
mathewthe2 profile image
Mathew Chan

Good post. Didn't know about console.assert. But as someone once told me, you must remove all your console logs before you commit :)

Collapse
denicmarko profile image
Marko Denic Author

Haha, that's true @mathewthe2 . I sometimes forget to do that.

Collapse
ayaofficielle profile image
ayaofficielle

Good job 🤗

Collapse
denicmarko profile image
Collapse
onyxcode profile image
Dan

I've been wanting to know how to do those custom CSS styles! Thank you!

Collapse
denicmarko profile image
Marko Denic Author

My pleasure, @onyxcode . Glad you like it.

Collapse
jainpawan21 profile image
Pawan Jain

I found console.table() quite interesting.
Thanks for sharing cool stuff.

Collapse
denicmarko profile image
Marko Denic Author

Glad you like it @jainpawan21 . :)

Collapse
amitavmishra99 profile image
Amitav Mishra

Awesome! Now console logging will be fun :)

Collapse
denicmarko profile image
Marko Denic Author

With JavaScript fun never stops. Glad you liked the article.