Skip to content

September 8, 2015

Meaningful styles of messages in browser console

Messages in the console panel of a browser are really helpful for debugging of web applications. No reasons to outweigh the benefits of using these messages related to data or your code, they are obvious while you are working with it.

Did you know, that developers can use not only most popular log function ever: console.log('log');, with ordinar text style, but also a range of other functions.

For example in Google Chrome you will see different styles for each of this commands:

  •'info'); — information messages with blue circle with i letter inside
  • console.warn('warning'); — a yellow triangle with exclanation mark
  • console.debug('some debug information'); — blue text for displayed debug information
  • console.error('this was an error'); — red circle with cross inside and red text

You can test each of these styles hitting the ‘F12’ and copy-pasting those commands into console’s tab’s command line, to see each style feature.