Browser Console

A lightweight, vanilla JavaScript web component for capturing and displaying console logs with syntax highlighting and type-aware formatting.

Installation

npm

npm install @profpowell/browser-console

// ES Module import
import '@profpowell/browser-console';

// Or import the class directly
import { BrowserConsole } from '@profpowell/browser-console';

CDN

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

<!-- Or from jsDelivr -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@profpowell/browser-console"></script>

Direct Download

Download browser-console.min.js from the releases page and include it in your project:

<script type="module" src="browser-console.min.js"></script>

Features

Zero Dependencies - Pure vanilla JavaScript, no frameworks required
Syntax Highlighting - Beautiful color-coded output for different data types
Type-Aware Formatting - Smart rendering of strings, numbers, BigInt, objects, arrays, Map, Set, Symbol, and more
Console Method Support - Captures log, info, warn, error, debug, table, time/timeEnd/timeLog, group/groupEnd, trace, count, dir
Table Rendering - Proper HTML table rendering for console.table() with full support for arrays and objects
Timer Tracking - Automatically tracks and displays console.time/timeEnd/timeLog durations
Light & Dark Themes - Switch between light and dark themes with a single click
Better Object Expansion - Click to fully expand/collapse complex objects and arrays with structured view
Filter by Level - Filter logs by method type (log, info, warn, error)
Text Search - Filter logs by searching text content
Copy to Clipboard - Export all logs or filtered logs as plain text
Console Groups - Collapsible console.group/groupCollapsed with visual indentation
Stack Traces - console.trace displays full stack trace with expandable view
Performance - Efficient rendering with configurable log limits
Accessible - ARIA landmarks, keyboard navigation, screen reader support
Easy Integration - Just add the custom element to your HTML
CSS Customizable - Full theming via CSS custom properties

Quick Start

1. Include the Component

<!DOCTYPE html>
<html>
<head>
  <title>Browser Console Demo</title>
</head>
<body>
  <browser-console></browser-console>

  <script src="browser-console.js"></script>
  <script>
    console.log('Hello, World!');
    console.warn('This is a warning');
    console.error('This is an error');
  </script>
</body>
</html>

2. Style the Container

browser-console {
  display: block;
  width: 100%;
  height: 400px;
}

That's it! The component will automatically hook into console methods and display all logs.

Usage

Basic Usage

<browser-console></browser-console>

The component automatically hooks into all console methods when connected to the DOM.

Theme Selection

<!-- Dark theme (default) -->
<browser-console theme="dark"></browser-console>

<!-- Light theme -->
<browser-console theme="light"></browser-console>

Disable Auto-Hook

<browser-console auto-hook="false"></browser-console>

Manual Control

const feed = document.querySelector('browser-console');

// Hook console methods
feed.hookConsole();

// Unhook console methods
feed.unhookConsole();

// Clear all logs
feed.clearLogs();

// Change theme programmatically
feed.setTheme('light'); // or 'dark'

// Set filter (null, 'log', 'info', 'warn', 'error')
feed.setFilter('error');

// Manually add a log
feed.addLog({
  method: 'log',
  data: ['Custom message', { foo: 'bar' }],
  timestamp: new Date()
});

Supported Console Methods

The component intercepts and displays the following console methods:

console.log() - Standard logging
console.info() - Informational messages
console.warn() - Warning messages
console.error() - Error messages
console.debug() - Debug messages
console.table() - Renders data as proper HTML tables (arrays, objects, array of objects)
console.time() / console.timeEnd() - Tracks and displays execution time with millisecond precision
console.timeLog() - Logs elapsed time without stopping the timer
console.group() / console.groupEnd() - Collapsible log groups with visual indentation
console.groupCollapsed() - Creates a collapsed group (click to expand)
console.trace() - Displays stack trace with expandable view
console.count() / console.countReset() - Labeled counters with running totals
console.dir() - Object inspection with expanded view
console.clear() - Clears the console
console.assert() - Assertions (captured but basic display)

Supported Data Types

The component provides intelligent formatting for:

