Hello console!

May 30, 2016 by joel paulino

Although the console object should be in every Front End Developer’s toolbelt, it’s actually a non-standard feature. But in most browsers the API is the same, so let’s checkout some of my favorite methods. I am sure this snippet looks very familiar.

// Ex 1
console.log("Hello console!");

How about this?

// Ex 2
console.log("Hello", "console", "!");

The log method takes any number of arguments and essentially prints to the console the string representations of each of argument appended together in ordered list separated by a space.

// Output of Ex 1
> Hello console!
// Output of Ex 2
> Hello console ! // Notice the space between console and !

You can pass it any of the JS primitives, other native objects and even your own custom objects.

// Ex 3
> console.log(new Date(), 2, String("hello"), [1,3], new Person("Joel"))

> Sun May 29 2016 22:55:10 GMT-0700 (PDT) 2 "hello" [1, 3] Person {name: "Joel"}

The log method also has another API.

// Ex 4
> console.log("Hello, %s! You're %d years old.", "Joel", 28)

> Hello, Joel! You're 28 years old.

Here we pass console.log a message and substrings which will replace substitution strings in the main string.

Console.dir

The dir is the cousin of the log method. To see the usefulness of dir, type the following into your console:

// Ex 5
> console.log(window.document)

> #document
    <DOCTYPE html>
    <html>
        <head>...</head>
        <body>....</body>
    </html>

Not much different than inspecting the page’s source. The document is special and the console gives it special treatment. It outputs the DOM Tree in html format. Now try the following:

// Ex 6
> console.dir(window.document)

> #document
    URL: "http://localhost:4000/articles/2016/05/01/hello-console/"
    activeElement: body.site.mdl-color--grey-200
    alinkColor:""
    all: HTMLAllCollection[206]
    anchors: HTMLCollection[0]
    applets: HTMLCollection[0]
    baseURI:c"http://localhost:4000/articles/2016/05/01/hello-console/"
    bgColor: ""
    ...

Now you can see the document object’s properties and methods.

Console.info, warn and error

These methods work exactly like log except that output UI and formatting is slightly different.

// Ex 7
> console.info('Test')
> console.warn('Test')
> console.error('Test')

alt text

As you can see, color and iconography are used to classify the outputs. If your using the console API to provide information to user, it’s nice to have some control over how your messages and errors get displayed.

Console.table

The table method is a fun one. It lets you display tabular data in a…table. The example below was lifted from the console output of the Performance-Analyser chrome extension (highly recommend you check it out).

// Ex 8,
console.table(table.data, table.columns);

alt text

I covered some goodies, but for a more comprehensive tutorial visit MDN. I will probably also have some follow ups to this post.

My name is Joel. I have a passion for Front End Development, and when I grow up I want to be a JS ninja. I am currently the Lead Developer at Yoi.