Browser Logging Tool

Browser logging, probably done wrong ¯\_(ツ)_/¯

Zero dependancy, simple to use, and chainable browser logger, with some extra handy utilities.

Installation

$ npm i --save @devanjs/log

Usage

Basic

import { Log } from "@devanjs/log";

Log.info('Standard Console.info');
Log.warn('Standard Console.warn');
Log.error('Standard Console.error');

Colors

import { Log } from "@devanjs/log";

Log.red('Red').info();
Log.pink('Pink').info();
Log.purple('Purple').info();
Log.deepPurple('Deep Purple').info();
Log.indigo('Indigo').info();
Log.blue('Blue').info();
Log.lightBlue('Light Blue').info();
Log.cyan('Cyan').info();
Log.teal('Teal').info();
Log.green('Green').info();
Log.lightGreen('Light Green').info();
Log.lime('Lime').info();
Log.yellow('Yellow').info();
Log.amber('Amber').info();
Log.orange('Orange').info();
Log.deepOrange('Deep Orange').info();

Chainable

Fully chainable structure.

import { Log } from "@devanjs/log";

/**
 * All methods are chainable, with each chain ending in:
 * .info(...)
 * .warn(...)
 * .error(...)
 */
Log.red('Red').info('FooBar');
Log.red('Red').green('Green').blue('Blue').info();
Log.red('Red').text('FooBar').green('Green').blue('Blue').info();
Log.red('Red').space().green('Green').blue('Blue').info();

Groups

Support for console groups, while still maintaining chains and colors.

import { Log } from "@devanjs/log";

/**
 * Automatic grouping using callback contents.
 */
Log.green('Green').group('Group', () => {
  Log.info('Automatic group');
});

/**
 * Manual grouping without using the callback.
 * (Requires groupEnd to be called)
 */
Log.blue('Blue').group('Group');
Log.info('Manual Group');
Log.groupEnd();

Defaults

Allows logs to be changed globally to avoid repeated calls in each use case. For example ifDevelopment, can be applied globally instead of being on every log.

import { Log } from "@devanjs/log";

/**
 * Global defaults to apply to all non tagged logs.
 */
LogConfig.defaults((log) => log.ifDevelopment().blue('Dev Only'));

Log.info('Global Default');

/**
 * Tag defaults to apply to all tagged logs with same name.
 */
LogConfig.defaults('foobar', (log) => {
  return log
    .if(true)
    .red('Foobar');
});

/**
 * Tagged logs will not get global defaults applied.
 */
Log.tag('foobar').info('Tag Default');

Taps

Simple value wrapper that logs and returns input for easy logging of values in large chains or call stacks.

import { Log } from "@devanjs/log";

const foo = () => 'Hello There!';
const bar = (v: string) => v === 'Hello There!';

/**
 * Basic Taps
 */
bar(Log.tap(foo()));
bar(Log.red('Tap').tap(foo()));

/**
 * With custom callback
 */
bar(Log.tap(foo(), (v) => Log.red('Tap').info(v)));

Contributing

Uses UID and GID to avoid permissions issues

$ export UID
$ export GID

Npm

$ docker-compose run node npm <command>

Dev Server

$ docker-compose up