Primitives: strings, numbers, booleans, null, undefined
BigInt: Large integer values with n suffix
Symbol: Symbol descriptions with proper formatting
Objects: Plain objects with expandable properties
Arrays: Arrays with expandable elements
Map: Map instances with key-value pair display
Set: Set instances with value display
Functions: Function definitions with preview
Dates: ISO formatted dates
RegExp: Regular expression patterns
Errors: Error objects with stack traces
DOM Elements: HTML elements with tag, id, and class display

Features in Detail

Syntax Highlighting

Different data types are color-coded for easy identification:

Strings: orange
Numbers: light green
Booleans: blue
null/undefined: gray italic
Functions: yellow
Objects/Arrays: white
Errors: red
Dates: cyan
RegExp: dark red
DOM Elements: teal

Log Level Styling

Different console methods have distinct visual styles:

log: Blue accent
info: Light blue accent
warn: Yellow accent with warning background
error: Red accent with error background
debug: Purple accent

Table Rendering (NEW)

The component now renders console.table() calls as proper HTML tables:

Array of Objects: Displays with column headers for each property
Simple Arrays: Shows index and value columns
Plain Objects: Renders key-value pairs in table format
Styled tables with hover effects and proper borders
Supports both light and dark themes

console.table([
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'User' }
]);

Timer Tracking (NEW)

Automatically tracks performance timings with console.time() and console.timeEnd():

Tracks multiple named timers simultaneously
Displays duration in milliseconds with 2 decimal precision
Uses performance.now() for high-precision timing
Formatted with special timer icon and color

console.time('my-operation');
// ... some code ...
console.timeEnd('my-operation'); // Shows: my-operation: 123.45ms

Themes (NEW)

Switch between light and dark themes:

Dark Theme: Developer-friendly with VS Code-inspired colors (default)
Light Theme: Clean, bright theme for daytime use
Click the ☀️ button in the console header to toggle
Set programmatically with setTheme('light') or setTheme('dark')
Set via attribute: <browser-console theme="light"></browser-console>
Smooth transitions between themes

Object & Array Expansion (NEW)

Enhanced expandable view for objects and arrays:

Click the ▶ icon to expand and view all properties
Shows type label (e.g., "Array(5)", "Object")
Properly formatted property list when expanded
Nested expandable items for deep object inspection
Unique IDs for each expandable section

Filtering

Click the filter buttons in the header to show only specific log levels:

All
Log
Info
Warn
Error

Performance

Configurable maximum log entries (default: 1000)
Efficient re-rendering on log additions
Automatic cleanup of old logs
Limited depth for nested objects to prevent performance issues

API Reference

Attributes

Attribute	Type	Default	Description
`auto-hook`	boolean	true	Automatically hook console methods on mount
`theme`	'dark' \| 'light'	'dark'	Color theme for the console display

Properties

Property	Type	Default	Description
`logs`	Array	[]	Array of captured log entries
`filter`	String \| null	null	Current filter ('log', 'info', 'warn', 'error', or null for all)
`maxLogs`	Number	1000	Maximum number of logs to keep
`theme`	String	'dark'	Current theme ('light' or 'dark')
`timers`	Object	{}	Internal timer tracking for console.time/timeEnd
`counters`	Object	{}	Counter tracking for console.count
`searchQuery`	String	''	Current search filter text
`groupDepth`	Number	0	Current nesting depth for console.group
`groupStack`	Array	[]	Stack of open groups

Methods

Method	Parameters	Description
`hookConsole()`	-	Hook into console methods to capture logs
`unhookConsole()`	-	Restore original console methods
`addLog(log)`	log: {method, data, timestamp}	Manually add a log entry
`clearLogs()`	-	Clear all captured logs
`setFilter(filter)`	filter: String \| null	Set the current filter
`setTheme(theme)`	theme: 'light' \| 'dark'	Change the color theme
`setSearchQuery(query)`	query: String	Filter logs by search text
`copyLogs()`	-	Copy all visible logs to clipboard (async)
`getExpansionStates()`	-	Get Map of current expand/collapse states
`restoreExpansionStates(states)`	states: Map	Restore expand/collapse states

Events

