Debugging with JavaScript console

Debugging is an essential part of programming. As a Developer I spent some of my time fixing bugs and problems.

Let's cover and share some tips and tricks for debugging with the JavaScript console object. Taking a look at the methods to get an in-depth knowledge of the debug process.

Assertions

console.assert()

console.assert(x > y, 'Error x is not bigger than y')

Use console.assert() to check if evaluated expression is false. You must pass a boolean assertion to the .assert() method.

Logging

There are a lot of methods to log information and values to the console.

console.trace()

console.trace('message', object)

Prints a stack trace. This is useful to see where a method call starts and his cycle.

console.table()

console.table([
  { name: 'carloscuesta.me', language: 'html' },
  { name: 'starterkit', language: 'javascript' },
  { name: 'generator-starterkit', language: 'javascript' },
])

Displays Object and Array data into a friendly tabular format.

console.log() console.error() console.warn()

console.info('This is just a message')
console.warn('This is a warning message')
console.error('This is an error message')

Displays an information, warning or error message to the console.

Timers

console.time() console.timeEnd()

console.time('timerLabel')
console.timeEnd('timerLabel') // => 9.15ms

Starts a timer with an associated label to track how long a process takes to complete.

Functions

monitor()

monitor(functionName)

Use the monitor() method to track function calls. Returns the name of the function called and the arguments.

Events

monitorEvents()

monitorEvents(object, ['event'])
monitorEvents(document.body, 'click')

Use the monitorEvents() method to listen for events on a specified object.

Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.