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

Use these to customize the appearance of the component:

Property Default (Light) Default (Dark) Description
--bg-primary #ffffff #1e1e1e Primary background color
--bg-secondary #f3f3f3 #252526 Secondary background (header)
--bg-hover #e8e8e8 #2a2d2e Hover state background
--border-color #e1e1e1 #3c3c3c Border color
--accent-color #0078d4 #0078d4 Accent color for active states
--text-primary #1f1f1f #d4d4d4 Primary text color
--text-secondary #616161 #808080 Secondary text (timestamps)
--log-color #1f1f1f #d4d4d4 console.log text color
--info-color #0066cc #3794ff console.info text color
--warn-color #9d5d00 #cca700 console.warn text color
--error-color #c72222 #f14c4c console.error text color
--debug-color #098658 #b5cea8 console.debug text 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+