The component doesn't emit custom events currently, but you can extend it to do so.

Examples

Example 1: Different Data Types

console.log('String:', 'Hello World');
console.log('Number:', 42, 3.14);
console.log('Boolean:', true, false);
console.log('Null:', null);
console.log('Undefined:', undefined);
console.log('Array:', [1, 2, 3, 4, 5]);
console.log('Object:', { name: 'John', age: 30 });

Example 2: Complex Objects

const user = {
  name: 'Jane Smith',
  profile: {
    age: 28,
    location: {
      city: 'San Francisco',
      state: 'CA'
    }
  },
  hobbies: ['coding', 'reading']
};

console.log(user);

Example 3: Error Handling

try {
  throw new Error('Something went wrong!');
} catch (error) {
  console.error('Caught error:', error);
}

Example 4: Timer Tracking (NEW)

// Start a timer
console.time('data-processing');

// Simulate some work
const data = Array.from({ length: 1000 }, (_, i) => i * 2);
const sum = data.reduce((a, b) => a + b, 0);

// End timer - displays duration
console.timeEnd('data-processing'); // Output: data-processing: 2.35ms

// Multiple simultaneous timers
console.time('timer-1');
console.time('timer-2');
setTimeout(() => console.timeEnd('timer-1'), 100);
setTimeout(() => console.timeEnd('timer-2'), 200);

Example 5: Table Data (ENHANCED)

const users = [
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'User' },
  { id: 3, name: 'Charlie', role: 'Moderator' }
];

console.table(users);

Browser Support

This component uses:

Custom Elements (Web Components)
Shadow DOM
ES6+ JavaScript features

Supported browsers:

Chrome 54+
Firefox 63+
Safari 10.1+
Edge 79+

Customization

Styling the Host Element

