Hey blog readers! I have been creating a few different kinds of tutorials recently using examples of charts to illustrate some concepts. Today, we will have something a little different.

We will be exploring the console and how to use all of its underused interactivity. The console is the main source of testing for developers so we want you to know some of its methods that will help your programming out.

Console Methods

This section will focus on some really useful methods, past the ubiquitous console.log(). Each has its own use in programming and we will give you a text and visual representation of each.


console.table() is a pretty useful console method that makes a grid out of your JavaScript objects. It is an easy way make sure your objects are organized how you intended. The example below shows how console.table() works.

responsive mobile charts with javascript


console.clear() clears your console so you can start working with a blank slate.

Tip: you can push the up arrow on your keyboard if you want to see the items in the console you clear with this method.

responsive mobile charts with javascript


console.dir() gives a JavaScript representation of an object. It will give you the full details of anything you choose to call. It's usually used to check out the DOM structure, but you can use this to check a lot more than that. The example below shows how you can use it to gain the full JavaScript representation of a variable.

responsive mobile charts with javascript


This gives a full-time profile of your CPU while a block of code is being executed. It is pretty useful to evaluate CPU output in depth. The example shows the execution of this method.

responsive mobile charts with javascript

console.time() & console.timeEnd()

console.time() & console.timeEnd() will measure how long a piece of code takes to run. Just place console.time() at the beginning of your code block and console.timeEnd() at the end. It will give you the time it takes to execute in your console. It is very useful if you are trying to evaluate which pieces of code are slowing your pages down.

responsive mobile charts with javascript


When recording your timeline in your application, you can place console.timeStamp() within your code and the timeline will register exactly how far and long this takes place in your code.

responsive mobile charts with javascript


This can be used to count the instances of pretty much anything you define. It's best illustrated using a loop, but you can use it to see how many instances a variable or function is called in your code.

responsive mobile charts with javascript


This method is an easy way to check if a declaration is false. Pretty straightforward, but it is a useful way to debug quickly.

responsive mobile charts with javascript

Console Customization

Look & Feel

The console can be customized quite a bit to meet a lot of your technical demands. Follow along with the gif below. It will teach you how to change your console from the default light theme to dark.

responsive mobile charts with javascript

console.emojis 🔥

If you get bored of normal console messages or need something to help you easily identify the console logs, you can use emojis. Check your console, there should be a message for you. Include it as a string with your console message. It makes for any easy way to identify console logs.


Hopefully, you learned a few things with this quick console tutorial. Take a few of these methods and use them in your next projects, I am sure there will have some sort of impact in your testing methods. There are a few more you can check out here.

These are just the ones I have personally found the most useful If you have any comments or questions leave a comment below.

comments powered by Disqus