Improve logging with DevTools console object

Every developer uses console.log() to debug in Chrome browser. However it may be difficult to locate your log messages in console window with lots of other messages.  For example:

console.log("event.key=" + event.key)

console.log("isHomeKey=" + isHomeKey)
console.log("isEndKey=" + isEndKey)

Separator

Traditionally we can add a separator to make us easier to locate what we want.

console.log("===========================")

console.log("event.key=" + event.key)
console.log("isHomeKey=" + isHomeKey)
console.log("isEndKey=" + isEndKey)
console.log("===========================")

CSS

Or we can use custom css to make the log messages stand out.  Notice the "%c" in the message as the placeholder of the css.

console.log("%cevent.key=" + event.key, "font-size:1.5em; color:red")

console.log("%cisHomekey=" + isHomekey, "font-size:1.5em; color:red")
console.log("%cisEndKey=" + isEndKey, "font-size:1.5em; color:red")

console.warn()

On the other hand, w can use console.warn() to log the messages. It is displayed with different background color.  We can also use the filter buttons to show warning message only.  Notice that we should use console.warn() in ad-hoc debug only and should not be used in production code for debug purpose.

console.warn("event.key=" + event.key)

console.warn("isHomeKey=" + isHomeKey)
console.warn("isEndKey=" + isEndKey)

Object

We can further simplify by code by creating a ad-hoc object.  Chrome can nicely display key-value pair.

console.warn({key:event.key, isHomeKey, isEndKey})

console.table()

console.table() is another powerful tool for logging. It displays the values in a nicely formatted table.

console.table({key:event.key, isHomeKey, isEndKey})

You can check out the Console API reference for other powerful functions of the console object.