Dlog Utility

Introduction

Dlog is a flexible and customizable utility designed to enhance JavaScript logging capabilities while debugging code in the browser. It provides namespace-based log management, global silence control, and distinguishes between standard logs and error reports. Dlog is ideal for developers looking for more control over their application's logging output.

Dlog is inspired by the useful node-debug utility for Node.js logging from TJ Holowaychuk.

Screenshot of sample logs with source file identified

Features

Namespace-based Logging: Organize logs into namespaces with customizable styles.
Customizable Styling: Define custom styles for log messages to distinguish between namespaces.
Automatic Color Rotation: Namespaces added within each app get assigned a different color as part of a built-in palette.
Source File Display: Ensure that the source file of the log message displays in the Dev console for easy access.
Global Silence Control: Easily toggle logging on and off globally—useful for production.
Error Logging: Separate methods for logging errors, utilizing console.error for error reporting.
Log Filtering: Focus on logs from specific namespaces by filtering the output.
Color Toggle: Turn off color usage globally if that feature is not desired.

Installation

Install Dlog via npm

npm install dlog-web

Or alternatively, copy the Dlog.js file into your project directory.

For CommonJS usage

After installation, you can require Dlog in your project:

const Dlog = require('dlog-web/dist/dlog.cjs');

For ES Modules

If your project uses ES Modules, you can import Dlog directly after installation. This method works well for modern JavaScript projects that utilize import/export syntax.

import Dlog from 'dlog-web/dist/dlog.esm.js';

Usage

Basic Logging


    const logger = new Dlog();
    const debugLog = logger.namespace('debug');
    debugLog.log('Debugging the new feature.');

Global Silence


    logger.toggleGlobalSilence(true); // Silence all logs
    logger.toggleGlobalSilence(false); // Reactivate logging

Deactivating Namespaces


    // Deactivate the 'debug' namespace
    logger.namespaces['debug'].active = false;

More Examples of Usage


    // Initialize the Dlog class instance
    const logger = new Dlog();
    
    // Create namespaces for logging
    const debugLogger = logger.namespace('debug');
    const errorLogger = logger.namespace('error');
    const infoLogger = logger.namespace('info');
    
    // Set initial configuration for namespaces
    logger.namespaces['debug'] = { active: true, style: { fontSize: '8pt', color: '#007ACC' }};
    logger.namespaces['error'] = { active: true, style: { fontSize: '8pt', color: '#CC3300' }};
    logger.namespaces['info'] = { active: true, style: { fontSize: '8pt', color: '#33CC33' }};
    
    // Output sample log and error messages from different namespaces
    debugLogger.log('Debugging the new feature.');
    errorLogger.error('Error encountered while processing.');
    infoLogger.log('Information: Process started.');
    
    // Demonstrate global silence
    logger.toggleGlobalSilence(true);
    debugLogger.log('This debug message should not appear due to global silence.');
    errorLogger.error('This error message should also not appear due to global silence.');
    logger.toggleGlobalSilence(false); // Re-enable logging globally
    
    // Reactivating a specific namespace and demonstrating again
    logger.namespaces['debug'].active = false; // Deactivate the debug namespace
    debugLogger.log('This debug message should not appear as the debug namespace is deactivated.');
    
    logger.deactivateAllNamespaces(); // Deactivate all namespaces
    infoLogger.log('This info message should not appear as all namespaces are deactivated.');
    
    // Re-activate error namespace to demonstrate error logging
    logger.namespaces['error'].active = true;
    errorLogger.error('This error message should appear even after deactivating all namespaces, as the error namespace was reactivated.');
    
    // Output:
    // "Debugging the new feature." (styled in blue)
    // Error: "Error encountered while processing." (styled in red, shown as error in console)
    // "Information: Process started." (styled in green)
    // -- Global silence is then enabled, so no messages will appear --
    // -- Global silence is disabled, but the debug namespace remains deactivated --
    // -- All namespaces are deactivated, so no messages will appear --
    // Error: "This error message should appear even after deactivating all namespaces, as the error namespace was reactivated." (styled in red, shown as error in console)

Contributing

Contributions to Dlog are welcome! To contribute, please follow these steps:

Fork the repository.
Create a new branch for your feature or fix.
Implement your changes.
Submit a pull request.