@wb04307201/pretty-log

A frontend toolkit for beautifying console log output. It helps developers display log information in a cleaner, more readable format in the browser console.

简体中文 | English

Contributing

This project uses automated releases driven by git tags. See RELEASING.md for the tag workflow and the required repository secret.

Installation

npm install @wb04307201/pretty-log

Usage

import * as prettyLog from '@wb04307201/pretty-log';

// Info
prettyLog.info("Hello world!")
prettyLog.info("Custom Title", "Hello world!")

// Error
prettyLog.error("Hello world!")
prettyLog.error("Error Title", "Something went wrong!")

// Warning
prettyLog.warning("Hello world!")
prettyLog.warning("Warning Title", "Be careful!")

// Success
prettyLog.success("Hello world!")
prettyLog.success("Success Title", "Operation completed!")

// Debug
prettyLog.debug("Debug message")
prettyLog.debug("Debug Title", "Detailed debug data", {verbose: true})

// Rainbow
prettyLog.rainbow("Colorful rainbow text in the console")

// Group output, expanded by default
prettyLog.group("A Group", ["Item 1", "Item 2", "Item 3"])

// Group output, collapsed
prettyLog.group("A Collapsed Group", ["Item 1", "Item 2", "Item 3"], false)

// Table
prettyLog.table([{a: 1, b: 1, c: 1}, {a: 2, b: 2, c: 2}, {a: 3, b: 3, c: 3}])

// Timer
prettyLog.time('myTimer');
// Do some work...
setTimeout(() => {
    prettyLog.timeEnd('myTimer');
}, 2000); // 2000 ms = 2 seconds

// Image
prettyLog.picture("https://example.com/image.png", 0.2)

// JSON format
prettyLog.info({a: 100, b: {b1: 'one', b2: 'two'}, c: [5, 6, 7]})
prettyLog.info("JSON", {a: 100, b: {b1: 'one', b2: 'two'}, c: [5, 6, 7]})

Advanced Features

Log Level Filtering

// Only show warn and above (debug and info are filtered out)
prettyLog.setLogLevel('warn');
prettyLog.debug('will not show');
prettyLog.warning('will show');

// Levels: 'debug' < 'info' < 'warn' < 'error' < 'none'
prettyLog.setLogLevel('none');  // Disable all output

Emoji Prefix

prettyLog.showEmoji(true);
prettyLog.info("With emoji");   // ℹ️ Info ...
prettyLog.error("An error");    // ❌ Error ...
prettyLog.showEmoji(false);     // Disable

Timestamp

prettyLog.showTimestamp(true);
prettyLog.info("With timestamp");  // [14:32:05.123] Info ...

Custom Theme

prettyLog.setTheme({
  infoColor: '#00FF00',
  errorColor: '#FF0000',
  groupColor: '#FF00FF',
});

One-Shot Configuration

prettyLog.configure({
  logLevel: 'info',
  showEmoji: true,
  showTimestamp: true,
  theme: { infoColor: '#00FF00' },
});

Log History

// Get recent log entries (default buffer size: 200)
const history = prettyLog.getHistory();
console.log(JSON.stringify(history, null, 2));

// Adjust history size (set to 0 to disable).
// Illegal values are clamped rather than throwing, and existing
// entries are preserved (most recent kept when shrinking).
prettyLog.setHistorySize(500);

// Clear history
prettyLog.clearHistory();

Async Timer

timer ends the timer on both the resolve and the throw/reject path, and never swallows the original error.

// Sync work — logs immediately
const result = prettyLog.timer('parse', () => JSON.parse(raw));

// Async work — logs when the promise settles
await prettyLog.timer('fetch-user', () => fetch('/api/user').then(r => r.json()));

// Errors still end the timer and propagate to your caller
await prettyLog.timer('risky', () => Promise.reject(new Error('boom')));

Log Once

Useful for debug logs inside loops — the same key prints only once.

for (const item of items) {
  prettyLog.once('render', 'Component rendered', item.id);
}

prettyLog.clearOnce();  // allow all keys again

Call Counting

items.forEach(i => prettyLog.count('api-call'));

console.log(prettyLog.countSummary());  // { 'api-call': 42 }
prettyLog.clearCounters();

Prefixed Logger

Returns loggers that carry a fixed prefix while keeping the same level, theme and filtering.

const userLog = prettyLog.withPrefix('用户模块');
userLog.info('登录成功', { userId: 123 });
// [用户模块] 登录成功
// {"userId":123}

Assertions

Stays silent when the condition holds; on failure it logs via console.error (highlighted red in DevTools) and throws.

prettyLog.assert(user != null, 'user must not be null');

Custom Styles

prettyLog.setStyles({ borderRadius: '8px', padding: '3px 10px' });

// Pass undefined to restore a default
prettyLog.setStyles({ borderRadius: undefined });

Production Strip

Every logging API becomes a silent no-op when NODE_ENV=production, so debug calls can stay in the source without polluting production bundles.

// In production this prints nothing
prettyLog.info('this never shows up');

Note: timer still runs the function you give it in production — only the logging is suppressed.

Output