Git Product home page Git Product logo

bows's Introduction

Bows

Colors Safe, production happy, colourful logging - makes reading your logs much easier.

(Rain)bows makes logging debug messages in your apps much nicer.

  • It allows you to create custom loggers for each module in your app, that prefix all log messages with the name of the app, so that you can scan the messages more easily.
  • It colors the prefix differently and distinctly for each logger/module so that it's even easier to read.
  • It can be safely used in production, where logging will be disabled by default, so that you can leave log messages in your code.
  • Loggers safely wrap console.log, to maintain the line number from where they are called in the console output.

Example Output

Installation

If you are using browserify, you'll want something like:

npm install bows --save

If you use Bower:

bower install bows --save

Otherwise, download either bows.js or bows.min.js.

Features

  • Easily create prefixes for your logs, so that you can distinguish between logs from different parts of your app easily.
  • If supported, prefixes will be color coded for even easier identification.
  • Can be safely used in production, as logs will be disabled for your users, but can be enabled by you with a local storage flag.
  • Greppable logs by setting localStorage.debug = /Foo/ to only display logs for modules matching the regex to help you focus in development.
    • Invert regex to remove logs matching with: localStorage.debug ='!/Foo/
  • Customize the localStorage key by setting localStorage.andlogKey and you can use localStorage.<anyKeyYouWant> to set your log grepping.

Browser Support

  • Works in all reasonable browsers
  • Supports colors in chrome, opera, firefox >= 31.0, electron

Usage

  • Works great in browserify and the browser.

  • Creating a new logger:

    • Browserify: var log = require('bows')("My Module Name")
    • Browser: var log = bows("My Module Name")
  • Then using it is easy:

    • log("Module loaded") //-> "My Module Name | Module Loaded"
    • log("Did something") //-> "My Module Name | Did something"
  • Typically each seperate module/view/etc in your app would create it's own logger. It will be assigned it's own color to make it easy to spot logs from different modules.

  • You can pass additional arguments to bows which will be automatically prepended to each message, e.g.:

    var log = bows("My App", "[ChuckNorris]");
    log("Kicks ass!");
    //outputs:
    //My App         | [ChuckNorris] Kicks ass!
  • Logging is disabled by default. To enable logging, set localStorage.debug = true in your console and refresh the page.

  • To disable logging again, you must do delete localStorage.debug (localStorage.debug = false will not work).

  • You can leave the code in in production, and log() will just safely no-op unless localStorage.debug is set.

  • Where colors are not supported, bows will just log plain text, but still with the module prefix.

    • If you wish to manually disable colors in an environment because detection is incorrect, set localStorage.debugColors = false, to reenable delete localStorage.debugColors.

Example

  //Should be set in your console to see messages
  localStorage.debug = true
  //Configure the max length of module names (optional)
  bows.config({ padLength: 10 })

  var logger1 = bows('Module 1')
  var logger2 = bows('Module 2')
  var logger3 = bows('Module 3')

  logger1("We started up")
  logger2("We did something too")
  logger3("I'm here")
  logger3("I'm still here")
  logger2("I'm tired")
  logger1("We're done here")

Result:

Example Output

Test

Status: Build Status

This project uses phantomjs for tests. To run the tests install the development dependencies and then run:

npm test

New tests

Add a file in test, refer to enabled.html/disabled.html, then add the script to the array in test/index.js.

License & Credits

MIT

Copyright @philip_roberts / latentflip.com.

With contributions from:

Bows depends on andlog, a nice little logging module by @HenrikJoreteg.

Contributing

Please feel free to raise issues, or make contributions:

git clone https://github.com/latentflip/bows.git
cd bows
npm install #install dependencies
#edit bows.js
npm test
npm run build.js #build dist/bows.js and dist/bows.min.js, also done by `npm test`

bows's People

Contributors

creynders avatar d-simon avatar jones-s avatar latentflip avatar lloydwatkin avatar nicolasartman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

bows's Issues

Consider prefixing localStorage key

Not that it would cause any problems per se, but it might be best to set localStorage.bowsDebug to avoid colliding with the more generic localStorage.debug.

Great module, btw. Really enjoying it.

Missing comma causes issues with webpack + babel-loader

When using webpack and babel-loader the missing comma in bows.js is causing an issue.

The code:

  var inNode = typeof window === 'undefined',
      ls = !inNode && window.localStorage,
      debugKey = ls.andlogKey || 'debug',
      debug = ls[debugKey],
      logger = require('andlog'),
      bind = Function.prototype.bind,
      hue = 0,
      padLength = 15,
      noop = function() {},
      colorsSupported = ls.debugColors || checkColorSupport(),
      bows = null,
      debugRegex = null,
      invertRegex = false
      moduleColorsMap = {};

transforms to

  var inNode = typeof window === 'undefined',
      ls = !inNode && window.localStorage,
      debugKey = ls.andlogKey || 'debug',
      debug = ls[debugKey],
      logger = require('andlog'),
      bind = Function.prototype.bind,
      hue = 0,
      padLength = 15,
      noop = function() {},
      colorsSupported = ls.debugColors || checkColorSupport(),
      bows = null,
      debugRegex = null,
      invertRegex = false;
      moduleColorsMap = {};

Causing an "Uncaught ReferenceError: moduleColorsMap is not defined"
there should be a comma after invertRegex = false

Allowing multiple arguments to be passed to log function.

The current implementation of console.log allows you to pass it many arguments that you may wish to log...

console.log(string, array, object);

This is really nice because it lets you log many "types" in one function call. It also prevents you from needing to concatenate strings. I just thought it might be nice to have on the roadmap for this project... Which is really great as it stands!

[Suggestion] Debug = false

I'm using this awesome logger and then I realised that I cannot disable the logger setting the flag localStorage.debug to false. After the first time you set up this flag to true it'll remain until you clear your localStorage so, I think, that would be nice that the false value just run a simple localStorage.removeItem('debug').

Just saying, nice job by the way.

Cannot read property 'andlogKey' of null

In

bows/bows.js

Line 29 in 334d8a6

ls = !inNode && window.localStorage,

ls can be null. So then the next line throws an exception like Cannot read property 'andlogKey' of null
We are seeing this in Android devices.

This line may need to be something like

debugKey = (ls && ls.andlogKey) || 'debug',

Thanks

Question: enable specific logs

I'm curious if there's a way to enable specific logs rather than all logging.

for example:

var bows = require('bows');
var personLogs = bows('person');
var companyLogs = bows('company')

Is there a way to specify that I only want to see company logs and not person logs? In the browser I can filter of course, but I'm looking for a way to do this in node. the npm debug package allows me to pass in --debug='company' for example, is there anything like that in bows?

Update repo tags to use with Bower

Do you think it would be possible to tag (at least the latest version 0.3.0) in the repo?

This would allow, among other things, to install with Bower, or even do something like:

curl -o vendor/bows.js https://raw.github.com/latentflip/bows/0.3.0/dist/bows.js

Thanks!

Browser support

Hi, I m evaluating console wrapper scripts, and I need the exact line numbers to be logged in console, instead of some line number of wrapper library code. This 'bows' seems logging correct line numbers.

But, can someone clarify the browser support? Readme says 'Works in all reasonable browsers', which is not clear.

In IE8, I m getting below error: (via IE11, document mode emulation)
(I m using Windows Pro 8.1, IE 11)

SCRIPT445: Object doesn't support this action
File: bows.js, Line: 57, Column: 7

Line #57:

logfn = logger.log.bind(logger, msg);

Thanks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.