console-in-browser v1.0.4

console-in-browser

Pass console outputs to the screen

🚀 Live Demo

Installation

npm i console-in-browser

Overview

This module provides utilities to intercept console messages and display them in a custom-styled console within a web page.

Quick Start

import { createConsoleDOM, consolePipe } from 'console-in-browser'

// Get the container element where the custom console will be rendered
const container = document.getElementById('consoleContainer')

// Create the custom DOM-based console inside the container
const domConsole = createConsoleDOM(container)

// Intercept console.log, console.warn, console.error,
// as well as uncaught exceptions and unhandled promise rejections,
// redirecting all of them to the custom console's printMessage() function
consolePipe(domConsole.printMessage)

This setup captures all console output and displays it in a custom, styled console element.

Introduction

This module provides two key utilities for working with browser consoles:

• consolePipe(): Hooks into console.log, console.warn, and console.error to intercept and forward messages to a callback. It also listens for global error and unhandledrejection events to forward uncaught errors.

• createConsoleDOM(): Creates a custom DOM-based console UI element to display messages, styled for easy readability.

consolePipe()

consolePipe intercepts console.log, console.warn, and console.error calls, forwarding their content to the provided callback. It also listens for uncaught exceptions and unhandled promise rejections, passing those errors to the same callback.

Syntax

consolePipe(callback)

Parameters

Example

consolePipe((time, type, message) => {
    // don't call console.log here or you'll run into infinite recursion
    window.alert(`[${time}] ${type.toUpperCase()}: ${message}`)
});

createConsoleDOM()

createConsoleDOM adds a scrollable console UI to the provided container element. It styles messages differently based on their type (log, warn, error), and supports color customization via the colors parameter.

Syntax

createConsoleDOM(container)
createConsoleDOM(container, colors)

Parameters

Color Options

The colors object can include:

Returns

An object with:

Syntax

printMessage(message)
printMessage(type, message)
printMessage(time, type, message)

// type: 'log', 'warn', 'error' or [custom type]

Example

const container = document.getElementById('consoleContainer');

// create a console with custom colors
const domConsole = createConsoleDOM(container, {
    logText: 'green',
    warnText: '#ffa500',
    errorText: 'rgb(255, 0, 0)'
});

domConsole.printMessage('12:34', 'log', 'This is a log message');
domConsole.printMessage('12:35', 'warn', 'This is a warning');
domConsole.printMessage('12:36', 'error', 'This is an error');

License

This module is licensed under MPL-2.0.