Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
browser-console
A zero-dependency web component that captures global console.* calls and renders them as a styled, filterable, themable in-page console — with syntax-highlighted values, console.table rendering, timers, groups, and stack traces. VB ships a --bc-* token bridge so the console picks up the active theme automatically (surface, text, border, plus dedicated severity and value-type colors).
Where to find it
- npm:
@profpowell/browser-console - GitHub: ProfPowell/browser-console
- Live demos: profpowell.github.io/browser-console
- License: MIT
Install
Via CDN:
HTML
<script type="module" src="https://unpkg.com/@profpowell/[email protected]/dist/browser-console.js"></script>Or via npm:
BASH
npm install @profpowell/browser-consoleJAVASCRIPT
import '@profpowell/browser-console';Not currently bundled into Vanilla Breeze. VB does ship a --bc-* bridge in src/utils/external-components.css mapping all --bc-* tokens onto the active VB theme — so the moment you add the script, theming is automatic.
Demo
A live <browser-console> with buttons that emit console.log, info, warn, error, table, and a mixed-value object. Severity colors (log/info/warn/error) and value-type accents (string/number/boolean/regex/element) all resolve from VB tokens. Switch the site theme to see the console re-skin.
Quick reference
| Attribute / API | Purpose |
|---|---|
auto-hook | Boolean, default true. Patches global console.* on mount; set to "false" to opt out and feed logs manually. |
theme | "dark" or "light". Default "dark". With the VB bridge active, theming follows VB anyway — set this only when you want to pin one mode. |
.maxLogs | Property — scrollback cap (default 1000). |
.setFilter("log" | "info" | "warn" | "error" | null) | Show only one severity (or all when null). |
.setSearchQuery(str) | Substring filter across log messages. |
.clearLogs() | Wipe the visible output. |
.hookConsole() / .unhookConsole() | Manually patch / unpatch the global console. |
.feed.addLog({method, data, timestamp}) | Push a log without going through window.console. |
Captures the full console.* surface: log/info/warn/error/debug/table/time/timeEnd/timeLog/group/groupEnd/groupCollapsed/trace/count/countReset/dir/clear/assert.
VB integration
browser-console exposes a --bc-* custom property surface — backgrounds, severity colors, value-type accents, scrollbars, table chrome — but it does not read VB tokens directly. The bridge in src/utils/external-components.css maps:
- Surfaces & chrome →
--color-surface,--color-surface-raised,--color-border,--color-text,--color-text-muted - Severity →
--color-text(log),--color-info,--color-warning,--color-danger - Warn / error row tints →
color-mix()with--color-warning/--color-danger - Value-type accents →
--color-success(strings),--color-info(numbers/dates),--color-warning(booleans),--color-accent(functions),--color-danger(regex),--color-primary(DOM elements)
Override any individual --bc-* token on the element or in a theme block to customize a single console instance.
Usage
HTML
<!-- Auto-capture every console.* call site-wide --><browser-console></browser-console> <!-- Or feed logs manually --><browser-console id="log" auto-hook="false"></browser-console><script type="module"> const c = document.getElementById('log'); c.feed.addLog({ method: 'info', data: ['Hello from the app boot sequence.'], timestamp: Date.now() });</script>Give the element a definite block size (e.g. block-size: 60vh) — it does not auto-expand.