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, frame-accurate seeking, timestamped Comments pinned to the timeline, one-click "Copy Steps" as readable text for bug reports, and Copy as cURL / Copy as Fetch for any captured request. ── STEP REPLAY [BETA] ── Reproduce a recorded session automatically in a fresh tab — no re-clicking through the bug by hand. Zplunge finds each element the same way you interacted with it (stable selector, then a fallback scan), types and clicks in sequence, and pauses with a draggable on-page panel if a step can't be located, letting you retry, skip, or click by recorded coordinates instead. Edit the start URL before replaying to point the same steps at a different environment (staging vs. production). When it's done, get a git-diff-style report comparing console and network activity between the original recording and the replay. Best suited to straightforward, single-page flows for now. ── 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. Analytics beacons, resources that fail to load, and anything blocked by a site's content security policy are captured too. 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. ── APP WINDOWS ── Popup and PWA windows hide the extension toolbar, so monitoring could never be switched on from inside them — which is awkward, because that is often exactly where the failing requests are. Add the host once under Settings → App Windows and monitoring starts on its own in any window that site opens. Matching is by host, so it keeps working as the app moves between pages. Each host gets its own history window, up to 24 hours (12 by default), so you can still look up what happened earlier in the day. The toolbar badge shows both contexts at once — the left half is the tab you are on, the right half is your app windows, so "3|2" reads as three errors here and two over there. In the event log, a Tab / App filter and a marker on each row keep the two apart, and every entry has a Log button that opens its own history directly. Opening the log from the toolbar shows the current tab and every open app window together — each row labelled with its host, each site keeping its own history window — so you no longer have to guess which log to open. ── COOKIES & STORAGE LOG ── The Cookies popup tile is a full editor for the current tab's cookies — view, add, edit, and delete, with Secure, HttpOnly, SameSite and expiry all exposed. Independently, BlackBox Monitoring and recordings passively capture every cookie change (including expiry, shown as its own "Cookie expired" entry) and a Storage log for localStorage/sessionStorage changes — both get their own tab in the Player, with masked values and one-click "Copy as Cookie header" / "Copy as Postman JSON" for cookies. Step Replay can edit cookies before a run and compares them against the original session in the Diff report afterward. ── 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 Recording Playback Detection domains — all in one place. A Backup & Restore section exports or imports every setting as one JSON file (credentials excluded — each teammate keeps their own). A guided tour (? Tour button) walks through each section on first visit. ── RECORDING PLAYBACK DETECTION ── Zplunge finds Zrec/Zlog recording links on its own — no separate userscript to install or maintain. Add a domain once in Settings and any matching link on that domain — Jira, Confluence, or any internal file-sharing page — gets a ▶ play button that opens straight into the full Player, with Export, Compare, Issue Tracker and SharePoint upload all available. ── 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.