console-drop-logs

console-drop-logs is a lightweight, framework-agnostic JavaScript utility that gives you control over console logs in browser environments. It allows you to easily manage debug logs in your frontend applications, with automatic detection of development environments.

Features

• Automatically allows console output in development environments (localhost)
• Restricts console output in production environments by default
• Works with all major frontend frameworks and vanilla JavaScript
• Provides methods to dynamically control log visibility
• Supports both npm and yarn
• Zero dependencies

Installation

Install console-drop-logs using npm:

npm install console-drop-logs

Or using yarn:

yarn add console-drop-logs

Usage

Basic Usage

Import and initialize console-drop-logs at the entry point of your application:

import ConsoleDrop from 'console-drop-logs';
const logger = new ConsoleDrop();

// Your application code...
console.log('This will appear in the browser console if running on localhost');
console.log('This will not appear in the browser console in production environments');

Configuration Options

The ConsoleDrop constructor doesn't take any arguments. The development mode is automatically detected based on the hostname.

Framework-specific Examples

React

In your index.js or App.js:

import React from 'react';
import ConsoleDrop from 'console-drop-logs';

const logger = new ConsoleDrop();

function App() {
  console.log('This log will appear in development, but not in production');
  return <div>Your App</div>;
}

export default App;

Vue.js

In your main.js:

import { createApp } from 'vue';
import App from './App.vue';
import ConsoleDrop from 'console-drop-logs';

const logger = new ConsoleDrop();

createApp(App).mount('#app');

Angular

In your main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import ConsoleDrop from 'console-drop-logs';
import { AppModule } from './app/app.module';

const logger = new ConsoleDrop();

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Advanced Usage

Dynamic Control

You can change the logging behavior at runtime:

import ConsoleDrop from 'console-drop-logs';

const logger = new ConsoleDrop();

// Later in your code...
logger.setLogVisibility({ allowBrowserLogs: true }); // Enable browser console logs
logger.setLogVisibility({ allowBrowserLogs: false }); // Disable browser console logs

How It Works

console-drop-logs overrides the default console methods (log, warn, error, debug). It automatically detects if the application is running in a development environment (localhost) and allows logs in this case. In production environments, logs are restricted by default.

• Logs are allowed by default when running on localhost.
• Logs are restricted by default in non-localhost environments.
• The setLogVisibility method allows dynamic control over log visibility.

Buy Me a Coffee

If you like this project and want to support me, you can buy me a coffee! Your support helps me continue improving and maintaining this project.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.