https://github.com/bbmoz/pretty-web-console
Bored of console.log? It's time to prettify it!
https://github.com/bbmoz/pretty-web-console
browser color console debug javascript log logger output prettier-logs pretty trace web
Last synced: 3 months ago
JSON representation
Bored of console.log? It's time to prettify it!
- Host: GitHub
- URL: https://github.com/bbmoz/pretty-web-console
- Owner: bbmoz
- License: mit
- Created: 2017-04-06T23:50:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-01T15:33:27.000Z (over 7 years ago)
- Last Synced: 2024-08-31T22:48:31.045Z (about 1 year ago)
- Topics: browser, color, console, debug, javascript, log, logger, output, prettier-logs, pretty, trace, web
- Language: JavaScript
- Homepage: https://git.io/vS5F7
- Size: 1.07 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Pretty Web Console
[![npm][npm]][npm-url]
[![build][build]][build-url]
[![climate][climate]][climate-url]
[![deps][deps]][deps-url]
[![license][license]][license-url]
![logo][logo]
> Bored of console.log? It's time to prettify it!
## Get Started
```bash
$ npm install --save pretty-web-console
```
You can then `require` or `import` it to get started.
*Although not recommended, a standalone lib is also provided, so you can choose to load it in a `` tag. You can find it in your node_modules directory as `pretty-web-console.lib.js`.*
## Table of Contents
1. [Usage](#usage)
1. [Properties](#properties)
1. [Examples](#examples)
1. [Log Levels](#log-levels)
1. [Custom Logger](#custom-logger)
## Usage
Writing pretty logs is easy with the rich [**chaining**](#chaining) api and/or [**config**](#config) object.
### Chaining
```javascript
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
```javascript
// 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](#log-levels). You can even connect your own [custom logger](#custom-logger) instead of the browser's default one if you want.
## Properties
![example][example]
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](https://en.wikipedia.org/wiki/Web_colors#X11_color_names) 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](https://en.wikipedia.org/wiki/Web_colors#X11_color_names) lowercased and prefixed with `bg`
* bg*
* shadow*
* padding*
* margin*
* css*
## Examples
```javascript
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')
// 'pwc' logo image!!
pwc()
.size(100)
.fantasy()
.bold()
.turquoise()
.bgpeachpuff()
.padding('15px 50px 2px')
.shadow('0px 2px hsl(2.13, 50%, 50%), 1px 3px hsl(4.27, 100%, 50%), 2px 4px hsl(8.75, 100%, 50%), 3px 5px hsl(17.5, 100%, 50%), 4px 6px hsl(25, 100%, 50%), 5px 7px hsl(50, 100%, 50%), 6px 8px hsl(100, 100%, 50%), 7px 9px hsl(600, 20%, 80%)')
.log('PWC')
```
## 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 outputs all logs. If you want to change this, you can set the log level on `pwc`.
```javascript
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 has key-value pairs of real css properties, like this:
```javascript
{
color: 'blue',
'font-weight': 'bold',
'text-decoration': 'underline'
}
```
Enjoy!
[![info][info]][info-url]
[![love][love]][love-url]
[npm]: https://badge.fury.io/js/pretty-web-console.svg
[npm-url]: https://www.npmjs.com/package/pretty-web-console
[build]: https://travis-ci.org/bbmoz/pretty-web-console.svg
[build-url]: https://travis-ci.org/bbmoz/pretty-web-console
[climate]: https://codeclimate.com/github/bbmoz/pretty-web-console/badges/gpa.svg
[climate-url]: https://codeclimate.com/github/bbmoz/pretty-web-console
[deps]: https://dependencyci.com/github/bbmoz/pretty-web-console/badge
[deps-url]: https://dependencyci.com/github/bbmoz/pretty-web-console
[license]: https://img.shields.io/badge/license-MIT-blue.svg
[license-url]: https://github.com/bbmoz/pretty-web-console/blob/master/LICENSE
[logo]: /media/pwc.png
[example]: /media/example.png
[info]: https://nodei.co/npm/pretty-web-console.png?compact=true
[info-url]: https://www.npmjs.com/package/pretty-web-console
[love]: http://forthebadge.com/images/badges/built-with-love.svg
[love-url]: https://github.com/bbmoz/pretty-web-console