NO console.log()

December 02, 2018

Although modern IDEs or code editors have made the life of JS developers so much better with their powerful built-in debugging tools, sometimes there’s still a need to drop in a quick console.log to print some stuff into the console to see what is going on. However, if you are only using console.log, then you have missed out on a lot of those other cool things the console can do!

Format Your Arrays as Tables

When dealing with objects inside arrays, console.logging them directly out can be a messy way to inspect things, especially if we have a huge array because everything is formatted vertically.

Luckily, we can print them out as tables simply with console.table!

Say we have an array of some network data objects, if console.log it out with Node, the output will be a tall text wall like this:

console.log(data);
// output:
[ { L2Protocol: 'Ether',
    SourceMACAddress: 'f1:cc:b8:59:44:1b',
    PacketID: 1,
    DestinationMACAddress: '31:4b:c2:00:00:0e' },
  { L2Protocol: 'Ether',
    SourceMACAddress: 'f1:cc:b8:59:44:1b',
    PacketID: 22,
    DestinationMACAddress: '31:4b:c2:00:00:0e' },
  { L2Protocol: 'Profinet',
    SourceMACAddress: '28:63:36:38:63:5d',
    PacketID: 46,
    DestinationMACAddress: '31:4b:c2:00:00:0e' },
  { L2Protocol: 'Ether',
    SourceMACAddress: 'f1:cc:b8:59:44:1b',
    PacketID: 114,
    DestinationMACAddress: '31:4b:c2:00:00:0e' } ]

With console.table however, the output will instead look like this:

console.table(data);
// output:
┌─────────┬────────────┬─────────────────────┬──────────┬───────────────────────┐
 (index) │ L2Protocol │  SourceMACAddress   │ PacketID │ DestinationMACAddress │
├─────────┼────────────┼─────────────────────┼──────────┼───────────────────────┤
│    0'Ether''f1:cc:b8:59:44:1b'1'31:4b:c2:00:00:0e'  │
│    1'Ether''f1:cc:b8:59:44:1b'22'31:4b:c2:00:00:0e'  │
│    2'Profinet''28:63:36:38:63:5d'46'31:4b:c2:00:00:0e'  │
│    3'Ether''f1:cc:b8:59:44:1b'114'31:4b:c2:00:00:0e'  │
└─────────┴────────────┴─────────────────────┴──────────┴───────────────────────┘

Super neat!

Custom Styling in the Console

Sometimes it’s necessary to console.log a lot of stuff, in this case, the good o’ black text on white background just makes parsing the information hard for our eyes. Fortunately, we can easily add some CSS styling to the log entries to spice things up in an otherwise monotone world!

We can simply add a %c to denote the start of a styled part of the log content, then pass the CSS rules into console.log as additional arguments, like below.

console.log('%cconsole.log can be fancy too', 'color: green; font-size: 25px;');
console.log('%cor... %ceven%cfancier', 'color: cornsilk; background: #5C323E; font-weight: bold; font-size: 20px;', 'color: floralwhite; background: lawngreen; font-size: 25px; margin: 4px;', 'border-style: dashed; border-radius: 10px; background: tomato; font-size: 30px; font-style: italic;');

console.log with styles
console.log with styles

Colored console.logs are also available in Node, but it’s not actually intended to be used for light debugging and CSS is apparently not supported. This Stack Overflow question gives a greater detail into how to add colors to the Node console.

List All Attributes and Properties of a DOM Element

When inspecting DOM elements, if we just use console.log to print out a node, it will be presented as an HTML-like tree. It’s very useful for us to see the structure of that element and its children, but not so much if we want to know what all the properties or methods of that DOM node are when we want to access them programmatically.

console.dir treats the input as an object and prints out everything that are available on it - also when it’s a DOM node. This is particularly handy when writing a web scraping script.

`console.dir` example
`console.dir` example

Note that this is a browser-only feature.

Collapsing Log Entries Like a Code Block in an Editor

Ever left too many console.log in your code at the same time and the console has become too clustered to see what’s actually going on? Well, we can group things up and make them collapse like a code block in a code editor!

There are 3 console methods to structure our “log blocks” - console.group to start a group, console.groupEnd to close up the group, and console.groupCollapsed to start a group but with it collapsed as default (the collapsed status can be toggled). We can also nest groups to create nice indentations.

console.group('Log Block Starts >');
    console.groupCollapsed('Collapsed Child Block Starts >');
        console.log('This is so cool!')
    console.groupEnd();
    console.group('Normal Child Block Starts >')
        console.log('The group above is collapsed though.')
    console.groupEnd();
console.groupEnd();

The result looks like this:

`console.group` example
`console.group` example

Note that this is also a browser-only feature.

Hope these console tricks can be helpful to you when debugging next time, happy coding!