DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Bentil Shadrack
Bentil Shadrack

Posted on • Updated on

5 JavaScript Console Methods That will Improve your Debugging SkillsπŸš€

The console is a JavaScript object that grants developers access to a browsers debugging console.

Shortcuts to open the console in browsers

  • Ctrl + Shift + I (windows)
  • Command + Option + K (Mac)

In this post, I've curated 5 console methods that you can use to improve your debugging skills

✨ console.error()

This method works just like the console.log() method.
It Useful in testing of code. By default the error message will be highlighted with red color

// console.error() method
console.log("This is an error");
Enter fullscreen mode Exit fullscreen mode

Output
Console.error Output

✨ console.dir() method

This is another method that is also almost like console.log() except it shows the content in JSON format

// console.dir() method
console.log(document.body);
Enter fullscreen mode Exit fullscreen mode

Output showing difference between console.log() and console.dir()
Output for the .dir() method

✨ console.table() method

This method is used to generate a table inside a console. The input must be an array or an object which will be shown as a table.
It is really a handy method to use if you are fetching data from an API. You can visually see how data is received
Output
Output for the .table() method

✨ console.group() & console.groupEnd()

group() and groupEnd() methods of the console object allows us to group contents in a separate block and indented.
➩ .group() is used to begin a new group, it accepts a label as well as the group name.
by default, the group is opened on the console. use .groupCollapsed to close the group be default

➩ .groupEnd() closes off the current group, It takes same label as the .group()

Output
Output for the .group() method

✨ console.time() & console.timeEnd()

These methods are used to determine the amount of time used for a block of code to execute.
Just like the .group() method, this also takes a label which must be same.
Output
Output for the .time() method

βœ¨πŸš€ console.clear()

.....this method as the name is, its used to clear the console.πŸ˜…
Output for the .clear() method

You can support me to keep writing more for you😊❀

Image description

You know other methods of the console object which is really useful in debugging, tell us in the comment sectionπŸ‘‡πŸ˜Š

Follow me for more dev tipsπŸš€

Top comments (20)

Collapse
bluefalconhd profile image
Hayes Dombroski • Edited on

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
qbentil profile image
Bentil Shadrack Author

Yes! thank 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
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
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 Author

Thank you for the addition.
Really welcomedπŸ™Œ

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 Author

Alright.
I will check it out

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
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
virginiel profile image
VirginieLemaire

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

Collapse
qbentil profile image
Bentil Shadrack Author

I'm glad to help😊

Collapse
riverdruid67 profile image
Rick

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

Collapse
qbentil profile image
Bentil Shadrack Author

I'm glad you found it helpful.✨

🌚 Life is too short to browse without dark mode