Console Lens

About

Console Lens — Structured Log Explorer for DevTools

Stop squinting at collapsed console objects. Console Lens gives your browser's console output the structure it deserves — a searchable, filterable dashboard with dot-path queries, live column extraction, and an interactive JSON tree, all inside a dedicated DevTools panel.

WHAT CONSOLE LENS DOES

Console Lens intercepts every console.log, debug, info, warn, and error call the moment the page starts — before any framework code runs. Each call is captured, labeled, and made instantly searchable without touching your source code or adding any SDK.

Open DevTools, click the Console Lens tab, and start filtering.

DOT-PATH QUERY LANGUAGE

The query bar is the heart of Console Lens. Type a dot-path to extract values from nested objects as column pills on every card:

• user.id — show each log's user ID at a glance
• event.payload.status — surface deeply nested fields without expanding anything
• status=active — filter: only show logs where that field equals "active"
• role=admin,editor — OR filter: match either value
• status=active type=request — AND filter: space-separated, both must match
• items.id=42 — filter on values inside arrays — Console Lens auto-flattens them
• referrer=null — match logs where the field is explicitly null

Filters are live. Results update as you type with a 350 ms debounce so the panel never feels sluggish.

KEY FEATURES

Smart label detection
Console Lens automatically extracts a human-readable label from every log call:
— printf-style format strings: console.log('%c MyEvent %s', css, name) → "MyEvent name"
— console.group / console.groupCollapsed headers
— Key fingerprints for anonymous objects: {id, status, timestamp, …}

Interactive JSON tree
Every log card expands into a fully interactive JSON tree. Objects and arrays collapse to {…5 keys} / […12 items] by default. Click any node to expand it. Click any key to copy its full dot-path to clipboard — a ✓ confirms the copy.

Consecutive duplicate collapsing
When the same log fires in a tight loop (a fetch retry, a polling interval, an animation frame handler), Console Lens collapses all consecutive repeats into a single card with a ×N badge. Your panel stays readable even on noisy pages.

Level filtering
One-click filter buttons isolate log, debug, info, warn, or error calls. Combined with the query bar for surgical precision.

Label search
Separate label filter bar for quick free-text search across log labels — useful when you know what event you're looking for but don't need a structured query.

Field stripping
Hide sensitive or noisy fields from the JSON display by entering dot-paths in the Settings panel (e.g. user.password, meta._trackingId). Original captured data is untouched — stripping is display-only.

Right-click export
Right-click any card to Copy as JSON (pretty-printed) or Copy label to clipboard.

Configurable limits
Settings panel lets you tune:
— Panel history: 500 / 1 000 / 2 500 / 5 000 entries (or unlimited)
— Page buffer: controls the in-page ring buffer size
— Clone depth: how deep nested objects are captured (up to 12 levels by default)
All settings persist across DevTools sessions.

Keyboard shortcuts
— / — jump focus to the query bar from anywhere in the panel
— Escape — clear the query and return focus to the page

Sort keys A→Z
Toggle alphabetical key sorting in JSON trees for consistent, scannable output.

Clear on navigation
Optional auto-clear when the inspected page navigates, so you always start fresh.

Virtual scrolling
The card list uses a virtualized DOM — only the cards in (and near) the viewport are rendered. Thousands of entries stay smooth with no jank.

ZERO CONFIGURATION

No SDK. No npm install. No changes to your source code. No build step. Console Lens works on any website immediately. If the page calls console.log(label, { object }), Console Lens captures it.

HOW IT WORKS

Console Lens patches console.log, debug, info, warn, error, group, and groupCollapsed in the page's own JavaScript context using a Manifest V3 content script with world: MAIN. This means it runs at document_start, before any page scripts, so nothing is missed.

Intercepted logs are buffered in a page-side ring buffer and polled by the DevTools panel in batches of 100 via chrome.devtools.inspectedWindow.eval. The panel adapts its polling rate — 50 ms while draining a backlog, 300 ms at idle — to balance responsiveness with CPU use.

Objects are deep-cloned with circular reference detection, depth limiting (configurable), array/key count limits, and graceful handling of DOM nodes, functions, Symbols, BigInts, Dates, RegExps, and Errors. The original console behavior is fully preserved — Console Lens never suppresses or modifies output.

PRIVACY

Console Lens never sends any data anywhere. All captured logs stay in your browser's memory. Settings are stored locally on your device with chrome.storage.local — never synced, never uploaded. The extension makes no network requests. Full privacy policy: https://github.com/xhw994/console-lens/blob/main/PRIVACY.md

TESTED ON
Major websites and sites that I can be an admin


Console Lens is open source. Source code and issue tracker: https://github.com/xhw994/console-lens