Debug Web

NPM package for browser debugging with customizable logging levels (log, warn, error, debug).
Lightweight and easy to use.

Features:

• No dependencies — pure TypeScript only;
• Size ~3.5 kB — minimal impact on your bundle;
• SonarQube A Rating — highest level of code quality and reliability;
• Console output styling — color formatting for quick identification;
• Global storage — access debug data via window;
• Flexible configuration — logging levels, styles, aliases, inheritance support.

• Installation
• Log levels
• Options
• API
  • createDebug
  • Logging methods
  • Data handling
  • Level management
• Debug data
• Support
• License

English, Español, Deutsch, 中文, Русский

npm install debug-web

yarn add debug-web

Priority (from lowest to highest):

1. debug (0) — debug information (console.debug);
2. log (1) — basic messages (console.log)
3. info (2) — informational messages (console.info)
4. warn (3) — warnings (console.warn)
5. error (4) — errors (console.error)

ℹ️ Custom levels: any string values (e.g., success, focus) will be processed with specific behavior:

• Regular custom levels (without underscore prefix) use the info level
• Levels starting with underscore (e.g., _info, _error) use the debug level Both can have their own styles.

type DebugLogLevel = 'debug' | 'log' | 'info' | 'success' | 'warn' | 'error' | string;

d → debug, l → log, i → info, w → warn, e → error

// debug.ts
import { DebugWeb } from 'debug-web';

export const debug = new DebugWeb({
  app: 'my-app',
  level: process.env.NODE_ENV === 'development' ? 'log' : 'error',
  data: { version: APP_VERSION },
  alias: { s: 'success', f: 'focus' },
  local: true,
});

Creates a proxy with aliases and custom level support.

<T extends typeof DebugWeb>(options?: CreateDebugOptions, DebugClass?: T) => CustomLogLevels & InstanceType<T>;

type DebugWebData = Record<string, unknown>

type DumpOptions = {
  level?: DebugLogLevel;
  title?: string | ((data: DebugWebData) => string);
  open?: boolean;
}

type DebugWebStyle = Record<DebugLogLevel, string | undefined>

Save any data and view it in the console:

debug.set({ error: null, user: { id: 1, name: 'John' } });

Data is accessible via window[prop] (default is debug). Type into the browser console:

debug // { error: null, user: {...}, setLevel: f }
debug.setLevel() // change logging level

• Saving to file
• Saving history

If you find this library useful, consider supporting its development:

• Patreon
• Boosty

MIT © Karlen Pireverdiev

• Changelog
• Source Code
• Bug Reports
• NPM Package