Better console.logs
Kinyanjui Wangonya
Oct 18 '18
・2 min read
If you work with javascript a lot, you probably often need to use
console.log() to output some info as you go along.
It's usually just the plain old way though:
(() => { // do stuff console.log('Success!') })()
Here are a few ways you could make your logs a bit more visually informative, and interesting 🙂
Use
console.error() for error logs
(() => { // do stuff console.error('Oops, something went wrong!') })()
Use
console.warn() for warning logs
(() => { // do stuff console.warn('Warning! Something doesnt seem right.') })()
[Edit] Use
console.table() for iterable objects
Thanks to @shoupn and @squgeim for pointing this out in the comments :)
function Person(firstName, lastName) { this.firstName = firstName this.lastName = lastName } const me = new Person('John', 'Smith') console.table(me)
Add your custom styles
(() => { // do stuff console.log('%c%s', 'color: green; background: yellow; font-size: 24px;','Success!') })()
You can have a custom function in your code that lets you use "your own" log with colors directly
function customLog(message, color='black') { switch (color) { case 'success': color = 'Green' break case 'info': color = 'Blue' break; case 'error': color = 'Red' break; case 'warning': color = 'Orange' break; default: color = color } console.log(`%c${message}`, `color:${color}`) } customLog('Hello World!') customLog('Success!', 'success') customLog('Error!', 'error') customLog('Warning!', 'warning') customLog('Info...', 'info')
Hope you found this useful and happy debugging! 😊
Did you find this post useful? Show some love!
dev.to is where software developers read, write, and level up. Sign Up Now
(open source and free forever ❤️)
(open source and free forever ❤️)
Classic DEV Post from Dec 31 '18
My 2019 Resolutions as a Developer
The goals I will accomplish in 2019, and some others I probably won't.
Lessons Learned from our First #RealWorldCode Live Stream
Zee -
Related to
console.login the Dev Tools,
we can use
$instead of
document.querySelector
and
$$instead of
document.querySelectorAll.
That's not related to the jQuery $.
Example:
Wow, didn't know that. Thanks!
Also,
$0to get the element you've got selected in the inspector (in Chrome).
I like to use
console.timeand
console.timeEndto benchmark code execution time.
Very useful. Should also be included to the article.
With your code, you can actually have it change the console type too, like so
Also,
console.count('nameToCount')will count how many times it is called, which can be handy.
All this methods to debug operations could be seen by final users when console is open in released applications.
I use
console.debugwith all included arguments and the debug messages only appears when application is in debug mode and the level of messages from console includes Verbose messages.
Hey Tetri. You're right. These methods are just used in development for debugging and should be omitted in production code to avoid maybe giving out information that shouldn't get to the end user. I should have mentioned that.
Your method is definitely better :)
I wasn't sure where to stick this comment. One of my favorite things to do when I visit a new tech website is to check the developer console for hidden messages. Looking at you, Reddit.
Nice idea! I'm actually working on a redesign of my site. I'll make sure to add something fun in the console for anyone looking around :)
I do this all the time when surfing through the web, open console, viewing source code, finding curious things - like job offers - which seems to be one of the best placement for web development job offers :). I made a small (totally incomplete) article series (in German) out of it: dirty-co.de/category/jobanzeigen-i... ;)
While I do agree using console.log() would present information to the user via the client console once the code has reached the client, it's all accessible anyways. Security through obscurity is not security. Adding breakpoints and tracing code execution in the client is trivial now days.
I'm a big fan of the debug module. For debug logs that you don't remove afterwards it is very nice.
Another nice thing is
console.trace, which also prints out a stack trace where the log is called. Useful if you're trying to debug a function which is being called in several critical areas.
That's great - I didn't know about
console.table. That's some very cool web-fu.
BUT!
Remember - all this debugging is as nothing to the power of good automated tests. A debug line should be ephemeral - an automated test is for life!
I have gone about this via namespacing my debug logs so it assigns a colour based on that namespace.
The namespace here being cache which is mapped against an array of colours using the following code...
This way cache logs are always shown in the same colour allowing you to visually identify them.
As a temporary measure for writing quicker
console.log()'s just put the following in a temporary file (for polluting the global namespace) and link it to the top of your web application then unlink it when no longer needed:
Now you can easily do...
This is especially useful when logging multiple test cases in a single run. Similarly can be done with the other console methods. And if you really want to go crazy, this can also be done with
Object.prototype.methodsbut you must often bind the function to the calling object's scope by setting the context with
Function.prototype.bindor
Function.prototype.call. I think ES5 and ES6 have made
Function.prototype.applyobsolete so I don't use it or recommend it anymore. But only do this on very small projects or inside created objects.
I use console.trace to check the stack calls. I use also console.log({variableName}) to get the variableName in the console..
Is there anything more fun than inspecting a website you're visiting for hidden console.log messages? The console.table is a new one for me and it's awesome, thanks for sharing!
Now I feel like its the first thing I'll be doing whenever I access a tech related website 😅
Not just tech sites... I've seen some great ones on other sites too, kinda like those easter eggs in old video games.
Another good thing to look for is to inspect a site with Redux devtools and watch all the state change.
Nice for adding colors on console. It's better!
Yeah! Hope you'll try it out on your next project :)
It's already done ! I've seen this before, but your article complements this feature.
You can also take a look at chalk for coloring the terminal string
console.tablealso comes in handy a lot.
Ah, yes! I'll edit the post and add in that section for future readers when I find some time. Thanks!
Cool! Didn't know about the styling/coloring
Glad you learnt something :)
Short, simple and easy! Thanks!
Idea: Make this an npm package. Wait for it to become popular enough. Inject code to steal credit cards :)
(There was an article about this a few months ago, luckily it was a joke)
Nice. For iterable objects look into console.table()
Do not forget "console.group"!
enriquemorenotent.com/post/differe...
ah cool, i did not know about error or warn!
Glad I could help :)
I thought that console.pretty was a fast way to do this, now I'll star to use more the manual way of console.*
Pretty console logging
console.pretty
Pretty console logging.
The problem
You're trying to log information, but have a hard time tracking down what the output means, where it came from, or can't find what you're looking for quickly.
This solution
Use colors to easily parse through your console.
Example
Installation
This module is distributed via npm which is bundled with node and should be installed as one of your project's
dependencies:
or
API
By default, the following colors are available:
However, you can also build your own logger using the provided
createLogger.
@itsmanojb something we were talking about the other day, what was that video you shared?
That was from Angular firebase. Here the full video youtu.be/Mus_vwhTCq0
dope
Glad you liked it @sreubenstone