A custom logger for angular with color coding and support
0 people use it
Submitted by: 294948?v=3 IamAdamJowett


A custom logger for angular with color coding (in Chrome, plain in other browsers including Internet Explorer) and also with remote debugging options via the service.

The benefits of using this logger instead of vanilla console.log outputs is readability, extra information by default and the ability to turn all debugging on or off via Logger.debug = false or Logger.debug = true;

The exception to the above are errors and warnings which are always outputted to the console.

There are options to show the full stack in an output as well as whether to expand and print out objects by default on a per call basis.

As an example, here is a screenshot showing some of the different types of Logger method outputs:

browser console


There are two easy ways to install the Logger service:

With Bower

To install via Bower, run:

Manual Installation

Download the logger.service.js file, and include it in your index.html file with something like:

Also be sure to include the module in your app.js file with:


All Logger methods take the same parameters, all if which are option except for 'prepend', which if it is the only parameter passed, turns into the log message:


  • prepend - A string to prepend your output with, useful when labelling output of an object such as Logger.log('myObj: ', myObj);
  • msg - The main output string (if prepend is not passed, then prepend becomes the same as this). Can be of any type.
  • fullStack - A boolean indicating whether to output the entire stack trace (if it is gettable in the browser) for more detailed debugging (default false)
  • expand - A boolean indicating whether to expand objects by default via JSON.stringify (default false)



logger-max has been designed for the Chome debugger, but will work in all major browsers. The colouring features at the moment are a Chrome only feature, with other browsers degrading gracefully depending on available features.

Module types

If you follow the naming convention of foo.controller.js or bar.directive.js for your different angular module types, logger-max will pick this up and output them in square brackets after the log type:

angular module

Logging to the service

Integration into the remote logging service at is available by default. To enable this feature, simply go to the website and follow their "How to install" instructions.

angular-logger-max will automatically look to see if the library has been included, and if so, will log out to both the local console, and to the console you have set up.

An example output looks something like this in the console: output

When is included, you will get duplicate logs in your browser console, to clean this up, you can filter by [#] to show only logs:


comments powered by Disqus
This page was last updated about 3 years ago.