How do I install the log library in my JavaScript project?

The README suggests using Eager for easy installation, but this method might be outdated. For current approaches, check the GitHub repository for manual script inclusion or package manager options like npm.

What's the difference between log and console.log?

Log extends console.log by adding markdown and custom CSS styling capabilities for better readability, while console.log outputs plain text. It's a lightweight wrapper that enhances debugging without changing core functionality.

How to style console logs with markdown using log?

Use markdown syntax directly in the log string, such as `log('this is *italic*')` for italics or `log('this word `code`')` for code snippets, as demonstrated in the README examples for quick formatting.

Does log work in all browsers or just specific ones?

Log requires browsers that support console styling, so it's compatible with Chrome 26+, Firefox 31+, and similar versions. It may not work in older browsers or some mobile environments, so check the support list.

How can I add custom CSS to console logs with log?

Use the custom syntax `[c='CSS styles']text[c]`, for instance `[c='color: blue; font-weight: bold']styled text[c]`, to apply arbitrary CSS styles to log output, allowing for detailed visual customization.

Should I use log or a library like Winston for logging?

Log is ideal for browser-based debugging with styled output, while Winston is better for Node.js with features like log levels and transports. Choose based on whether you need client-side prettiness or server-side robustness.

How to use log for debugging in a React application?

Include the log script in your project and use it like console.log in React components. It can make debug messages more readable, but avoid using it in production builds to prevent performance overhead.

Open-Awesome

log

MITHTMLv0.3.0

A JavaScript library that enhances console.log with markdown-like formatting and custom styling.

Visit Website GitHub

3.0k stars143 forks0 contributors

What is log?

Log is a JavaScript library that enhances the standard `console.log` function with markdown-like formatting and custom CSS styling. It solves the problem of plain, unformatted console output by allowing developers to create more readable and visually distinct logs for debugging and monitoring.

Target Audience

Frontend developers and web engineers who frequently use browser developer tools for debugging and want more expressive console output.

Value Proposition

Developers choose Log for its simplicity and immediate improvement to console readability without requiring complex setup or dependencies, making debugging faster and more intuitive.

Overview

Console.log with style.

Use Cases

Best For

Adding formatted text (bold, italic, code) to browser console logs
Debugging complex frontend applications with styled output
Creating visually distinct log messages for different log levels
Improving readability of console output during development
Quick prototyping with enhanced logging capabilities
Educational purposes to demonstrate console logging techniques

Not Ideal For

Production deployments where console output is minimized or disabled for performance and security
Server-side or Node.js applications requiring robust logging with features like log levels or file output
Teams that rely on structured logging formats (e.g., JSON) for log analysis and monitoring
Environments with strict browser compatibility requirements outside the supported versions (e.g., legacy systems)

Pros & Cons

Pros

Markdown Syntax Support

Allows quick formatting with familiar markdown for italic, bold, and code snippets, as shown in the README with examples like `log('this is *italic*')`.

Custom CSS Styling

Enables arbitrary CSS styles using a custom syntax, such as `[c='color: red']red[c]`, providing fine-grained control over log appearance for enhanced debugging.

Lightweight Integration

Easy to add to any website without heavy dependencies, making it straightforward to implement for immediate improvements in console readability.

Cross-Browser Safety

Designed to work safely in supported browsers like Chrome 26+ and Firefox 31+, ensuring reliable usage across modern development environments.

Cons

Browser-Only Limitation

Limited to client-side browser environments, with no support for server-side logging in Node.js or other platforms, restricting its use case.

Lacks Advanced Features

Does not include log levels, structured output, or integration with logging frameworks, which are essential for production-grade applications and monitoring.

Styling Compatibility Issues

Relies on browser support for console styling, which may not work in older or less common browsers, as indicated by the compatibility list in the README.

Frequently Asked Questions

Related Projects

loglevel

:ledger: Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods

Stars2,747

Forks160

Last commit1 year ago

console.log-wrapper

Clear console logging for every browser

Stars403

Forks55

Last commit4 years ago

Conzole

Oaxoa.github.io

Stars213

Forks18

Last commit10 years ago

minilog

Lightweight client & server-side logging with Stream-API backends

Stars0

Forks0

Last commit

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub

log