If you are a web developer I’m guessing you have used console.log() a couple of (thousand) times. But did you know that the console object has some other usefull methods you can use to structure the output you get?
What is the console object?
First, a very with a short introduction to the console object before we dive in to its methods.
So what is the console object? The MDN Web docs sais “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.”
In other words, it is a object that is available to use for debugging purposes.
Lets take a look at some of the methods it provides.
console.table()
You have two objects that contains the same structure of information about two pets. You add both pets to an array.
let myPet = {name: "Poppy", animal: "cat", age: "2", favoriteToy: "ball"}; let myOtherPet = {name: "Harry", animal: "pig", age: "3", favoriteToy: "food"}; let pets = [myPet, myOtherPet];
If you want to print the array to the console you can use console.log(), that will look like this:
If you would like a better overview of what the array contains you can use console.table()
instead.
console.table(pets);
That will give you a nice table presentation of the array content, like this:
console.group()
You can use console.group() to create collapsible groups of outputs. For instance you can use it to group output from functions.
const function1 = () => { console.group("Function 1 output"); console.log("this is a message from function1"); console.groupEnd(); }; const function2 = () => { console.group("Other function output"); console.log("Well hello there!"); console.groupEnd(); }; function1(); function2();
When the functions are called you will get the messages presented like this:
Nested groups
You can also nest groups inside eachother
const function2 = () => { console.group("Other function output"); console.log("Well hello there!"); console.group("This group is nested inside of the 'Other function output' group"); console.log("Hello from inside this group"); console.groupEnd(); console.groupEnd(); };
collapsed groups
If you want the groups to collapsed as default you can use console.groupCollapsed("name of group")
instead of console.group("name of group")
console.dir()
When you want to output information about an object in a structured manner you can also use console.dir(object);
console.assert()
If you want some condition to decide if your ouput is displayed in the console, console.assert()
is the function for you. This function takes two parameters, a boolean and a string. The message (string) will only be displayed in the console if the boolean value is false
.
const function1 = (condition) => { console.assert(condition, "This message will be displayed as a warning if the condition equals false"); }; function1(false);
Adding color to your console output
The console object have two built in functions that will add color to the displad text. These are console.warn() and console.error(). And as you might have guessed they will be displayed as a warning and an error.
Add your own styling
If you add %c before your string, and pass a string of styling as a second parameter you can style your output.
Other usefull console methods
Create and use a timer
You can use console.time()
to start a timer, and console.timeEnd()
to end it.
Where is your function being called?
Use console.trace()
to see where the function was called from
Resources
- console (MDN)
Did you find this article usefull? Follow me on twitter to be notified when I publish something new!
Also, if you have any feedback or questions, please let me know in the comments below. š
Thank you for reading, and happy coding!
/Eli