Cool Console Commands

Well, here it is, the first blog post, even if it is just an old talk I gave at a San Diego JS' Fundamental JS event two years ago.

A few months before the talk, I was exploring the Chrome DevTools documentation and messing around with the console Web API. It was wild. I created a document noting things I'd like to keep for later reference.

...Which I honestly never used. However, I eventually came back to it while scrambling for topics of my talk and reformed some items into a small site you can check out here:

Cool Console Commands

For quick reference, here are my favorites:

console.assert

![console.assert example] (https://media.graphcms.com//VTeFLlPlRpKMW57fYc0k) Useful for quickly writing tiny unit tests, the assert method writes an error message to the console if the first argument loosely evaluates to false. If the assertion is true, nothing happens.

console.count

I’d argue you’re probably better off using the debugger, but the count method has its uses, like in loops, tracking recursion and function calls. It takes one argument, label, which prepends the count.

console.clear

Wipes the slate. You can also call clear().

console.dir

This is super useful when inspecting nodes and their properties. The dir method displays an interactive list of properties within a specified JavaScript object. The output is presented as a hierarchical listing with _disclosure triangles_ that let you see the contents of child objects.

console.error

Outputs an error message to the Web Console.

console.groups

The group methods have been surprisingly useful for tracking data flow, especially with React and Redux. You can even see them implemented under the hood in the popular package, Redux Logger or if you're using Apollo w/GraphQL, Apollo Link Logger . Learn more about Groups

console.info

Outputs an informational message to the Web Console. In Firefox and Chrome, a small "i" icon is displayed next to these items in the Web Console's log.

console.table

Great for small objects, the table method displays properties and indexes of Objects/Arrays in nice tabular format. This method takes one mandatory argument, which must be an array or an object, and one additional optional argument representing its label.

console.trace

The trace method prints a stack trace from the point where its called. Like the count method, it’s useful in loops, tracking recursion and function calls.

There are tons of other cool stuff you can do in Chrome, solely with console methods like measure execution times, initiate a JavaScript CPU profile, or even style the output with CSS. Note, the features vary from browser to browser.

If you'd like to see more, check out the Chrome Docs, the above-linked Cool Console Commands site, or the MDN Web Docs.

Thanks for reading!