Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sidhantpanda/logt
🖥️ A colourful logger for the browser
https://github.com/sidhantpanda/logt
color console frontend frontend-app javascript log logger loglevel typescript
Last synced: about 1 month ago
JSON representation
🖥️ A colourful logger for the browser
- Host: GitHub
- URL: https://github.com/sidhantpanda/logt
- Owner: sidhantpanda
- License: mit
- Created: 2019-09-23T17:56:02.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T02:42:53.000Z (12 months ago)
- Last Synced: 2024-10-23T08:16:59.507Z (about 2 months ago)
- Topics: color, console, frontend, frontend-app, javascript, log, logger, loglevel, typescript
- Language: TypeScript
- Homepage: https://sidhantpanda.github.io/logt/dist/
- Size: 2.6 MB
- Stars: 193
- Watchers: 3
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - sidhantpanda/logt - 🖥️ A colourful logger for the browser (TypeScript)
README
# LogT
🖥️ A colorful logger for the browser
## See it in action
Demo -
https://sidhantpanda.github.io/logt/dist/
## Features
- **Small library size** - Only ~1.45KB gzipped!
- **Colorful labels** to help distinguish logs by importance.
- **[Override default console methods](#readconsole)** to use custom logger instead, anywhere on the web page
- **[Log levels](#logger-initialization)** to hide less important log messages.
- **[Show hidden messages programmatically](#showhiddenloglevel--1--0--1--2--3--4--5--none--error--warn--info--verbose--debug--silly)** 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
Create a file in your project called `logger.js` or `logger.ts`
```typescript
import LogT from 'logt';
const LOG_TAG = 'sample tag';
let logger;
if (process.env.NODE_ENV === 'production') {
logger = new LogT('error'); // or logger = new LogT("none");
} else {
logger = new LogT('silly');
}
// See documentation for `readConsole()` for usage
// uncomment following line if you want to override default console methods
// logger.readConsole();
logger.error(LOG_TAG, new Error('example error'));
export default logger;
```
#### Include in HTML
```javascript
var LOG_TAG = 'sample tag';
var logger = createLogger('error');
// See documentation for `readConsole()` for usage
// uncomment following line if you want to override default console methods
// logger.readConsole();
logger.error(LOG_TAG, new Error('example error'));
```
## Documentation
#### Logger initialization
```typescript
import LogT from 'logt';
let logger;
// Available log levels - -1 | 0 | 1 | 2 | 3 | 4 | 5 | 'none' | 'error' | 'warn' | 'info' | 'verbose' | 'debug' | 'silly';
// noneLogger will print nothing
noneLogger = new LogT(-1); // or
noneLogger = new LogT('none');
// if included via HTML script
noneLogger = createLogger(-1); // or
noneLogger = createLogger('none');
// errorLogger will only error messages
errorLogger = new LogT(0); // or
errorLogger = new LogT('error');
// if included via HTML script
errorLogger = createLogger(0); // or
errorLogger = createLogger('error');
// sillyLogger will print all messages
sillyLogger = new LogT(5); // or
sillyLogger = new LogT('silly');
// if included via HTML script
sillyLogger = createLogger(5); // or
sillyLogger = createLogger('silly');
```
If any other value is supplied to the constructor, a default value of `none` is used.
### APIs
#### `error(logTag: string, message: any, ...rest: any[])`
##### Parameters
- `logTag` - A log tag to identify the message and point to source of the message.
- `message` - The error log message
- `...rest` - Any additional arguments to be passed onto `console.error`
#### `warn(logTag: string, message: any, ...rest: any[])`
##### Parameters
- `logTag` - A log tag to identify the message and point to source of the message.
- `message` - The warning log message
- `...rest` - Any additional arguments to be passed onto `console.warn`
#### `info(logTag: string, message: any, ...rest: any[])`
##### Parameters
- `logTag` - A log tag to identify the message and point to source of the message.
- `message` - The info log message
- `...rest` - Any additional arguments to be passed onto `console.info`
#### `verbose(logTag: string, message: any, ...rest: any[])`
##### Parameters
- `logTag` - A log tag to identify the message and point to source of the message.
- `message` - The verbose log message
- `...rest` - Any additional arguments to be passed onto `console.log`
#### `debug(logTag: string, message: any, ...rest: any[])`
##### Parameters
- `logTag` - A log tag to identify the message and point to source of the message.
- `message` - The debug log message
- `...rest` - Any additional arguments to be passed onto `console.log`
#### `silly(logTag: string, message: any, ...rest: any[])`
##### Parameters
- `logTag` - A log tag to identify the message and point to source of the message.
- `message` - The silly log message
- `...rest` - Any additional arguments to be passed onto `console.log`
#### `getLogLevel(): number`
Returns the logger instance's log level in numeric form;
#### `setLogLevel(logLevel: string | number)`
Update a logger instance's logLevel dynamically later.
##### Parameters
- `logLevel` - New logLevel for the instance. Values: -1 | 0 | 1 | 2 | 3 | 4 | 5 | 'none' | 'error' | 'warn' | 'info' | 'verbose' | 'debug' | 'silly'
#### `showHidden(logLevel: -1 | 0 | 1 | 2 | 3 | 4 | 5 | 'none' | 'error' | 'warn' | 'info' | 'verbose' | 'debug' | 'silly')`
Show log messages hidden by the logger. Only logs equal or above `logLevel` will be shown.
##### Parameters
- `logLevel` - Log level for which logs are to be shown
##### Example
```typescript
const logger = new LogT(0);
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 message
logger.showHidden(5); // Will print the debug as well as silly message
```
#### `readConsole()`
Replace default `console.error`, `console.warn`, `console.info`, `console.log` implementation with `logt` logger.
##### Example
```typescript
const logger = new LogT(0);
logger.readConsole();
console.error(new Error('test error')); // will be same as logger.error('console', new Error('test error'));
console.warn('warn message'); // will be same as logger.warn('console', 'warn message');
console.log('info message'); // will be same as logger.info('console', 'info message');
console.log('log message'); // will be same as logger.debug('console', 'log message');
```
## Changelog
### v1.5.0
- Deprecate `image()` method. Will be removed in next major release. Logging images is no longer supported by Chromme.
### v1.4.0
- Added `image()` method
### v1.2.0
- [Added `readConsole()` method](#readconsole)
## Roadmap
Checkout the [project page](https://github.com/sidhantpanda/logt/projects/1) for details about future development.