slogger-js

logger

☕ Logging in JavaScript is easy but with logger, it's like logging with espresso shots.
No more console.log() spam. Just slog.log(), slog.error(), and chill.

logger is a lightweight, vanilla JavaScript logging plugin that makes console logging cleaner and easier. It provides short method names (slog.log, slog.error, slog.info), automatic message truncation, log level control, pretty printing for objects/arrays, custom tags, grouping support, and color-coded output all optimized for dark mode themes.

🌟 Features

• ✅ Short logging methods: log, error, info
• ✂️ Auto-truncates long messages (default: 100 characters) with toggle on/off
• 🎨 Color-coded console output (dark mode–friendly)
• 🕒 Optional timestamps
• 🔇 Enable/disable logging at runtime
• 🎚 Log level filtering: none, error, info, log, all
• 🏷️ Custom tags/prefixes support (e.g. [LOG] [DB] message)
• 🔍 Pretty printing for objects and arrays with [TYPE] label
• 🗂 Grouping support (group, groupEnd)
• 🧩 No dependencies works in any browser with vanilla JS
• 🖥️ Built-in UI panel for logs with:
  • Toggleable log panel with dark mode styling
  • Expand/collapse detailed JSON views
  • Clear and export logs to a text file

🚀 Getting Started

1. Add logger.js to your project

Download or copy the logger.js file into your project folder.

2. API Reference

Method	Description
slog.log(...args)	Logs a general message
slog.error(...args)	Logs an error message
slog.info(...args)	Logs an informational message
slog.setLevel(level)	Sets log level (none, error, info, log, all)
slog.setDefaultLevel()	Resets log level to show all
slog.enable()	Enables logging
slog.disable()	Disables logging
slog.setTimestamps(bool)	Enables/disables timestamps in logs
slog.setAutoTruncingOn()	Enables auto truncation of long messages
slog.setAutoTruncingOff()	Disables auto truncation
slog.group(label)	Starts a console group with the given label
slog.groupEnd()	Ends the current console group

3. Include it in your HTML

<script src="logger.js"></script>
<script>
  slog.log('This is a regular log message.'); // [LOG] [STRING] This is a regular log message.
  slog.error('Oops! Something went wrong.'); // [ERROR] [STRING] Oops! Something went wrong.
  slog.info('FYI: Everything is working fine.'); // [INFO] [STRING] FYI: Everything is working fine.

  // Long message truncated (default 100 chars)
  slog.log('LONG', 'This is a really long message that should be truncated after 100 characters to keep things neat in the console...');

  // Disable auto truncation
  slog.setAutoTruncingOff();
  slog.log('LONG', 'This long message will NOT be truncated even if it is very long and verbose...');

  // Pretty print object with custom tag
  slog.info('USER', { id: 123, name: 'Alice', roles: ['admin', 'editor'] });

  // Pretty print array
  slog.log('DATA', [1, 2, 3, 4, 5]);

  // Enable timestamps
  slog.setTimestamps(true);
  slog.log('Now with a timestamp!');

  // Log level control
  slog.setLevel('error'); // Only errors will show
  slog.log('This log will NOT show');
  slog.error('This error will show');

  slog.setDefaultLevel(); // Reset to show all logs

  // Enable/disable logging
  slog.disable();
  slog.log('This will NOT show');
  slog.enable();
  slog.log('Logging enabled again');

  // Grouping logs
  slog.group('User Actions');
  slog.log('Clicked button');
  slog.error('Button action failed');
  slog.groupEnd();
</script>