DEV Community

Cover image for Level up your JavaScript browser logs with these console.log() tips

Level up your JavaScript browser logs with these console.log() tips

Ackshaey Singh on November 02, 2020

I consider myself a backend software engineer - and as any backend engineer would attest, a large part of our life is spent monitoring, troubleshoo...
Collapse
 
dennila2 profile image
Denni

You wrote: "Don’t use console.log() Instead, write a wrapper class..."

Console.log()/table()/etc... print in console place (filename and string number) where was he called.
joxi.ru/gmv6P5LsqgZKEm?d=1
If wrap console.log() in class in console always printing file and string number where console.log() is live in Log class!!. How can I know without additional params where log() was called?

Collapse
 
ackshaey profile image
Ackshaey Singh

Good question, which drives home the reason why this tip was listed under the production logging section and not development or debugging. The question you'd need to ask yourself is how useful is it to have that extra file:line link there? If you're doing things right and have compressed / minified your app's assets in production you're likely not going to find the location link useful anyway - instead your log messages should have all the info you need to identify where the log is emitted from and be actionable. Also keep in mind that console.trace() will still have the entire stack trace one level down even when invoked from a wrapper.

Collapse
 
jakubkeller profile image
Jakub Keller

Do not write a wrapper around console.log, unless you're using an opinionated framework like React or Angular, which then you can expose the functionality via a custom, injectable service. Otherwise, do use console.log or any language equivalent and stay away from heavy-handed logging frameworks.

Collapse
 
shtabnoy profile image
Denis Shtabnoy

Awesome article. I've never even heard about these console methods as .table, .trace, etc. Very informative. Thank you! πŸ€“

Collapse
 
hdayi profile image
HacΔ± DAYI

Very useful tips, thanks πŸ‘

Collapse
 
echo2477 profile image
Eko Y

Great...

Collapse
 
aspiiire profile image
Aspiiire

Thank you for sharing :D

Collapse
 
hb profile image
Henry Boisdequin

Thanks for the tips!

Collapse
 
tomiito profile image
TomΓ‘s de Priede

Great article! I will start immediately to use this stuff!

Collapse
 
ksaaskil profile image
Kimmo SÀÀskilahti

Very useful, never knew you can do so much to improve console logs!

Collapse
 
ravigithub profile image
Ravi Kasireddy

Great article thanks for share πŸ‘

Collapse
 
tulo69 profile image
stefano valicchia

console.table() = love! Thank you, never used before!

Collapse
 
timhuang profile image
Timothy Huang

Excellent! This article is really useful.

Collapse
 
iyushb profile image
iyushb

Thank you for sharing the article.

Collapse
 
devworkssimone profile image
DevWorksSimone

Uhhh interesting article... ti bad Javascript doesnt show up on firecode will get by as I learn a bit of Java !

Collapse
 
umaar profile image
Umar Hansa

These are some really useful tips! Nice work. For anyone interested in Chrome DevTools tips, I've posted loads here: umaar.com/dev-tips/

Collapse
 
richliv profile image
Rich Livingstone

Very interesting and useful. Mostly new topics to me and I will be integrating most of these techniques into my applications.

Collapse
 
meddy672 profile image
Matt Eddy

Good article