DEV Community

5 JavaScript Console Methods That will Improve your Debugging Skills🚀

Bentil Shadrack on August 08, 2022

The console is a JavaScript object that grants developers access to a browsers debugging console. Shortcuts to open the console in browse...
Collapse
 
bluefalconhd profile image
Hayes Dombroski • Edited

You can also apply css styling to certain messages in the console, if you need something to stand out. Use console.log("%cTEXT", "color: purple; font-size: 20px")

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
bluefalconhd profile image
Hayes Dombroski

yep! I mistyped!

Collapse
 
pelv profile image
Alex Benfaremo

I've made a small npm package to better handle "tagged and colored" console.logs: npmjs.com/package/@pelv/frontlog

Nothing special but it has some fancy feature (hide log on prod build).
This post make me realise i should add the table and dir consoles, even if they doesn't really need styling.

Collapse
 
qbentil profile image
Bentil Shadrack • Edited

Yes! that's also a great way of identifying the log messages at different run points in your code for easy debugging.

Thank you!🚀

Collapse
 
mahanjs profile image
mahan-js

Sye

Collapse
 
daspete profile image
Das PeTe

Please stop using the console.* Methods for debugging... There is a reason why breakpoints and the debugger was invented ..

Collapse
 
travisvadnais profile image
Travis Vadnais

Another alternative is to just write perfect code in the first place. Much easier that way.

Collapse
 
decker67 profile image
decker

Did you ever try to debug a vue/react/... appliation, it simply does not work in most cases to place a breakpoint or get to a specific line, due to the compiling and optimizing. So console.log is the last resort.

Collapse
 
daspete profile image
Das PeTe

Yes, but you are right, it takes some setup to get the debugger working on a Vue or react app... But it's possible.

Collapse
 
tosey profile image
Tosin Seyi

True

Collapse
 
ammartinwala52 profile image
Ammar Tinwala

Thanks for this article. There is one thing I wish you would have added.
console.log({}). This way of debugging helps when we need to name the output's that we are printing on the console.

e.g: console.log({testData: 'abc'});

We can directly use variables in the console.log in the above way that will give us the name of the variable along with the output.

Collapse
 
qbentil profile image
Bentil Shadrack

Thank you for the addition.
Really welcomed🙌

Collapse
 
imakashrana profile image
Akash Chauhan

The importance of gaming in Javascript is vast. It helps with hand-eye coordination, problem solving, and logic skills. Gaming can also relieve stress, improve moods, and promote social interaction.
Here find how you can improve your JavaScript skills with Javascript gaming

Collapse
 
abzave profile image
Abraham Meza Vega

This is really great!
Another trick I've been using so far to debug multiple variables is to print them all in a object. i.e:
console.log({ var1, var2, var3 });

Collapse
 
thealpha706 profile image
TheAlpha706

Log and debug better with this tool I'm building
npmjs.com/package/logie

Still working on the docs 😊

Collapse
 
qbentil profile image
Bentil Shadrack

Alright.
I will check it out

Collapse
 
virginiel profile image
VirginieLemaire

Thanks for remembering me some. I discovered the others, great!

Collapse
 
qbentil profile image
Bentil Shadrack

I'm glad to help😊

Collapse
 
edd67nj profile image
Rick

Thanks Bentil - This is a helpful summary of relevant Console object methods.

Collapse
 
qbentil profile image
Bentil Shadrack

I'm glad you found it helpful.✨