JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 29
  • Score
    100M100P100Q72581F
  • License MIT

Write colorful logs in browser console with download capabilities and application-specific prefixes.

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (colorjslogger) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    ColorJSLogger

    Elevate your browser debugging with vibrant, organized, and downloadable console logs.

    Build Issues Contributions License


    📖 Table of Contents


    ⭐ Overview

    ColorJSLogger is a powerful yet lightweight JavaScript library designed to transform your browser console debugging experience. Say goodbye to monotonous black-and-white logs and embrace clarity with vibrant, categorized, and feature-rich console output.

    Debugging complex front-end applications can quickly become overwhelming when faced with a flood of undifferentiated console messages. Standard console.log falls short, lacking visual cues for severity, context, or the ability to easily extract information for later analysis. This often leads to wasted time sifting through irrelevant data and a slower debugging cycle.

    ColorJSLogger provides an elegant solution by enhancing the native browser console with an intuitive API for producing colorful, clearly categorized, and contextually rich logs. Beyond aesthetics, it empowers developers with practical features like log downloading and application-specific log prefixes, streamlining the debugging workflow and improving overall development efficiency.

    This project is delivered as a lightweight, client-side JavaScript library. It's meticulously built using modern JavaScript best practices, then transpiled with Babel for extensive browser compatibility and minified with UglifyJS for optimal performance in production environments. Its design emphasizes ease of integration and minimal footprint, making it a perfect addition to any web project needing enhanced logging capabilities.

    ✨ Key Features

    • 🎨 Colorful Console Output: Instantly differentiate between various log types (e.g., info, warning, error, success, debug) with pre-defined or customizable color schemes. Improves readability and speeds up issue identification.
    • ⬇️ Downloadable Log History: Export all captured console logs into a .txt file with a single function call. Ideal for sharing debugging sessions with teammates, post-mortem analysis, or offline review, as directly inferred from download.md and keywords.
    • 🏷️ Application-Specific Prefixes: Automatically prepend a configurable application name to all your logs. This feature, hinted by set-appname.md, is invaluable in multi-component applications or when debugging embedded scripts, providing immediate context.
    • 🤫 Confidential Log Handling: Implement a mechanism to mark or handle sensitive log entries. As inferred from confidential-logs.md, this allows for selective logging or redaction, ensuring that private information does not inadvertently appear in downloadable logs or public console outputs.
    • ⚡ Optimized & Browser Compatible: Built with modern JavaScript, then transpiled using Babel for broad compatibility across various browser versions and minified with UglifyJS to ensure a small footprint and fast loading times.
    • 🧩 Simple & Intuitive API: Integrates seamlessly into existing projects with a straightforward and easy-to-learn API, mimicking familiar console methods while adding powerful enhancements.

    🛠️ Tech Stack & Architecture

    ColorJSLogger is built upon a concise and efficient set of technologies, prioritizing browser compatibility, performance, and ease of use.

    Technology Purpose Why it was Chosen
    JavaScript Primary programming language Universal language of the web, ensuring maximum accessibility and integration into browser environments.
    Babel JavaScript transpiler To convert modern ECMAScript features into older, more widely supported versions, guaranteeing broad browser compatibility.
    UglifyJS JavaScript minifier To reduce file size and optimize loading performance for production deployments, delivering a lightweight library.
    Browser Console API Core interaction and output mechanism Leverages native browser capabilities for robust, high-performance, and familiar logging.

    🚀 Getting Started

    To get ColorJSLogger up and running in your project, follow these simple steps:

    Prerequisites

    You'll need the following installed:

    • Node.js: v12+ (for npm or yarn package management, if you choose that installation method).
    • A modern Web Browser (Chrome, Firefox, Edge, Safari, etc.)

    Installation

    You have several options to include ColorJSLogger in your project:

    1. Via NPM

    npm install colorjslogger

    2. Via Yarn

    yarn add colorjslogger

    3. Direct Download

    You can download the minified jslogger.min.js file directly from the src directory or the releases page (inferred from download.md).

    4. Via CDN (Example - replace with actual CDN if available)

    While not explicitly provided in the file structure, it's a common and highly convenient way to include browser-based libraries. You would typically add this to your HTML <head> or before the closing </body> tag:

    <!-- Replace with actual CDN link once available -->
    <script src="https://cdn.jsdelivr.net/npm/colorjslogger@3.0.1/src/jslogger.min.js"></script>

    🔧 Usage

    Once installed, integrating and using ColorJSLogger is straightforward.

    Basic Integration

    Include the jslogger.min.js script in your HTML file. If using NPM/Yarn and a bundler (e.g., Webpack, Rollup), you can import it.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ColorJSLogger Example</title>
    </head>
    <body>
        <h1>Check the browser console!</h1>
    
        <!-- If direct download or CDN is used -->
        <script src="https://cdn.jsdelivr.net/npm/colorjslogger@latest/src/jslogger.min.js"></script>
        <script>
            // Initialize the logger (assuming it's available globally as ColorJSLogger)
            const jslogger = window.ColorJSLogger; // Or import if using a module bundler
    
            jslogger.info("Welcome to ColorJSLogger!");
            jslogger.warn("This is a warning message.");
            jslogger.error("An error occurred!", new Error("Something went wrong."));
            jslogger.success("Operation completed successfully!");
            jslogger.debug("Debugging variable: ", { data: "test", value: 123 });
            jslogger.log("Standard log message.");
        </script>
    </body>
    </html>

    Standard Output

    A sample snippet to show output.

    let username = "Suhaib Janjua";
    jslogger.log("AuthService", `Authentication successful: User "${username}" loggedin.`);
    

    Mon Aug 12 2019 22:37:57 | JSLogger | [AuthService] :: Authentication successful: User "Suhaib Janjua" loggedin.

    Setting an Application Name

    Easily prefix all your logs with a specific application or module name for better context:

    // Before logging anything, set your app name
    jslogger.setAppName("SuhaibJanjuaLogger");
    
    jslogger.info("Authentication", "User logged in."); 
    

    Output in console:

    Mon Aug 12 2019 22:39:54 | SuhaibJanjuaLogger | [Authentication] :: User logged in.

    // You can change it anytime
    jslogger.setAppName("AdminCenter");
    
    jslogger.debug("AuthService", "Token refresh initiated.");
    

    Output in console:

    Mon Aug 12 2019 22:40:05 | AdminCenter | [AuthService] :: Token refresh initiated.

    Downloading Logs

    Export all recorded logs to a .txt file for later review:

    // Log some more messages
    jslogger.info("Data fetched from API.");
    jslogger.error("Failed to parse response.");
    
    // Trigger the log download
    jslogger.downloadLogs("my_app_session_logs.txt");
    // This will prompt the user to download a file named 'my_app_session_logs.txt'
    // containing all the console output generated by ColorJSLogger during the session.

    Handling Confidential Logs (Inferred)

    While specific implementation details for confidential-logs.md are not provided, a common pattern for sensitive logging involves a special method or configuration. For instance:

    // Imagine a method for logging sensitive data that might be redacted or excluded from downloads
    jslogger.internal("User token: abc-xyz-123", { userId: 456 });
    // Depending on ColorJSLogger's internal configuration (which you might set),
    // this could:
    // - Log a redacted message to the console, e.g., "[CONFIDENTIAL] User token: [REDACTED]"
    // - Be entirely excluded from the output of `jslogger.downloadLogs()`.
    // - Require a special debug flag to enable its full display or inclusion.

    For more comprehensive examples and advanced configurations, please refer to the docs/example.md and docs/usage.md files within the repository.

    🎮 Demo

    Experience ColorJSLogger in action! Try our interactive demo to see all the features working in real-time:

    🚀 Live Demo

    The demo showcases:

    • ✨ Colorful logging with different log levels
    • 📱 Browser console integration
    • 💾 Log download functionality
    • 🎯 Custom app naming
    • 🔧 Internal logging capabilities

    Click the link above to test ColorJSLogger directly in your browser. Open your browser's developer console to see the colorful logs in action!

    🤝 Contributing

    If you want to contribute, please read our Contributing Guidelines.

    📝 License

    Distributed under the MIT License. See LICENSE.md for more information.