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

| Parameter | Type | Description | |---|---|---| | callback | function | A function that handles intercepted messages, receiving (time, type, message) arguments. All arguments are strings. |

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

| Parameter | Type | Description | |---|---|---| | container | HTMLElement | Parent element where the console UI will be attached. | | colors | object (optional) | Custom color overrides for different message types. See below. |

Color Options

The colors object can include:

| Key | Description | Default | |---|---|---| | logText | Text color for log messages | #87cefa | | logBg | Background color for log messages | rgba(135, 206, 250, 0.1) | | warnText | Text color for warn messages | #ffcc00 | | warnBg | Background color for warn messages | rgba(255, 204, 0, 0.1) | | errorText | Text color for error messages | #ff5f5f | | errorBg | Background color for error messages | rgba(255, 95, 95, 0.1) | | consoleText | Default text color | #d4d4d4 | | consoleBg | Default background color | #1e1e1e |

Returns

An object with:

| Method | Description | |---|---| | printMessage() | Function to append a message to the console UI manually. Accepts different argument combinations for flexibility.

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.