When trying to debug JavaScript code, the first thing popups to the mind is the console.log(). A well-known method that proven usefulness over the time. However, we are not limited to the log method. There are other methods more descriptive. We are going to talk about some of the console methods that are browser related. These methods are error, warn and info.

Using the Methods

Using those methods is not different than using the good old log method. The following example shows the usage of the all four methods compared and display the output.

console.log('This is a simple log message');
console.error('This is an ERROR message');
console.warn('This is a warning message');
console.info('This is informing message');

According to the browser that you are using, you might have a different style of each message. For Google Chome, the output should be similar to this:

Console Methods

The error message is in red and has "x" icon, warning in yellow with triangle and exclamation mark, and the info has a little "i" icon in blue next to it.

Note: The error message is treated exactly like a standard JavaScript error. You can expand it and read more about what caused the error (in this case, as the commands have been executed directly in the console, there is not much to show).

Why Using Them?

Fair question, why to use these methods where one can use console.log(). Well, there are multiple reasons.

In Chrome, you have a filtering functionality bundled with the console. By clicking that filter button, the DevTools console will filter the type of messages needed to be displayed.

Filtering Messages On Console

Another case where these messages could be helpful is while building a JavaScript library or framework. By using the warning or the error method, we could alarm the developer who is using the library/framework that a function has been deprecated or removed entirely.