{"id":22138536,"url":"https://github.com/bbmoz/pretty-web-console","last_synced_at":"2025-07-25T22:32:07.169Z","repository":{"id":57330185,"uuid":"87485402","full_name":"bbmoz/pretty-web-console","owner":"bbmoz","description":"Bored of console.log? It's time to prettify it!","archived":false,"fork":false,"pushed_at":"2018-03-01T15:33:27.000Z","size":1124,"stargazers_count":7,"open_issues_count":11,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-31T22:48:31.045Z","etag":null,"topics":["browser","color","console","debug","javascript","log","logger","output","prettier-logs","pretty","trace","web"],"latest_commit_sha":null,"homepage":"https://git.io/vS5F7","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bbmoz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-06T23:50:06.000Z","updated_at":"2019-01-31T09:51:28.000Z","dependencies_parsed_at":"2022-09-21T02:20:59.599Z","dependency_job_id":null,"html_url":"https://github.com/bbmoz/pretty-web-console","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbmoz%2Fpretty-web-console","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbmoz%2Fpretty-web-console/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbmoz%2Fpretty-web-console/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bbmoz%2Fpretty-web-console/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bbmoz","download_url":"https://codeload.github.com/bbmoz/pretty-web-console/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227621904,"owners_count":17795021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","color","console","debug","javascript","log","logger","output","prettier-logs","pretty","trace","web"],"created_at":"2024-12-01T20:10:29.738Z","updated_at":"2024-12-01T20:10:30.361Z","avatar_url":"https://github.com/bbmoz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pretty Web Console\n\n[![npm][npm]][npm-url]\n[![build][build]][build-url]\n[![climate][climate]][climate-url]\n[![deps][deps]][deps-url]\n[![license][license]][license-url]\n\n![logo][logo]\n\n\u003e Bored of console.log? It's time to prettify it!\n\n## Get Started\n\n```bash\n$ npm install --save pretty-web-console\n```\n\nYou can then `require` or `import` it to get started.\n\n*Although not recommended, a standalone lib is also provided, so you can choose to load it in a `\u003cscript\u003e` tag. You can find it in your node_modules directory as `pretty-web-console.lib.js`.*\n\n## Table of Contents\n1. [Usage](#usage)\n1. [Properties](#properties)\n1. [Examples](#examples)\n1. [Log Levels](#log-levels)\n1. [Custom Logger](#custom-logger)\n\n## Usage\n\nWriting pretty logs is easy with the rich [**chaining**](#chaining) api and/or [**config**](#config) object.\n\n### Chaining\n\n```javascript\nimport pwc from 'pretty-web-console'\n\n// configure your stylized loggers\nconst loggerA = pwc().size('large').weight('bold')\nconst loggerB = pwc().large().bold()\n\n// log anything!\nloggerA.log('hi')\nloggerB.log('hi')\n\n// you can even extend your loggers\nloggerA.fantasy().underline().info('i am back')\n```\n\n### Config\n\n```javascript\n// pass in a config object\nconst logger = pwc({\n  color: 'blue',\n  weight: 'bold',\n  size: 'large',\n  decorate: 'linethrough'\n})\n\n// log it!\nlogger.log('hi')\n\n// feel free to mix-and-match between different methods\npwc({ color: 'green' }).size('large').bold().log('hi again')\n```\n\n 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.\n\n## Properties\n\n![example][example]\n\nAll 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()`.\n\n* `blue`, `red`, `turquoise`, `aquamarine`, etc for [all web colors](https://en.wikipedia.org/wiki/Web_colors#X11_color_names) lowercased\n* color*\n* `bold`, `lighter`, `bolder`\n* weight*\n* `small`, `medium`, `large`\n* size*\n* `underline`, `overline`, `linethrough`\n* decorate*\n* `arial`, `couriernew`, `georgia`, `timesnewroman`, `trebuchetms`, `verdana`, `serif`, `sansserif`, `monospace`, `cursive`, `fantasy`\n* family*\n* `italic`, `oblique`\n* style*\n* `capitalize`, `uppercase`, `lowercase`\n* transform*\n* `bgblue`, `bgred`, `bgturquoise`, `bgaquamarine` etc for [all web colors](https://en.wikipedia.org/wiki/Web_colors#X11_color_names) lowercased and prefixed with `bg`\n* bg*\n* shadow*\n* padding*\n* margin*\n* css*\n\n## Examples\n\n```javascript\npwc().turquoise().bgred().info('turquoise info msg with red background')\n\npwc().decorate('uppercase').cursive().log('uppercased cursive msg')\n\npwc({ shadow: '4px 4px 5px green' }).large().error('large error msg with green shadow')\n\npwc({ weight: 'bold', color: '#00f' }).size(20).log('bold, blue, and 20px msg')\n\n// 'pwc' logo image!!\npwc()\n  .size(100)\n  .fantasy()\n  .bold()\n  .turquoise()\n  .bgpeachpuff()\n  .padding('15px 50px 2px')\n  .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%)')\n  .log('PWC')\n```\n\n## Log Levels\n\n* `.log()`\n* `.debug()`\n* `.info()`\n* `.warn()`\n* `.error()`\n\nYou 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`.\n\n```javascript\npwc.level = 0   // 'log', 'debug' =\u003e show all logs\n\npwc.level = 1   // 'info' =\u003e show info, warn, and error logs\n\npwc.level = 2   // 'warn' =\u003e show warn and error logs\n\npwc.level = 3   // 'error' =\u003e show only error logs\n\npwc.level = -1  // 'none' =\u003e show no logs\n```\n\n## Custom Logger\n\nBy default, the logger is the standard browser console's. But, you may pass in your own logger if you want.\n\nFor 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.\n\nThe styles object has key-value pairs of real css properties, like this:\n\n```javascript\n{\n  color: 'blue',\n  'font-weight': 'bold',\n  'text-decoration': 'underline'\n}\n```\n\nEnjoy!\n\n[![info][info]][info-url]\n\n[![love][love]][love-url]\n\n\n[npm]: https://badge.fury.io/js/pretty-web-console.svg\n[npm-url]: https://www.npmjs.com/package/pretty-web-console\n\n[build]: https://travis-ci.org/bbmoz/pretty-web-console.svg\n[build-url]: https://travis-ci.org/bbmoz/pretty-web-console\n\n[climate]: https://codeclimate.com/github/bbmoz/pretty-web-console/badges/gpa.svg\n[climate-url]: https://codeclimate.com/github/bbmoz/pretty-web-console\n\n[deps]: https://dependencyci.com/github/bbmoz/pretty-web-console/badge\n[deps-url]: https://dependencyci.com/github/bbmoz/pretty-web-console\n\n[license]: https://img.shields.io/badge/license-MIT-blue.svg\n[license-url]: https://github.com/bbmoz/pretty-web-console/blob/master/LICENSE\n\n[logo]: /media/pwc.png\n\n[example]: /media/example.png\n\n[info]: https://nodei.co/npm/pretty-web-console.png?compact=true\n[info-url]: https://www.npmjs.com/package/pretty-web-console\n\n[love]: http://forthebadge.com/images/badges/built-with-love.svg\n[love-url]: https://github.com/bbmoz/pretty-web-console\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbmoz%2Fpretty-web-console","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbbmoz%2Fpretty-web-console","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbbmoz%2Fpretty-web-console/lists"}