A Colorful Logger for the Browser

Introducing a colorful logger built for easing front-end development — logt

Features

Small library size - Only ~1.3KB gzipped!
Colorful labels to help distinguish logs by importance.
Log levels to hide less important log messages.
Show hidden messages programmatically to print logs hidden due log level.
Built with TypeScript for detailed type info and that sweet sweet autocomplete.

Installation

$ npm i logt -S

Usage

You can use this logger for your frontend projects. You can choose as an ES6 module or directly include the script in HTML.

As an ES6 module

import LogT from "logt";

const LOG_TAG = "sample tag";
const logger = new LogT("error");

logger.error(LOG_TAG, new Error("example error"));

Include in HTML

<script src="https://cdn.jsdelivr.net/gh/sidhantpanda/logt/dist/logt.min.js"></script>
<script>
var LOG_TAG = 'sample tag';
var logger = createLogger('error');

logger.error(LOG_TAG, new Error('example error'));
</script>

Peek into hidden logs

This feature allows to quickly see hidden logs in the developer tools without having to make code changes. The logger stores all hidden messages locally.

const logger = new LogT(0); // Only error logs will printed to console
logger.warn('TAG', 'warning message'); // Will not print anything to console
logger.info('TAG', 'info message'); // Will not print anything to console
logger.debug('TAG', 'debug message'); // Will not print anything to console
logger.silly('TAG', 'silly message'); // Will not print anything to console

logger.showHidden(1); // Will print the warning message
logger.showHidden(2); // Will print the info warning message
logger.showHidden(5); // Will print the debug as well as silly message

Check out the project on Github for more details documentation!

Blog