consolemodal

Display browser logs inside a draggable, resizable modal while preserving native console output.

Features

• Full standard console API support (log, info, warn, error, debug, trace, dir, dirxml, table, group, time, count, assert, and more)
• Draggable and resizable modal UI
• Optional timestamp prefixes
• Optional global console capture
• Color-coded method badges for fast scanning
• ESM + CJS + TypeScript declarations

Installation

npm install consolemodal

Quick Start

import consoleModal from "consolemodal";
import "consolemodal/styles.css";

consoleModal.log("Hello from consolemodal");

API

consoleModal.log(...args)

Logs to both browser console and modal.

consoleModal.info(...args)

Logs info messages.

consoleModal.warn(...args)

Logs warning messages.

consoleModal.error(...args)

Logs error messages.

consoleModal.debug(...args) / consoleModal.trace(...args)

Logs debug and stack-trace output.

consoleModal.dir(...args) / consoleModal.dirxml(...args) / consoleModal.table(...args)

Logs object-inspection and tabular output.

consoleModal.group(...args) / consoleModal.groupCollapsed(...args) / consoleModal.groupEnd()

Supports grouped logs with indentation.

consoleModal.time(label) / consoleModal.timeLog(label) / consoleModal.timeEnd(label)

Supports timer lifecycle logs.

consoleModal.count(label) / consoleModal.countReset(label)

Supports counter lifecycle logs.

consoleModal.assert(condition, ...args)

Logs assertion failures.

consoleModal.show()

Shows the modal.

consoleModal.hide()

Hides the modal.

consoleModal.clear()

Clears all modal entries.

new ConsoleModal(options)

Create a separate modal instance.

Options:

• title?: string default "Console"
• autoShow?: boolean default true
• timestamp?: boolean default true
• maxEntries?: number default 500
• captureConsole?: boolean default false

Example with custom instance

import { ConsoleModal } from "consolemodal";
import "consolemodal/styles.css";

const debugModal = new ConsoleModal({
  title: "Debug Console",
  captureConsole: true,
  maxEntries: 1000,
});

debugModal.init();

Development

npm install
npm run lint
npm run typecheck
npm test
npm run prepare

Publishing checklist

1. Update name, version, author, and repository.url in package.json.
2. Run npm run prepublishOnly.
3. Login with npm login.
4. Publish with npm publish --access public.

License

MIT