As people who code, the console is well used tool in our treasure chest. If you're new to programming, the Console API gives us methods which allow us to send messages to the console area within web browsers. Being able to interact with the console gives us helpful and easy ways to do things like check the outputs of our code, show things like objects more neatly, and debug. With that said, let's log some time learning five cool console methods in JavaScript!
TLDR
6 Cool Console Methods
A Quick Primer on Log Levels
With each console message comes something called a logging level. These levels tell allow us to distinguish these methods from each other. A good example of this is the difference between a warning and an error.
Now to the methods!
6 Console API Methods
1. console.log()
What do I do?
The console.log() method is probably the most popular method due to its many use cases. A common use case for would be sending messages to the console when debugging functions. This can help us know if a function is being run, and/or if it's returning the expected output.
Let's See An Example!
2. console.group() & console.groupEnd()
What do I do?
Console.group() and console.groupEnd() are a duo. Together, these two allow us to group messages together, helping us better organize ourselves if we're using a lot of messages. As the naming might suggest, you would use .group() to start a group and .groupEnd() the end a grouping. Bonus: you can use .groupCollasped() to make sure the group logs to the console collapsed initially 👍🏾.
Let's See An Example!
3. console.table()
What do I do?
Console.table() lets you take an array of objects, and then print those objects to the console as a table. Think of this as a way to print an array of objects in a console version of an Excel sheet. This gives you a cleaner way to check the values of many objects in an array.
Let's See An Example!
4. console.warn()
What do I do?
Console.warn() allows us to log a warning message to the console. If you've worked in the console before, warning messages are the yellow messages that appear with a stack trace.
Let's See An Example!
5. console.error()
What do I do?
Console.error() is very similar to console.warn(). You still get a message within the console but errors show up with a red background, meaning you should really look into these 😅.
Let's See An Example!
6. console.dir()
What do I do?
Last but not last, we have console.dir(). This method allows us to view an object in a JSON format. Very handy if you're working with larger objects. Bonus tip: if you've ever needed to see a list of methods and properties on something like the document window or body, console.dir() is a quick way to see view them.
Let's See An Example!
Well Here We Are 🌅
There we have it! 6 neat console methods! If you want to find more cool methods, one place you can look is Googles Developer Console API Reference.
Happy Learning 😄👋🏾!
My goal with writing is to make enjoyable content that helps you learn. If you liked what you read, wanted to ask a question or say hi 👋🏾, you can find & follow me on Twitter.
Top comments (1)
Didn't know about the
console.table(). Thanks for this! 😄