Console Log Levels
Greetings, friends! Today, I will discuss different log levels you may see in the console from within your browser. I will talk about the differences between
console.debug. For this tutorial, I will use the Google Chrome browser, but log levels apply to other browsers such as Firefox and Safari.
console method is assigned a severity level or log level. In Google Chrome, log levels include
console methods won't belong to any of these four log levels, since they may not log anything to the console. Below is a table that displays each console method available in Google Chrome's Console API and the corresponding log level.
In Google Chrome, you can open up the Chrome DevTools console using the keyboard shortcut
Option + Command + J on a Mac or
Ctrl + Shift + J on Windows. By default, Google Chrome will show you only three log levels:
Error. If you click on the "Log Levels" dropdown, you can see which log levels are shown or hidden. A checkmark next to a log level indicates that anything logged to the console that corresponds to that log level will be visible.
Let's look at an example. Copy the following code and paste it into the console.
console.log('Console.log: ' + 'I am in the Info log level');
console.debug('Console.debug: ' + 'I am in the Verbose log level');
console.warn('Console.warn: ' + 'I am in the Warning log level');
console.info('Console.info: ' + 'I am in the Info log level');
console.error('Console.error: ' + 'I am in the Error log level');
In Google Chrome, the warning messages are highlighted in yellow, and the error messages are highlighted in red. Notice that both
console.info belong to the
Info log level.
Looks like we're still missing the
console.debug statement. By default, Google Chrome will hide the
Verbose log level. If you click on the "Log Levels" dropdown and display the
Verbose log level, then you'll see all messages logged from the
console.debug method. The text in this log level will be colored blue.
In Google Chrome, the
console.info message is actually identical to
console.log. In Firefox and Safari, a small "i" icon is displayed next to the
console.info. Below is a screenshot of Safari's console.
Each log level helps organize your logs, so they can convey information about your code after it runs in the browser. Authors of code libraries will generally use these log levels to indicate the severity of a log. For example, the library author could display an error when a dependency is missing or if you ran a function incorrectly. They could display warnings when your package needs updated, or if there's a performance issue. The
console.debug method is rarely used, but it could be useful for displaying very verbose messages with detailed descriptions. Since Google Chrome groups them in a different category, it could be useful for further organization. It's up to you to decide which one should be displayed to the user as you're writing your code.