API Reference

Complete documentation for the <browser-console> web component.

Installation

npm

npm install @profpowell/browser-console

CDN

<script type="module" src="https://unpkg.com/@profpowell/browser-console"></script>

ES Module Import

import '@profpowell/browser-console' // or import { BrowserConsole } from '@profpowell/browser-console'

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.

Attributes

Attribute Type Default Description
theme string "dark" Color theme: "dark" or "light"
max-logs number 1000 Maximum number of logs to retain in memory
auto-hook string "true" Whether to automatically hook console methods on connect. Set to "false" to manually control.

Properties

Property Type Description
logs LogEntry[] Array of captured log entries
originalConsole Object<string, Function> Original console methods stored for restoration
filter string | null Current log filter (null shows all)
maxLogs number Maximum logs to retain (default: 1000)
timers Object<string, number> Timer tracking for console.time/timeEnd
counters Object<string, number> Counter tracking for console.count
theme "dark" | "light" Current theme
searchQuery string Current search/filter query
groupDepth number Current console.group nesting depth
groupStack GroupStackEntry[] Stack of open groups

Methods

Method Parameters Returns Description
hookConsole() — void Hook into console methods to capture logs. Called automatically unless auto-hook="false".
unhookConsole() — void Restore original console methods. Called automatically on disconnect.
setTheme(theme) theme: "dark" | "light" void Set theme programmatically. Also updates the theme attribute.
setFilter(filter) filter: string | null void Filter by log method. Pass null for all, or "error", "warn", etc.
setSearchQuery(query) query: string void Filter logs by text content.
clearLogs() — void Clear all logs from display and internal array.
copyLogs() — Promise<void> Copy visible logs to clipboard as plain text.
addLog(log) log: LogEntry void Add a log entry programmatically.
matchesFilters(log) log: LogEntry boolean Check if a log entry matches current filters.
formatLogsForClipboard() — string Format visible logs as plain text for clipboard.

Events

Event Detail Description
log { log: LogEntry } Dispatched when a new log entry is added
clear — Dispatched when console is cleared
theme-change { theme: string } Dispatched when theme changes

CSS Custom Properties

All theming tokens use the --bc-* namespace. Set them on the browser-console element (or any ancestor — they inherit through the Shadow DOM) to override the per-theme defaults. This makes the component Vanilla Breeze-compatible: VB's token bridge can map --color-surface, --color-text, etc. onto these without further configuration.

Property Default (Light) Default (Dark) Description
--bc-bg-primary #ffffff #1e1e1e Console background
--bc-bg-secondary #f3f3f3 #252526 Header / chrome background
--bc-bg-tertiary #f8f8f8 #2a2a2a Inputs and stack-trace background
--bc-bg-hover #f0f0f0 #2a2a2a Log row hover background
--bc-border-color #e0e0e0 #3e3e42 Borders and dividers
--bc-text-primary #333333 #d4d4d4 Primary text
--bc-text-secondary #999999 #6a6a6a Muted text (timestamps, type labels)
--bc-color-log #0066cc #3794ff console.log accent color
--bc-color-info #0078d4 #75beff console.info accent color
--bc-color-warn #ff8c00 #ffcc00 console.warn accent color
--bc-color-error #e81123 #f48771 console.error accent color
--bc-color-debug #8b5cf6 #b267e6 console.debug accent color
--bc-color-table #00a67e #4ec9b0 console.table accent color
--bc-color-time #00a67e #4ec9b0 console.time accent color
--bc-bg-warn #fff9e6 #332b00 Warn row background tint
--bc-bg-error #ffe6e6 #342020 Error row background tint
--bc-value-string #a31515 #ce9178 String literal color
--bc-value-number #098658 #b5cea8 Number literal color
--bc-value-boolean #0000ff #569cd6 Boolean literal color
--bc-value-null #999999 #6a6a6a null / undefined color
--bc-value-function #795e26 #dcdcaa Function value color
--bc-value-date #0078d4 #4fc1ff Date value color
--bc-value-regexp #e81123 #d16969 RegExp / Symbol value color
--bc-value-element #00a67e #4ec9b0 DOM element value color
--bc-btn-bg #e8e8e8 #3e3e42 Button background
--bc-btn-border #cccccc #555 Button border color
--bc-btn-hover #d8d8d8 #505050 Button hover background
--bc-btn-active #0066cc #0e639c Active button / focus outline color
--bc-table-border #e0e0e0 #3e3e42 Table cell border color
--bc-table-header-bg #f3f3f3 #2d2d30 Table header background
--bc-table-row-hover #f8f8f8 #2a2a2a Table row hover background
--bc-scrollbar-track #f0f0f0 #1e1e1e Scrollbar track color
--bc-scrollbar-thumb #c0c0c0 #424242 Scrollbar thumb color
--bc-scrollbar-thumb-hover #a0a0a0 #4e4e4e Scrollbar thumb hover color

CSS Parts

Style internal elements using ::part():

Part Description
header The console header containing filters and actions
logs The scrollable log entries container
filter-button Filter buttons (All, Log, Info, Warn, Error)
action-button Action buttons (theme toggle, copy, clear)
log-entry Individual log entry row

Example

browser-console::part(header) { background: #2d2d2d; border-bottom: 2px solid #0078d4; } browser-console::part(log-entry) { font-size: 13px; }

TypeScript Types

interface LogEntry { method: 'log' | 'info' | 'warn' | 'error' | 'debug' | 'table' | 'time' | 'clear' | 'count' | 'assert' | 'group' | 'trace' | 'dir' data: unknown[] timestamp: Date groupDepth?: number collapsed?: boolean groupId?: string stack?: string } interface GroupStackEntry { label: string collapsed: boolean id: string } type Theme = 'dark' | 'light' type Filter = 'log' | 'info' | 'warn' | 'error' | null

Browser Support

This component uses standard Web Components APIs and works in all modern browsers:

Browser Version
Chrome 67+
Firefox 63+
Safari 10.1+
Edge 79+