pretty-web-console

Pretty Web Console

Bored of console.log? It's time to prettify it!

Get Started

$ npm install --save pretty-web-console

You can then require or import it to get started. See Usage.

Although not recommended, a standalone lib is also provided, so you can choose to load it in a <script> tag. You can find it in your node_modules directory as pretty-web-console.lib.js.

Usage

Writing pretty logs is easy with the rich chaining api and/or config object.

Chaining

import pwc from 'pretty-web-console'

// configure your stylized loggers
const loggerA = pwc().size('large').weight('bold')
const loggerB = pwc().large().bold()

// log anything!
loggerA.log('hi')
loggerB.log('hi')

// you can even extend your loggers
loggerA.fantasy().underline().info('i am back')

Config

// pass in a config object
const logger = pwc({
  color: 'blue',
  weight: 'bold',
  size: 'large',
  decorate: 'linethrough'
})

// log it!
logger.log('hi')

// feel free to mix-and-match between different methods
pwc({ color: 'green' }).size('large').bold().log('hi again')

To go a step further, you can show logs for just certain log levels. You can even connect your own custom logger instead of the browser's default one if you want.

Properties

All properies below are available for chaining. But, only those marked with an asterisk * are supported by the config. These also accept css values, while the properties without an * don't take any arguments i.e. blue() and bold().

• blue, red, turquoise, aquamarine, etc for all web colors lowercased
• color*
• bold, lighter, bolder
• weight*
• small, medium, large
• size*
• underline, overline, linethrough
• decorate*
• arial, couriernew, georgia, timesnewroman, trebuchetms, verdana, serif, sansserif, monospace, cursive, fantasy
• family*
• italic, oblique
• style*
• capitalize, uppercase, lowercase
• transform*
• bgblue, bgred, bgturquoise, bgaquamarine etc for all web colors lowercased and prefixed with bg
• bg*
• shadow*
• padding*
• margin*
• css*

Examples

pwc().turquoise().bgred().info('turquoise info msg with red background')

pwc().decorate('uppercase').cursive().log('uppercased cursive msg')

pwc({ shadow: '4px 4px 5px green' }).large().error('large error msg with green shadow')

pwc({ weight: 'bold', color: '#00f' }).size(20).log('bold, blue, and 20px msg')

Log Levels

• .log()
• .debug()
• .info()
• .warn()
• .error()

You can configure pwc to output logs for certain levels. By default, the log level is a 0 which represents "log" or "debug". If you want to change this, you can set the log level on pwc before it is used.

pwc.level = 0   // 'log', 'debug' => show all logs

pwc.level = 1   // 'info' => show info, warn, and error logs

pwc.level = 2   // 'warn' => show warn and error logs

pwc.level = 3   // 'error' => show only error logs

pwc.level = -1  // 'none' => show no logs

Custom Logger

By default, the logger is the standard browser console's. But, you may pass in your own logger if you want.

For example, let's say you have a logger function named customWarnFn. You just need to pass it to the log function as the second argument i.e. pwc().blue().bold().underline().warn('hi', customWarnFn). This passes the message, a css styles object, and the log level as arguments to your custom logger.

The styles object for the example looks like this:

{
  color: 'blue',
  'font-weight': 'bold',
  'text-decoration': 'underline'
}

Enjoy!