Pretty-print utility logger for browsers.

@evilkiwi/logger provides a small interface on top of the existing console browser API, adding:

• Automatic code highlighting via `template literal` syntax.
• Instanced and side-effect-free loggers.
• Enable/disable logging at runtime.
• High-precision timestamps.
• Customizeable CSS styling.
• Zero-dependencies.

Installation

npm install @evilkiwi/logger

Usage

See the example folder for a working example.

import { createLogger } from '@evilkiwi/logger';

const logger = createLogger({
  // Optional - a prefix to prepend to all messages from this logger.
  name: 'my-logger',

  // Optional - a color to use for the `name` prefix, can be a hex string or a number (i.e. 0xff0000).
  color: '#FF0000',

  // Optional - a set of CSS styles to use for the logger, or `false` to disable styling. Will default to baked-in styles.
  styles: false,
});

logger.debug('hello world!');

Customizing Styles

The styles option when creating a logger can be used to customize the CSS styles used for the logger, or to disable styling entirely (useful for environments like Capacitor, where the styling floods things like Xcode debugger).

import { createLogger, styles } from '@evilkiwi/logger';

const logger = createLogger({
  styles: {
    // Override the base styles.
    base: ['font-size: 20px;', 'font-weight: bold;', 'font-family: \'Comic Sans\';'],

    // Customize the code styling, including the baked-in styles.
    code: [...styles.code, 'font-size: 10px;', 'font-style: italic;'],
  },
});

Supported Methods

The logger attempts to emulate the console API as closely as possible - if there's anything missing that you'd like to see, please open an issue or PR!

• debug
• log
• info
• warn
• error
• group
• groupCollapsed
• groupEnd

Grouping

The group and groupCollapsed methods are used to group messages together, and can be used to create collapsible sections in the console. @evilkiwi/logger supports these methods as intended (via calling groupEnd) - but also provides an optional context closure, which will automatically call groupEnd.

import { createLogger } from '@evilkiwi/logger';

const logger = createLogger();

logger.group('hello world', () => {
  logger.info('nested info message');
  logger.debug('nested debug message');
});

// or

logger.group('hello world 2');
logger.info('nested info message');
logger.debug('nested debug message');
logger.groupEnd();