Use [Caterpillar]( within Web Browsers! (even includes support for colors!)

npm install caterpillar-browser
3 downloads in the last week
35 downloads in the last month

Browser Transform for Caterpillar

Build Status NPM version Gittip donate button Flattr donate button PayPayl donate button

Use Caterpillar within Web Browsers! (even includes support for colors!)


Node, Browserify

  • Use: require('caterpillar-browser')
  • Install: npm install --save caterpillar-browser


  • Use: require('caterpillar-browser')
  • Install: ender add caterpillar-browser



// ====================================
// logger.js

// Logger
var logger = require('caterpillar').createLogger({level:7});
var output = logger

// Export
module.exports = {

// ====================================
// app.js

// Import
var logger = require('./logger')

// Log
var logLevel, _i;
for (logLevel = _i = 0; _i <= 7; logLevel = ++_i) {
    logger.log(logLevel, "this is log level " + logLevel);

Result in Google Chrome (also works in Firefox)

Browser API, extends caterpillar.Transform, which extends stream.Transform

new (require('caterpillar-browser').Browser)(config)
  • Methods
    • constructor(config?) create our new browser instance with the config, config is optional
    • pipe(child) pipe our stream to the child, also sync our config to it
    • setConfig(config) set the configuration and emit the config event
    • getConfig() get the configuration
    • format(entry) format the caterpillar human readable logger entry (returns an Array)
  • Configuration

    • write boolean, defaults to true, whether or not we should write directly to the browser's console
    • color boolean, defaults to true, set to false to turn off colors
    • styles objects of the level to color mapping, defaults to:

            red: {
                start: 31,
                end: 39,
                value: 'color:red'
            yellow: {
                start: 33,
                end: 39,
                value: 'color:orange'
            green: {
                start: 32,
                end: 39,
                value: 'color:green'
            bright: {
                start: 1,
                end: 22,
                value: 'font-weight:bold'
            dim: {
                start: 2,
                end: 22,
                value: 'color:lightGray'
            italic: {
                start: 3,
                end: 23,
                value: 'font-style:italic'
            underline: {
                start: 4,
                end: 24,
                value: 'text-decoration:underline'
  • Events

    • config(config) emitted once our configuration has updated


Discover the change history by heading on over to the file.



These amazing people are maintaining this project:


No sponsors yet! Will you be the first?

Gittip donate button Flattr donate button PayPayl donate button


These amazing people have contributed code to this project:

Become a contributor!


Licensed under the incredibly permissive MIT license

Copyright © 2013+ Bevry Pty Ltd (

npm loves you