LogKeeper

Capture and inspect console logs, network errors, and user interactions in real-time. A lightweight browser debugging companion.

LogKeeper is a lightweight browser debugging extension that captures and organizes everything happening in your web application — without opening DevTools. 🔍 WHAT IT CAPTURES • Console logs, warnings, errors, info, and debug messages • Network failures (4xx, 5xx, connection errors) with full request/response details • Unhandled JavaScript exceptions with stack traces • Unhandled Promise rejections • Content Security Policy (CSP) violations with directive and source details • WebSocket connection errors and close events • Storage changes — cookies, localStorage, and sessionStorage mutations • User interactions as breadcrumbs (clicks, navigation, form submissions, scrolls) 🚨 INCIDENT DETECTION • Automatically groups recurring errors into incidents based on fingerprint matching • Configurable threshold (how many hits) and time window (1 min to 1 hour) • Active vs. resolved incident tracking with duration and occurrence count • Auto-resolve incidents after a configurable quiet period • Resolve, reopen, or delete incidents manually 🧩 FRAMEWORK DETECTION • Automatically detects React, Vue, and Angular with version and mode info • Enriches errors with the active component name at the time of failure • Component-aware incident grouping — same error in different components = separate incidents • Framework-specific diagnostic hints for common error patterns • Component breadcrumb trail showing the hierarchy when errors occur 🔁 REGRESSION & PATTERN DETECTION • Regression detection — flags errors that reappear after being absent (configurable from 6 hours to 14 days) • Error pattern detection identifies bursts, periodic errors, cascades, correlated clusters, and flapping issues • Patterns displayed as color-coded badges directly on log entries 📊 PERFORMANCE MONITORING • Core Web Vitals (LCP, CLS, INP, FCP, TTFB) with good/needs-improvement/poor ratings • LCP element attribution and CLS layout shift sources • Resource analysis by type (scripts, styles, images, fonts, XHR/fetch) • Long task detection with duration and severity classification • Top offenders — identifies which scripts cause the most long tasks • Memory usage monitoring with heap size tracking • Performance snapshots — save and compare metrics across page loads • Slow request warnings — flag any request exceeding a configurable threshold 🌊 NETWORK WATERFALL • Visual timeline of all network requests — like DevTools Network panel, but passive • 6 color-coded timing phases: Stalled, DNS, Connect, TLS, Waiting (TTFB), Download • Filter by resource type, status code, domain, and free-text search • Sort by start time, duration, or transfer size • Slow request highlighting (orange >1s, red >3s) • Hover tooltips with detailed timing breakdown • Keyboard navigation (j/k, arrow keys, Esc) • Multi-tab view — switch between pages when multiple tabs are monitored • Auto-refresh enabled by default (every 3 seconds) • Session tag snapshots — automatically saves waterfall data when tagging sessions • Export as clipboard report or JSON file 🔀 COMPARE TOOL • Compare two sets of log data side-by-side to identify regressions, fixes, and changes • Compare by session tag, archive, time range, or URL prefix • Entries matched by fingerprint and classified: New, Fixed, Worsened, Improved, Unchanged • Level distribution chart with animated bars • Auto-compare when session tags follow version patterns (e.g., "v1.2.3" vs "v1.2.4") • Regression alert banner when error count increases significantly • Framework component diff — error count changes per component • Performance diff — Core Web Vitals comparison with delta values • Shareable URL (encodes parameters only, never log data) 📡 NETWORK ACTIVITY • Records failed HTTP requests with full context — including resource loads (stylesheets, scripts, images, fonts) enriched with HTTP status codes, request/response headers, timing, and server IP • Captures request/response headers and bodies (request body up to 2048 chars) • Copy failed requests as cURL commands for terminal replay • Export as HAR files for sharing with your team 🍪 STORAGE CHANGE TRACKING • Monitor cookie changes (JS-visible and httpOnly) • Track localStorage and sessionStorage mutations • Useful for debugging auth flows, session persistence, and state management • Each storage type can be toggled independently 🧭 BREADCRUMB TRAIL & REPRO STEPS • Tracks user clicks, keyboard events, page navigations, scroll activity, form submissions, and visibility changes • Provides a timeline of what the user did leading up to an error • Auto-generates step-by-step reproduction instructions from breadcrumbs • Copy repro steps as plain text or Markdown for bug trackers 🏷️ SESSION TAGGING • Label your debugging sessions (e.g. "Testing checkout", "Reproducing bug #42") • Filter logs by session tag to isolate specific test runs • Tags are preserved in exports and archives 📌 PINNING & NOTES • Pin important log entries so they always appear at the top • Add notes to pinned entries for context and annotations • Export pinned entries separately for focused bug reports • Pinned logs are protected from retention cleanup by default 📸 SCREENSHOTS • Automatically captures screenshots when errors occur • View screenshots alongside error details for visual context • Rate-limited (1 per 2 seconds) to avoid excessive storage 🗺️ SOURCE MAP RESOLUTION • Resolve minified stack traces to original source code positions • Shows original file names, function names, and line numbers • Works when source maps are deployed alongside production code 🔀 DIFF VIEW • Compare two occurrences of the same error side-by-side • Highlights field differences: message, URL, status, duration, headers, stack trace • Quickly identify what changed between error occurrences 🔴 SCREEN RECORDING • Record your browser tab or entire screen to capture visual context alongside logs • Tab mode captures DOM content only — ideal for focused single-page bug reproduction • Screen mode captures everything including cursor movement — ideal for multi-tab workflows • Recorder control window with live timer, pause/resume, and stop • Pause to skip irrelevant sections — paused time is excluded from the final video • MP4 (Chrome 128+) or WebM output, auto-downloaded on stop • Configurable max duration (15 min to no limit) with auto-stop 🖱️ CLICK HIGHLIGHTS & ACTION SUMMARY • Track clicks, typing, key presses, shortcuts, and scrolling during Tab recordings • Animated ripple effects at click positions — captured directly in the recording video • Auto-generates a structured action timeline when the recording stops • Stats overview: total actions, duration, clicks, and keyboard interactions • Color-coded visual timeline with page navigation markers • Copy timeline to clipboard or download as .txt for pasting into bug trackers 🎬 RECORDING SUMMARIES • Action timelines are automatically archived when a Tab recording ends • Browse past summaries from three locations: Archive Search sidebar, Preferences stats, and the Recording Summary page • View full timeline inline in Archive Search — no separate page needed • Compact stats dashboard in Preferences (saved count, actions, clicks, keystrokes) • Delete individual summaries or clear all at once • Auto-purge after 90 days to manage storage 📚 SESSION ARCHIVES • Automatically archive sessions for later review • Auto-archive logs before clearing so you never lose data accidentally • Compressed storage with LZ-string to minimize IndexedDB usage • Search archived sessions by tag and time range • Recording summaries accessible directly from the Archive Search sidebar • Configurable archive retention (7–90 days) 🔇 IGNORE RULES • Mute noisy alerts with one click • Fingerprint-based matching groups similar errors automatically • Configurable suppression duration (5 minutes to permanent) • Manage active rules from the Preferences page 📥 EXPORT & BUG REPORTS • One-click bug reports with full Markdown output • Export logs as JSON, CSV, or Markdown • Export pinned entries only for focused reports • All exports include framework info, patterns, regression data, and breadcrumbs ⚙️ CONFIGURABLE • Log retention: 5 minutes to 1 hour • Monitor all tabs, selected tabs only, or specific URL scopes • Badge notifications for new errors/warnings • Dark and light themes • Three popup modes: default popup, floating window (📌), or full browser tab • Storage quota dashboard with smart purge options • Persistent storage requests to prevent browser eviction • Performance, Incidents, Framework Detection, and Waterfall can be toggled independently • Click Highlights toggle for Tab recordings • Built-in User Guide accessible from Preferences 🛡️ PRIVACY FIRST • Zero data collection — everything stays in your browser • No analytics, no telemetry, no external servers • Authorization and cookie headers are automatically redacted • Screen recordings stay 100% local — nothing is uploaded • Works entirely offline 💡 PERFECT FOR • Frontend developers debugging web applications • QA engineers reproducing and documenting bugs • Performance engineers optimizing Core Web Vitals • Support teams capturing error context from customer sessions • Anyone who wants to see what's happening under the hood LogKeeper runs quietly in the background and captures everything so you don't have to keep DevTools open. When something goes wrong, click the icon and get the full picture — complete with incidents, framework context, error patterns, breadcrumbs, repro steps, network waterfall, performance metrics, screen recordings, action timelines, and related events.