Enhance Console Logs With Pure JavaScript – badgee.js

badgee.js is an add-on to the browser console, created to improve readability and flexibility. It provides the same API than your brower console, adding a few extra features. It just convert you default browser console into fancy with improved power. Work pretty well in Chrome, Firefox Web Console or Firebug and Safari desktop.


include the JavaScript file ‘badgee.umd.js’ on the webpage.

 <script src="build/badgee.umd.js"></script>

display very basic message in console.

badgee.log('Hello World');

A simple configuration object allows to:

  • enable/disable logs globally
  • enable/disable styled badges globally

Default configuration is: { enabled: true, styled: true }

  enabled: true,
  styled: false

Add custom badges to the console logs.

var myBadge = badgee.define('Badge Name', 'green');
myBadge.log('hello badge defined!');

You can define your own badge style by calling the style() method with a name and a list of properties.

badgee.style('super_important', {
  color          : 'white',
  background     : 'red',
  'font-size'    : '15px',
  'font-weight'  : 'bold',
  'border-radius': '2px',
  padding        : '1px 3px',
  margin         : '0 1px'

See live demo and download source code.


This awesome script developed by dharFr, Visit their official github repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.