Zplunge - Web Debugging & QA Tools

QA & web debugging toolkit: record sessions with logs, map a site's API, compare pages, inspect CSS, preview EML/PDF.

Zplunge helps frontend developers, QA engineers, and testers reproduce, document, and share bugs faster - without living in DevTools. Record what happened, see the network and console behind it, map a site's API as you click, and compare or inspect pages on the spot. ── 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. ── SITE MAP & API LIBRARY [BETA] ── With BlackBox Monitoring on, turn on the Site Map switch to build a map of a site while you click through it - no crawler, no setup. Zplunge records each navigation and request once (no duplicates) and draws a 2D graph of pages and the links between them. Solid arrows are manual navigations, dashed ones are redirects or XHR. Subdomains merge by second-level domain (app.example.com + api.example.com -> example.com), and each node shows a thumbnail of the page. It also builds a deduplicated API Library next to the graph: • Variable path segments merge into patterns (/orders/{id}/items/{id}); query parameter names are kept, values ignored. • Each endpoint is tied to the pages it was called from - click a node to see its requests. • Zplunge records which button or link triggered each request, with a Highlight action that opens the page and flashes the element. • Every status code keeps its own request body and response snippet; new body fields from later calls are added, never overwritten. • Filter by host or status (2xx-5xx), group endpoints, and export to Postman or OpenAPI 3.0. • Export the graph as PNG or SVG (pick which nodes), or merge collections so a team of testers shares one knowledge base. Export or import the full map as JSON. This feature is in active development (beta). ── 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 in 25+ simulated clients (Gmail, Outlook, Apple Mail, Samsung Mail and more - across Web, Desktop, and Mobile), with a working dark-mode preview. Switch between Render, HTML source, Raw EML, Inbox preview, and A/B Diff. The audit panel checks deliverability, accessibility, spam triggers, links, images, fonts, and color contrast, plus a Client Compatibility section that flags elements which break in specific clients: CSS Grid/Flexbox and 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 diff (pixelmatch). Load .html / .htm files to preview, inspect source, and run an accessibility audit. Exports go through the built-in Screenshot Editor for annotation. ── 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 Alt+Shift+S Take Screenshot Alt+Shift+L Toggle CSS Inspector & Ruler ── PRIVACY ── All data stays in your browser - stored locally via chrome.storage.local and IndexedDB. This includes Site Map / API Library data, which is captured passively only while you enable it and never leaves your machine. 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. ── IMPORTANT - RESPONSIBLE USE & DISCLAIMER ── Zplunge is a debugging tool that captures technical data (network requests, console logs, interactions, screenshots) from pages you choose to enable it on. You are responsible for having the right to capture and process that data, and for not using it on systems with sensitive, confidential, or regulated information without proper authorization. The extension is provided "as is", without warranties of any kind; you use it at your own risk. Automated checks (such as the accessibility audit and email compatibility) are aids, not a substitute for manual testing or professional review. See the full Privacy Policy for details.