browser-console {
  display: block;
  height: 400px;
  border: 2px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

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 external-component token bridge maps --color-surface, --color-text, etc. onto these tokens with no extra configuration.

Background Colors

Property	Description
`--bc-bg-primary`	Console background
`--bc-bg-secondary`	Header / chrome background
`--bc-bg-tertiary`	Inputs and stack-trace background
`--bc-bg-hover`	Log row hover background
`--bc-bg-warn`	Warn row background tint
`--bc-bg-error`	Error row background tint

Text Colors

Property	Description
`--bc-text-primary`	Primary text
`--bc-text-secondary`	Muted text (timestamps, type labels)
`--bc-border-color`	Borders and dividers

Log Level Colors

Property	Description
`--bc-color-log`	`console.log` accent
`--bc-color-info`	`console.info` accent
`--bc-color-warn`	`console.warn` accent
`--bc-color-error`	`console.error` accent
`--bc-color-debug`	`console.debug` accent
`--bc-color-table`	`console.table` accent
`--bc-color-time`	`console.time` accent

Value Type Colors

Property	Description
`--bc-value-string`	String values
`--bc-value-number`	Number / BigInt values
`--bc-value-boolean`	Boolean values
`--bc-value-null`	`null` / `undefined` values
`--bc-value-function`	Function values
`--bc-value-date`	Date values
`--bc-value-regexp`	RegExp / Symbol values
`--bc-value-element`	DOM element values

UI Element Colors

Property	Description
`--bc-btn-bg`	Button background
`--bc-btn-border`	Button border
`--bc-btn-hover`	Button hover state
`--bc-btn-active`	Active / focus outline color
`--bc-table-border`	Table cell border
`--bc-table-header-bg`	Table header background
`--bc-table-row-hover`	Table row hover
`--bc-scrollbar-track`	Scrollbar track
`--bc-scrollbar-thumb`	Scrollbar thumb
`--bc-scrollbar-thumb-hover`	Scrollbar thumb hover

Example: Custom Dark Theme

browser-console {
  --bc-bg-primary: #0d1117;
  --bc-bg-secondary: #161b22;
  --bc-text-primary: #c9d1d9;
  --bc-color-log: #58a6ff;
  --bc-color-error: #f85149;
  --bc-value-string: #a5d6ff;
  --bc-value-number: #79c0ff;
}

Example: Vanilla Breeze integration

@profpowell/browser-console only reads --bc-* tokens — it has no direct knowledge of VB's --color-* namespace. The bridge that connects the two lives in Vanilla Breeze, not here: src/utils/external-components.css. When you load VB's main stylesheet, that file targets browser-console directly and assigns every --bc-* token from a VB semantic equivalent, so the component picks up your active theme automatically — light, dark, or any of the brand themes:

<link rel="stylesheet" href="/vanilla-breeze/main.css">
<browser-console></browser-console>

Bridge mapping (kept here for reference; the canonical source is the VB stylesheet linked above):

`--bc-*` token	VB semantic source
`--bc-bg-primary`	`--color-surface`
`--bc-bg-secondary` / `--bc-bg-tertiary`	`--color-surface-raised`
`--bc-bg-hover`	`--color-hover-bg` (falls back to `--color-surface-raised`)
`--bc-bg-warn`	`color-mix(--color-warning 12%, transparent)`
`--bc-bg-error`	`color-mix(--color-danger 12%, transparent)`
`--bc-text-primary`	`--color-text`
`--bc-text-secondary`	`--color-text-muted`
`--bc-border-color` / `--bc-table-border`	`--color-border`
`--bc-color-log` / `--bc-color-table`	`--color-text`
`--bc-color-info` / `--bc-value-number` / `--bc-value-date`	`--color-info` (falls back to `--color-interactive`)
`--bc-color-warn` / `--bc-value-boolean`	`--color-warning`
`--bc-color-error` / `--bc-value-regexp`	`--color-danger`
`--bc-color-debug` / `--bc-color-time`	`--color-text-muted`
`--bc-value-string`	`--color-success`
`--bc-value-null`	`--color-text-muted`
`--bc-value-function`	`--color-accent`
`--bc-value-element`	`--color-primary`
`--bc-btn-bg` / `--bc-btn-hover` / `--bc-table-header-bg` / `--bc-table-row-hover`	`--color-surface-raised` (with `--color-hover-bg` for hover where present)
`--bc-btn-border`	`--color-border`
`--bc-btn-active`	`--color-interactive`
`--bc-scrollbar-track`	`--color-surface`
`--bc-scrollbar-thumb`	`--color-border`
`--bc-scrollbar-thumb-hover`	`--color-text-muted`

Overrides still win. The bridge targets browser-console { ... } without !important, so any per-instance --bc-* you set on a specific <browser-console> (inline style="--bc-bg-primary: …", or a rule with higher specificity) takes precedence. Setting --color-* at the document root affects every VB component, including browser-console through the bridge; setting --bc-* directly on the element scopes the change to that one instance.

Demo

Open index.html in your browser to see the interactive demo with various test cases and examples.

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
.beads		.beads
.idea		.idea
dist		dist
docs		docs
src		src
test		test
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
browser-console.d.ts		browser-console.d.ts
custom-elements-manifest.config.mjs		custom-elements-manifest.config.mjs
custom-elements.json		custom-elements.json
eslint.config.js		eslint.config.js
package-lock.json		package-lock.json
package.json		package.json
playwright.config.js		playwright.config.js
refactor.md		refactor.md
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

Browser Console

Installation

npm

CDN

Direct Download

Features

Quick Start

1. Include the Component

2. Style the Container

Usage

Basic Usage

Theme Selection

Disable Auto-Hook

Manual Control

Supported Console Methods

Supported Data Types

Features in Detail

Syntax Highlighting

Log Level Styling

Table Rendering (NEW)

Timer Tracking (NEW)

Themes (NEW)

Object & Array Expansion (NEW)

Filtering

Performance

API Reference

Attributes

Properties

Methods

Events

Examples

Example 1: Different Data Types

Example 2: Complex Objects

Example 3: Error Handling

Example 4: Timer Tracking (NEW)

Example 5: Table Data (ENHANCED)

Browser Support

Customization

Styling the Host Element

CSS Custom Properties

Background Colors

Text Colors

Log Level Colors

Value Type Colors

UI Element Colors

Example: Custom Dark Theme

Example: Vanilla Breeze integration

Demo

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages