Media
1 item
Description
Filter and explore nested console.log objects with dot-path queries in a dedicated DevTools panel 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