Console-drop-logs NPM

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.