Console API or How to write better logs in the JavaScript Web Application

Preface

I’ve started to create a JavaScript Web Application. It is a frontend of a Java Application. These are totally decoupled. It’s my first major experience of creating JavaScript application. During the development, I learned a lot about JavaScript language and its concepts. One of them was how to write better logs for debugging and finding clues of errors. I use log4J in Java backend application and I need an alternative for frontend JavaScript application.

Console API

I was familiar with console.log() but it wasn’t enough for logging all states. After searching for better solutions, I found out that there are several Console API for logging in JavaScript [1],[2],[3].

The Console API is non-standard. Do not use it on production sites facing the Web. It will not work for every user.

The console object provides access to the browser’s debugging console. The specifics of how it works vary from browser to browser, but there is a de facto set of features that are typically provided.

Methods

There are several methods for logging such as log(), debug() and etc. I mainly use some of them which I’m going introduce them.

console.log(object[, object, …])

Writes a message to the console. You may pass as many arguments as you’d like, and they will be joined together in a space-delimited line.
console.log('This is a sample log');

console.debug(object[, object, …])

Writes a message to the console, including a hyperlink to the line where it was called.
console.debug('I am debug message');

console.info(object[, object, …])

Writes a message to the console with the visual “info” icon and color coding and a hyperlink to the line where it was called.
console.info('I just want to share info!');

console.warn(object[, object, …])

Writes a message to the console with the visual “warning” icon and color coding and a hyperlink to the line where it was called.
console.warn('Be quite! Big brother is watching you!');

console.error(object[, object, …])

Writes a message to the console with the visual “error” icon and color coding and a hyperlink to the line where it was called.
console.error('Something goes wrong!');

console.assert(expression[, object, …])

Tests that an expression is true. If not, it will write a message to the console and throw an exception.
console.assert((2 + 3) === 5); // Assertation true console.assert((2 * 1 * 0) === 3, 'It should be 0!'); // Assertation faild

console.clear()

Clears the console.
console.clear();

console.dir(object)

Prints an interactive listing of all properties of the object.
console.dir(document.body);

All Console Web APIs in one place

I’ve created a simple reference of Console API in github. You can see them at saeidzebardast.github.io/all-in-one-console-api/.