JavaScript 30 – Day 9: Developer Tools

Welcome to my recap of Day 9 of the free JavaScript 30 online video course by Wes Bos. In case you really have not yet heard of the course, quickly head over to it and get started right away! 🙂

Please refer to the JavaScript 30 archive for all recap posts.

Objective…?

Day 9 is no challenge, but rather some sort of Dev Tools Gospel. 😀

The provided starter files include not more than a single HTML file.

Using the Developer Tools

The whole video is about Wes explaining (new) things you can do with the developer tools in your browser.

I am using Firefox—version 51.0.1, in case you want to know—so this is where the screenshots are from and the descriptions relate to.

Inspector

Wes starts off with a simple and yet cool feature of the Inspector in Chrome.

Tracing the Source of Element Manipulation

Maybe you know this: you visit a website—possibly your own—and you see the effect of some JavaScript running. But you just don’t know what is causing it. Using the Inspector in the Chrome dev tools, you can select any element in the HTML and break on attribute modification, for example. This results in a debugger-like pause exactly where any of the respective element attributes is about to be modified.

Unfortunately, Firefox does not have such a feature. But that’s no problem at all, because the Inspector in Firefox directly informs about any event listener attached to an element. Yay!

Console

The major part of the video then is all about the console.

Logging

OK, this is no mystery: you can log stuff in your console. 🙂 For example, like so:

console.log( 'message' );

Interpolating Data in Messages

You can also log a message with placeholders for arbitrary data:

console.log( 'message with a %s', 'placeholder' );

Styling Messages

A special kind of formatting specifier is %c, and it allows to apply CSS to the message to be logged, like this:

console.log( '%cmessage with style', 'color: red; font-size: 24px; font-weight: 600' );

Warnings

You can log a warning message:

console.warning( 'warning message' );

Error Messages

Besides regular messages and warnings, there is also error messages:

console.error( 'error message' );

As you can see, Firefox does not include a stack trace.

Info Messages

Last but not least, you can also log some info message:

console.info( 'info message' );

Assertions

In case you want to log an error message only if some condition fails, you can use assertions. Here is a stupid example:

console.assert( false, 'expected false to be true' );

Clearing the Console

If you ever want to get rid of everything that lives in your console, you can clear it:

console.clear();

Wes thinks this is something that every experienced developer should do at the very bottom of your script files. 😉

In my opinion, real experts should rather do setTimeout( console.clear, 1000 );. 😀

Viewing DOM Elements

console.log() is able to process almost anything, so you can also log a DOM element:

console.log( document.querySelector( 'p' ) );

As you can see, this result in the DOM Element itself being logged, and you can inspect it just like from the Inspector.

But there is another way to dump a DOM element in the console, console.dir(), and it lets you examine all the things that live on the element. Like so:

console.dir( document.querySelector( 'p' ) );

Grouping Messages

It is should be possible to group output in the console, and such a group may either be expanded or collapsed by default.

dogs.forEach( ( dog ) => {
    console.groupCollapsed( dog.name );
    console.log( `This is ${dog.name}.` );
    console.log( `${dog.name} is ${dog.age} years old.` );
    console.log( `${dog.name} is ${Math.min( 2, dog.age ) * 10.5 + Math.max( 0, dog.age - 2 ) * 4} years old.` );
    console.groupEnd( dog.name );
} );

Counting

You can have as many independent counters as you can think of valid IDs. 🙂

console.count( 'counter' );
console.count( 'counter' );
console.count( 'counter' );

This can be useful when debugging something. If you want to know how often something gets called, iterated etc. just increment a dedicated counter, and you don’t need a real debugger at all.

Timing

It is also possible to time the execution of a particular function or task.

console.time( 'fetching' );
setTimeout( () => console.timeEnd( 'fetching' ), 1234 );

Tables

Last but not least, you can also display any tabular data in a real table layout:

console.table( dogs );

Live Demo

Want to see this in action? Well, here is a live demo. 🙂

Make sure to have a look at your console, though. 😉

Retrospection

There are quite a few differences in how browsers implement the individual features. The event listener thing in the Firefox Inspector is really cool. Not having a stack trace in warnings, and the poor implementation of the grouping functionality, however, are not so cool.

I knew about the different message types when logging, but not about formatting (i.e., placeholders and styling). As of ES6, you don’t really need formatting specifiers anymore—at least not for scalar values—and also, template strings allow for running arbitrary JavaScript, not just referencing a variable.

Also, a dog year is not worth seven years. While this is popular belief, it is a misbelief. The first two years in the life of a dog are worth 10.5 years each. Every other year counts as four years. 🙂

And You?

JavaScript 30 is free! So, unless you already did this on your own, what’s your reason not to? 🙂