Zplunge - Web Debugging & QA Tools

Bug reporting & screen recording with console/network logs. Map a site's API, compare pages, inspect CSS. Screenshots & QA toolkit.

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 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" 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 way you interacted with it, types and clicks in sequence, and pauses with an on-page panel if a step can't be located, letting you retry, skip, or click by recorded coordinates. Change the start URL to point the same steps at another environment (staging vs. production). Afterwards, a git-diff-style report compares console and network activity between the recording and the replay. Best suited to straightforward, single-page flows for now. ── SHARE TO SHAREPOINT OR GOOGLE DRIVE [BETA] ── Send recordings from the Player straight to a shared link on SharePoint or Google Drive. Sign in once (Microsoft or Google OAuth) and every recording after that uploads and shares with one click. Google Drive access is scoped to files the extension itself creates, never your whole Drive. Chunked upload handles files of any size, and upload history is kept locally. Note: requires your own Azure App Registration or Google Cloud OAuth Client ID, set up once in Settings; off by default. ── ISSUE TRACKER: CREATE FROM PLAYER OR PREVIEW [BETA] ── Create a bug straight from the Player or BBX Preview in the issue tracker your team already uses, such as Jira or GitHub Issues, or post it to a team chat channel. Zplunge drafts the title, description and steps to reproduce and attaches the captured logs as JSON — plus the recording itself from the Player (where the service supports attachments). Oversized log attachments are split automatically. A "Test connection" button in Settings checks the setup with a read-only call. Note: requires your own project/workspace credentials, set up once in Settings; off by default. ── AI BUG SUMMARY & AI-WRITTEN STEPS [BETA] ── Turn a recording or BBX log into a written bug summary with one click, using the AI provider you choose, including a self-hosted model running on your own machine. In the Player, "AI: write steps" turns recorded clicks and inputs into readable reproduction steps, and AI can optionally draft the issues you create. By default Zplunge shows you the exact text before anything is sent. Only a focused subset is sent — console errors, failed requests, poor Web Vitals and recorded steps — with tokens, passwords, and URL parameters stripped first. The request goes straight from your browser to your provider, with your own API key; it never passes through our infrastructure. Note: off by default and subject to your provider's privacy policy. ── EXPORT AS PLAYWRIGHT [BETA] ── Download the steps of a recording as a draft Playwright test (.spec.ts) — a starting point for an automated regression test of the bug you just reproduced. Values typed into password, one-time-code and card fields are never written into the file; the test reads them from environment variables instead. ── BLACKBOX MONITORING ── Always-on passive monitoring that captures console errors, network requests, user interactions, and Web Vitals (LCP, CLS, TTFB, FID, INP) in the background — no manual recording needed. Enable it per subdomain, set a retention window (10 s – 1 h), and open the Preview panel to browse the full event log. Repeated errors are grouped (×47 style) so you see signal instead of noise, with filters by type, including Vitals. WebSocket traffic, analytics beacons, failed resources, and content-security-policy blocks are captured too. When errors or 4xx/5xx failures occur, the toolbar badge turns red with a count — click it to open Preview. ── APP WINDOWS ── Popup and PWA windows hide the extension toolbar — 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, with its own history window of up to 24 hours. The toolbar badge shows both contexts at once ("3|2" = three errors in this tab, two in app windows), and the event log keeps them apart with a Tab / App filter and a host label on each row. ── 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. BlackBox Monitoring and recordings also capture every cookie change (including expiry) and a Storage log of localStorage/sessionStorage changes — each with its own Player tab, masked values, and one-click "Copy as Cookie header" / "Copy as Postman JSON". Step Replay can edit cookies before a run and compares them with the original session afterward. ── SITE MAP & API LIBRARY [BETA] ── With BlackBox Monitoring on, turn on Site Map to build a map of a site while you click through it - no crawler, no setup. Zplunge records each navigation and request once and draws a 2D graph of pages and links (solid arrows = manual navigation, dashed = redirects or XHR), with a thumbnail on each node. Subdomains merge by domain (app.example.com + api.example.com -> example.com). Next to the graph it builds a deduplicated API Library: • 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, and to the button or link that triggered it — with a Highlight action that flashes the element. • Every status code keeps its own request body and response snippet. • Filter by host or status, and export to Postman or OpenAPI 3.0. • Export the graph as PNG or SVG, or merge collections so a team of testers shares one knowledge base. ── CSS INSPECTOR & PIXEL RULER ── Hover over any element to see its computed CSS in a live, draggable tooltip. Click two points to measure the exact pixel distance, with element snapping (Shift), tooltip lock (Ctrl+L), and clearing (Esc). Lock the tooltip and press H / F / A / D / C / V to simulate :hover, :focus, :active, :disabled, :checked, or :focus-visible — the CSS updates live for each state. Active ::before and ::after pseudo-elements are shown too. ── PAGE COMPARISON ── Capture two screenshots and compare them with a pixel-level visual diff in three modes: side-by-side sync-scroll, a reveal slider, or a free overlay you can drag, scale and layer. Supports full-page capture (auto-scroll and stitch), region capture, viewport capture, and local files, with the diff percentage 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. ── PAGE AUDIT: ACCESSIBILITY, EAA, LINKS, SECURITY, COOKIE CONSENT ── Click Audit in the popup to open a panel right on the current page. It runs on the live rendered page, single-page apps included, and has five tabs: • Accessibility — 17 automated WCAG 2.2 A/AA checks covering text alternatives, form labels, headings, color contrast, keyboard focus, and target size. Click a row to highlight the element. • EAA — a European Accessibility Act checklist of all 55 WCAG 2.2 A/AA criteria with their EN 301 549 clauses: automated results are filled in, the rest you mark by hand, remembered per page. • Links — checks every link, image, script, stylesheet and iframe for errors (4xx/5xx, timeouts), redirects and insecure http:// addresses. • Security — a passive check of what the page already sends: security headers, cookie flags, mixed content, and tokens exposed in URLs or storage. Nothing is attacked; it is not a penetration test. • Consent — checks whether trackers and tracking cookies start before the visitor answers the cookie banner: two guided runs (Reject, then Accept) from a clean start, with a per-phase report of requests and cookies. The panel also shows the keyboard Tab order as numbered badges, exports a standalone HTML report, and minimizes to its header so you can keep using the page. Note: automated checks cannot replace manual or screen reader testing. ── EML & PDF INSPECTOR ── Preview .eml email files in 25+ simulated web, desktop and mobile email clients, including dark mode. Switch between Render, HTML source, Raw EML, Inbox preview, and A/B Diff. The audit checks deliverability, accessibility, spam triggers, links, images, fonts, and contrast, and flags HTML and CSS that break in specific clients. Compare two PDFs with a pixel-level diff, or preview and audit .html files. ── INTERFACE LANGUAGES ── Use Zplunge in your own language: the interface is fully translated into seventeen languages, including right-to-left Arabic and Hebrew. Switch anytime in Settings -> General -> Language; open views pick up the change immediately, no reload needed. ── THEMES ── Pick the look in Settings -> Theme: the default dark DeepSea, Cyberpunk, HammerTime, or the light, paper-white Vintage. The theme applies to every view at once, live, including the recording controls and panels Zplunge shows on the page you are testing. ── SETTINGS ── One Settings page (⚙ in the popup) holds all advanced configuration: language, theme, upload credentials, Issue Tracker and AI setup, BBX retention, and Recording Playback Detection domains. Backup & Restore exports or imports every setting as one JSON file (credentials excluded), and a guided tour walks through each section. ── RECORDING PLAYBACK DETECTION ── Add a domain once in Settings and any Zrec/Zlog recording link on it — a bug tracker, a wiki, or an internal file-sharing page — gets a ▶ play button that opens straight into the full Player. No userscript to install. ── 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, including Site Map / API Library data. Nothing is sent to any external server except through features you explicitly configure and trigger: SharePoint or Google Drive upload (to your own account), Issue Tracker (to the workspace you configure), and AI features (a redacted subset of the capture sent directly to the AI provider you choose, with your own API key). The Links and Security audits request only addresses the page already references; the Consent check clears that site's cookies and storage (and, per your setting, those of known tracking domains) to start clean. Passwords, tokens, authorization headers, API keys and cookies are redacted before storage, and password, one-time-code and card fields are masked in recordings. ── IMPORTANT - RESPONSIBLE USE & DISCLAIMER ── Zplunge 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 or regulated information without authorization. The extension is provided "as is", without warranties of any kind. Automated checks are aids, not a substitute for manual testing or professional review.