<browser-console>

A zero-dependency vanilla JavaScript web component that captures and displays browser console output with syntax highlighting and type-aware formatting.

View Demos API Docs

Features

Full Console Support

Supports log, info, warn, error, debug, table, time/timeEnd, group/groupEnd, trace, count, dir, and more.

Type-Aware Formatting

Intelligent display of Objects, Arrays, Map, Set, Symbol, BigInt, Date, RegExp, Error, and DOM elements.

Expandable Objects

Click to expand nested objects and arrays. Preserves expansion state across renders with keyboard navigation.

Search & Filter

Filter logs by type (log, info, warn, error) or search text. Copy visible logs to clipboard with one click.

Light & Dark Themes

Built-in VS Code-inspired themes with full CSS custom property support for customization.

Zero Dependencies

Pure vanilla JavaScript with no external dependencies. Works with any framework or none at all.

Quick Start

Installation

npm install @profpowell/browser-console

Or via CDN:

Basic Usage

<browser-console theme="dark" max-logs="500"></browser-console>

The component automatically hooks into console methods and displays all logs with syntax highlighting. Just add it to your page and start logging!

JavaScript API

const bc = document.querySelector('browser-console') // Programmatic control bc.setTheme('light') bc.setFilter('error') // Show only errors bc.setSearchQuery('user') // Filter by text bc.clearLogs() // Clear all logs bc.copyLogs() // Copy to clipboard