Getting deeper into the console

Preface: Not all of these commands are compatible in all browsers. I strongly recommend using the latest version of Google Chrome.

One of the first things budding web developers play with in JavaScript is the browser console (the real web browser). After looking at the console, the first thing everyone writes is:

console.log("Hello world!");

console.log() is a very useful command which many people use to debug and ensure their code is running the way they expect, however the console has a lot more power through lesser known commands that can help format data and even run interactive games!

Console output commands

Aside from console.log(), it is possible to filter the output based on what information it is representing. Here’s a few other console commands to be aware of:

  • console.error()
  • console.warn()
  • console.info()
  • console.debug()

Here’s the output of these commands:

Screen Shot 2016-01-07 at 12.01.18 PM

Console.group()

If you want to group a bunch of related messages together, you can use console.group() noting that you must close the group with console.groupEnd() like so:

console.group("beginning process...");
console.log("part 1 of the process.");
console.log("part 2 of the process.");
console.log("process complete.");
console.groupEnd();

This code would output like this:

Screen Shot 2016-01-07 at 12.51.52 PM

Console.table()

Getting a little more complex now, another way to display information in a much more readable format is to use console.table() which as you might guess, displays the information in an organised table. console.table() can take multiple parameters as objects or arrays and display it in a more readable format. So this code:

console.table([[1,2,3], [4,5,6], [7,8,9]]);

would output:

Screen Shot 2016-01-07 at 2.53.50 PM

For more information on how to display different information with console.table(), follow this link.

Console.time()

It is possible to create a timer that displays the amount of time that passes between a console.time() and console.timeEnd() command. To make this work, they both need to be passed in a name which will be displayed at the end. The console will then output how much time passed between each one. For example:

console.time("timer");
setTimeout(function() {
  console.timeEnd("timer");
}, 200);

would output:

Screen Shot 2016-01-07 at 1.07.19 PM.png

If you’re wondering why the example didn’t output exactly 200ms, it’s because the .490ms is how long the operations outside of setTimeout() took to run.

String substitution:

While using console.log() (or any other console output command, it is possible to use substitution to format a variable in a certain way. The console commands recognise the following types:

  • %s = string
  • %i OR %d = integer
  • %f = floating point number
  • %o = DOM element
  • %O = Javascript object
  • %c = used to apply given CSS specified by an additional parameter

So this code:

var user = {
  name: "Michael",
  age: 27
};

console.log("%s is %d years old!", user.name, user.age);

(Take note that the substitutions must match the order in which the arguments are passed in) would output:

Screen Shot 2016-01-07 at 1.16.32 PM.png

CSS in the console

This is definitely where you can start having a lot more fun trying to do interesting things. Using the substitution method you can apply CSS effects to text by passing in a string with CSS formatting like so:

var css = "color: purple; font-size: x-large";
console.log("%cThis text is much bigger than usual...", css);

will output:

Screen Shot 2016-01-07 at 1.27.35 PM

If you would like to see a much more extreme example, go to this paste bin and copy the code into your console and run it. I’ll bet you didn’t know that was possible in the console! (This example was originally created by @mikewest)

Games!?

One last example I have for you is an interactive game that runs in the console which was originally created by @jschomay. To view and play the game follow this link.

Hopefully this article gave you some insights in to how you can use the console more creatively, if only to have a bit more fun while designing your websites. If you have any other tricks, please share them in the comments.

Finally, one person you should follow to learn more about using the console is Addy Osmani (@addyosmani), a software engineer at Google who often tweets interesting tips about web development and the console like this one.

Further Reading:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s