Hello, my name is: Amy

Console, You're Pretty Awesome

Through the process of investigating a performance issue on a web app I'm working on, I ran across another way to use the console object to time bits of your code. The thought actually never crossed my mind that there might be other ways to use the console, so I started poking around to see if my bread and butter for error checking, console.log(), had any more friends I'd come to love.

I gathered up all these methods from MDN.

Basics are Important

My very first finding that I was doing console all wrong. Typically I'd log things out like so:

var apple = true;
var peach = false;

console.log(apple); //true
console.log(peach); //false

But As you can see this is super confusing to know what is what when they are logged out. My typical solution would be to do this:

console.log('apple: ' + apple); //'apple: true'
console.log('peach: ' + peach); //'peach: false'

This gets the job done, but wasn't helpful if I was trying to log out an object to see what I could use.

var fruits = {
  'apple': true,
  'peach': false
}
console.log('fruits: ' + fruits); //'fruits: [object Object]'

Uhhh... Not helpful. But the magical way to log things is with a , rather than the +. See here:

console.log('fruits', fruits);

the string text 'fruits' with the object data showing.

It's easier to know what you're looking at, and you can view data in its true state and not just force convert everything to a string.

Timing Activities

console.time()

Starts a timer with a name specified as an input parameter.

console.time('timeThis');
setTimeout(function(){
  //do some things
  console.timeEnd('timeThis');
}, 1000);

The console output for this is: timeThis: 1012.985ms

console.timeStamp()

Adds a marker to the browser's Timeline or Waterfall tool.

Fancy Output:

As I go through testing and building I wind up having so many console.log()'s sprinkled throughout the code that every so often I need to go on a deleting spree to avoid confusion. Turns out, there are some different ways these console messages can be output that might help clean up a bit of these messages so I can better know what the heck I'm lookng at. I'm not so certain I'd use these, but I might surprise myself.

console.log(), console.warn(), console.info()

Outputs a [general/warning/info] message.

All three console messages have black text. console.log() has no icon. console.warn() message is on a yellow background with an exclamation icon. console.info() has a blue 'i' icon.

Grouping Messages

Console.group(), Console.groupCollapsed(), Console.groupEnd()

Creates/Ends inline groups (collapsed or not), indenting all following output by another level.

console.group('fruitCalc');
  console.groupCollapsed('season');
    console.info('Apple Season: ', fruit.apples.season );
    console.info('Banana Season: ', fruit.bananas.season);
  console.groupEnd('season')
  console.log(isFruitEnough);
console.groupEnd('fruitCalc')

The above ouputs the below. I think there's a LOT of value in using console.groupCollapsed() for things that you need to reference, but don't want cluttering up your life.

Shows how group headings can be toggled to hide contents.

I see groups being used a good bit for consoleing things within functions to help tell where they came from rather than having to look up the code line number all the time. But it might wind up be more work than there is gain. TBD.

Tabular Data (!!)

console.table()

Displays tabular data as a table.

var fruit = {
  apples  : {
    color   : 'red',
    sweet   : true,
    season  : 'fall'
  },
  bananas : {
    color   : 'yellow',
    sweet   : true,
    season  : 'all'
  }
}
console.table(fruit);

This seems like it's going to be my new bff, as it takes the above data and outputs:

Displays a table of data

As opposed to what console.log() would do:

Data displayed as an object in the console

Oddly enough, there's a special method called console.dir() that does just what happens when you put in an object into console.log().

Perhaps XML Data too?

Haven't tried this one out yet because most of the data I work with is already in JSON format, but it's worth keeping on the back burner in the event I might find it handy.

Console.dirxml()

Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not.

Comments