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.