Interactive Demos

Each demo shows the code, a trigger button, and a dedicated console to see results. Click buttons to run demos.

Console Methods

Log Levels

Five log levels for different message types: log, info, warn, error, and debug.

console.log('Standard log message') console.info('Informational message') console.warn('Warning message') console.error('Error message') console.debug('Debug message')

console.table()

Display tabular data in a formatted table.

const users = [ { id: 1, name: 'Alice', role: 'Admin' }, { id: 2, name: 'Bob', role: 'User' }, { id: 3, name: 'Charlie', role: 'Moderator' } ] console.table(users)

console.time()

Measure execution time with named timers.

console.time('performance-test') // ... some code to measure ... console.timeLog('performance-test', 'Checkpoint') console.timeEnd('performance-test')

console.group()

Create collapsible groups of related logs.

console.group('User Details') console.log('Name: John Doe') console.log('Email: john@example.com') console.groupEnd() console.groupCollapsed('Collapsed Group') console.log('Hidden content') console.groupEnd()

console.trace() / count()

Stack traces and call counters for debugging.

function innerFunction() { console.trace('Stack trace') } innerFunction() console.count('button-clicks') // button-clicks: 1 console.count('button-clicks') // button-clicks: 2

Data Types

Primitives

Strings, numbers, booleans, null, undefined, BigInt, and Symbol.

console.log('Hello, World!') console.log(42, 3.14159, Infinity, NaN) console.log(true, false) console.log(null, undefined) console.log(123n, BigInt(9007199254740991)) console.log(Symbol('mySymbol'))

Objects & Arrays

Expandable objects with nested properties.

console.log({ name: 'John', age: 30, active: true }) console.log([1, 2, 3, 4, 5]) console.log({ user: { profile: { city: 'San Francisco' } }, hobbies: ['coding', 'reading'] })

Collections

Map and Set data structures.

const map = new Map([ ['name', 'Alice'], ['age', 30], [{ key: 'obj' }, 'object key'] ]) console.log('Map:', map) const set = new Set([1, 2, 3, 'hello', { a: 1 }]) console.log('Set:', set)

Special Types

Date, RegExp, Error, and DOM elements.

console.log(new Date()) console.log(/[a-z]+/gi) console.error(new Error('Something went wrong!')) console.log(document.body)

Theme Comparison

The component supports dark and light themes via the theme attribute.

Setting Theme via HTML Attribute

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

Programmatic Theme Control

const consoleEl = document.querySelector('browser-console') // Get current theme const theme = consoleEl.getTheme() // 'dark' or 'light' // Set theme consoleEl.setTheme('light') consoleEl.setTheme('dark')

Dark Theme

Light Theme

Stress Tests

Performance Testing

Test with large objects, multiple rapid logs, and mixed types.

// Large object with 50 items const largeObj = { data: Array.from({ length: 50 }, (_, i) => ({ index: i, value: Math.random() })) } console.log(largeObj) // Multiple rapid logs for (let i = 0; i < 10; i++) { console.log(`Entry #${i}`, { timestamp: Date.now() }) }