DEV Community

Cover image for Exploring JavaScript console object and logging!
TheDailyTechTalk
TheDailyTechTalk

Posted on • Edited on • Originally published at thedailytechtalk.com

29 8

Exploring JavaScript console object and logging!

If you like what I write and want to support me, please follow me on Twitter to learn more about programming and similar topics ❤️❤️

JavaScript Console

The console object provides access to the browser's debugging console (e.g. the Web console in Firefox). The specifics of how it works varies from browser to browser, but there is a de facto set of features that are typically provided.

Most developers usually use console.log() to debug JavaScript code, but console provides us with such a powerful set of features it would be shame not to use them, or at least know what they do.

  • console.log() For general output of logging information.
  • console.info() Informative logging of information.
  • console.warn() Outputs a warning message.
  • console.error() Outputs an error message to the Web console.

Using other logging besides console.log() will provide you with more informative and clearer logs.

console logging example

Lets start by exploring console object

console

As we can see Console object has plenty of methods. Lets explore some of more useful ones.

console.clear()

The console.clear() clear the console.

console.dir()

console.log() prints the object in its string representation while console.dir() recognizes the object as an object and prints it’s properties in the form of a clean expandable list.

const dog = {name: 'Rex', age: 7, friends: ['cat', 'dog', 'duck']};
console.dir(dog);
Enter fullscreen mode Exit fullscreen mode

console.dir()

console.table()

With console.table() we can create beautiful tables. This is probably my favourite console method.

console.table

console.time(), console.timeLog() and console.timeEnd()

Use console.time() to start a timer.
Use console.timeLog() to print time elapsed since the timer started.
Use console.timeEnd() to print the total amount of time since console.time() started.

console.table()

console.group() and console.groupEnd()

The console.group() method creates a new inline group in the Web console log. This indents following console messages by an additional level, until console.groupEnd() is called.

group

console logging with CSS

This works with most console method such as .log(), .warn(), .error() etc.

Please note that we have to use '%c' for css to work!

console.log(
        "%cTheDailyTechTalk!",
        "color:red;font-family:system-ui;font-size:4rem;-webkit-text-stroke: 1px black;font-weight:bold"
      );
Enter fullscreen mode Exit fullscreen mode

group

I recently started a new blog TheDailyTechTalk where I create free content. If you liked this post and would like to read more posts about javascript please check it out 🎉🎉
🥰

Jetbrains image

Don’t Become a Data Breach Headline

57% of organizations have suffered from a security incident related to DevOps toolchain exposures. Is your CI/CD protected? Check out these nine practical tips to keep your CI/CD secure—without adding friction.

Learn more

Top comments (10)

Collapse
 
radix018 profile image
Rahul

Awesome article bro!!!!!!!!
Its a shame that I never even thought the console as an object, I am surprised to see its methods, will definitely going to increase my productivity.
Thank you so much for sharing this gold knowledge.

Collapse
 
supportic profile image
Supportic

You must be new here. This is getting posted at least once every month lol

Collapse
 
radix018 profile image
Rahul

Yes, I am. This place is so full of fun. Kudos to the creators!!!

Collapse
 
thedailytechtalk profile image
TheDailyTechTalk

Thank you for the feedback :)

Collapse
 
tim012432 profile image
Timo

Very helpful

Collapse
 
thedailytechtalk profile image
TheDailyTechTalk

Thank you :)

Collapse
 
send2abhishek profile image
send2abhishek

Very informative

Collapse
 
thedailytechtalk profile image
TheDailyTechTalk

Thank you :)

 
thedailytechtalk profile image
TheDailyTechTalk

Yeah, that is a great idea. I will test it out with other browsers and update the article. Thank you for feedback :)

Collapse
 
thedailytechtalk profile image
TheDailyTechTalk

Thank you :)

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay