Zplunge

Record screen with logs, take screenshots, compare pages, inspect CSS and preview EML/PDF files. Web debugging made simple.

Zplunge is a professional web debugging extension built for frontend developers, QA engineers, and testers who need more than DevTools alone. ── SCREEN RECORDING WITH SYNCHRONIZED LOGS ── Record any browser session and replay it in the built-in Player — with console logs, network requests (XHR, Fetch, WebSocket), and user interactions locked to the video timeline. Trim recordings to the exact moment that matters, split large files into time-based or size-based parts, and export both video and logs as a matched pair (Zrec / Zlog). The Player supports playback speed control, log filtering, and frame-accurate seeking. ── SHAREPOINT UPLOAD [BETA] ── Send recordings directly from the Player to a shared SharePoint folder with one click. Configure your Azure App Registration credentials once in Settings, and every recording can be uploaded and shared as a link — without leaving the browser. Chunked upload handles files of any size. Upload history is stored locally with date, filename, size, and direct link. Note: SharePoint upload is in beta — requires Azure App Registration setup by your IT administrator. ── BLACKBOX MONITORING ── Always-on passive monitoring that captures console errors, network requests, user interactions, and Web Performance Vitals (LCP, CLS, TTFB, FID, INP) in the background — no manual recording needed. Enable it per subdomain, set a global retention window (10 s – 1 h) in Settings, and open the Preview panel to browse a full event log. Repeated errors and warnings are automatically grouped (×47 style) so you instantly see signal vs. noise instead of an endless list. Filter by type — including a dedicated ⚡ Vitals filter. WebSocket connections are fully tracked. When errors or network failures (4xx/5xx) are detected, the extension icon badge turns red with a count — click to open BBX Preview. Badge resets after you open Preview. ── CSS INSPECTOR & PIXEL RULER ── Enable the inspector and hover over any element to see its computed CSS in a live, draggable tooltip. Click two points anywhere on the page to measure the exact pixel distance. Supports element snapping (Shift), tooltip lock (Ctrl+L), and measurement clearing (Esc) — without opening a single DevTools tab. Lock the tooltip and press H / F / A / D / C / V to simulate :hover, :focus, :active, :disabled, :checked, or :focus-visible — the computed CSS updates live for each state. The tooltip also shows ::before and ::after pseudo-element styles (content, display, position, size, color) when they are active. ── PAGE COMPARISON ── Capture two screenshots and compare them with a pixel-level visual diff. Three view modes: • Side-by-side sync-scroll — ideal for full-page layout checks • Reveal slider — drag to expose differences • Overlay manipulation — freely drag, scale, and layer both screenshots Supports full-page capture (auto-scrolls and stitches), region capture (draw a selection box), local file load, and standard viewport capture. Diff percentage is shown in real time. ── SCREENSHOT EDITOR ── Annotate any screenshot without leaving the browser: draw rectangles and arrows, crop, and export — all on a multi-layer canvas editor. ── A11Y AUDIT ── Click ♿ A11y in the popup to run a WCAG 2.1 accessibility audit on the current page — no tab switch needed. The audit runs on the live rendered DOM (React, Vue, Angular included) and checks 14 criteria across Levels A and AA: missing alt text, missing form labels, empty links, heading level skips, missing lang attribute, focus style removal, tabindex misuse, iframes without title, aria-hidden on focusable elements, and color contrast (1.4.3 AA — checks foreground/background contrast ratio against the 4.5:1 standard for normal text and 3:1 for large text). Results appear in a collapsible right-side panel; click any row to scroll to and highlight the element. Additional tools inside the panel: • ⌨ Tab order — overlays numbered badges on every focusable element in keyboard navigation order, with hierarchical numbering (e.g. 3.1, 3.2) for nested interactive containers; badges follow scroll in real time • 📄 Export — downloads a standalone HTML report with all findings, element HTML snippets, and computed color swatches per issue • ─ Minimize — collapses the panel to just the header so you can interact with the page while the audit remains open Note: automated checks cannot replace full manual testing, screen reader testing, or cognitive load assessment. ── EML & PDF INSPECTOR ── Preview .eml email files rendered in 16+ simulated email clients (Gmail, Outlook, Apple Mail, Samsung Mail and more — across Web, Desktop, and Mobile categories). Switch between Render preview, HTML source, Raw EML, Inbox preview, and A/B Diff views. The built-in audit panel checks deliverability, accessibility, spam triggers, links, images, fonts, color contrast, and a dedicated Client Compatibility section — detecting elements that break in specific clients: CSS Grid/Flexbox (Outlook), background-image (Outlook), <video>, form controls, images without width/height, web fonts, deeply nested tables, and more. Load two PDFs side by side for a pixel-level visual diff powered by pixelmatch. Load .html / .htm files to preview, inspect source, and run an accessibility audit. All exports go through the built-in Screenshot Editor for annotation before saving. ── SETTINGS ── A dedicated Settings page (accessible via ⚙ in the popup) consolidates all advanced configuration: SharePoint / Azure credentials for upload, global BBX retention window, and Tampermonkey script generation — all in one place. A guided tour (? Tour button) walks through each section on first visit. ── TAMPERMONKEY INTEGRATION ── Generate a Tampermonkey userscript for any domain so teammates can play back Zrec/Zlog files without installing Zplunge. Open Settings → Tampermonkey Script Creator, enter a hostname, download the script. It automatically adds a ▶ play button next to every recording link — on Jira, Confluence, or any internal file-sharing page. ── KEYBOARD SHORTCUTS ── Ctrl+Shift+F Start / Stop Recording Ctrl+Shift+S Take Screenshot Ctrl+Shift+L Toggle CSS Inspector & Ruler ── PRIVACY ── All data stays in your browser — stored locally via chrome.storage.local and IndexedDB. Nothing is sent to any external server except when you explicitly use the SharePoint upload feature (data goes only to your organization's own Microsoft 365 tenant). Sensitive values (passwords, tokens, authorization headers, API keys, cookies) are automatically redacted before storage.