BugTest — Visual Bug Reporter & Web QA Toolkit

Capture, annotate, and report visual bugs on any page — with device previews, a live element inspector, and SEO checks.

BugTest is a Chrome devtool for visual QA. Open the overlay on any webpage, capture and annotate a bug, preview how the page looks on different devices, hover any element to see its computed CSS, and run a quick on-page SEO check — all from one toolbar icon, without leaving the tab you're testing. Everything happens locally inside your browser. BugTest does not send your bugs, screenshots, or page data to any server. There is no account to create, no signup, no telemetry, and no tracking. ──────────────────────────────────────────── HOW TO USE BUGTEST ──────────────────────────────────────────── 1. Open the overlay Click the BugTest icon in the toolbar, or press Ctrl+Shift+D (Cmd+Shift+D on Mac). A clean panel appears on top of the current page with five sections in the top navigation: Devices, Responsive, SEO, Info Mode, and Bugs. 2. Pick a device The Devices panel shows realistic phone, tablet, and desktop frames. A small "Frequent test devices" group at the top gives you one-click access to the twelve widths most teams test against: 1920, 1440, 1366, 1280, 1024, 968, 768, 560, 460, 390, 360, and 320 pixels. Click any card and the iframe instantly resizes. You can also rotate, zoom, and create your own custom presets. 3. Check the page in detail • The SEO tab scans the host page and shows you its meta tags, headings, images and their alt status, internal and external links, social-share cards (Open Graph, Twitter, Facebook), JSON-LD and microdata structured data, favicons, hreflang entries, and a composite score. • Info Mode lets you hover any element inside the preview to see its tag, classes, dimensions, font, colors, padding, margin, border-radius, and display value. Click an element to pin it so you can keep its details visible while you scroll. 4. Capture a bug Press Ctrl+Shift+B (Cmd+Shift+B on Mac), or click "Create bug" in the toolbar. The cursor switches to a crosshair. Drag a rectangle around the broken area and BugTest screenshots just that region. 5. Annotate the screenshot Use the toolbar to add arrows, boxes, circles, and comment pins. Each annotation can be selected, dragged, and resized. Undo and redo are tracked in a 50-step history with Ctrl+Z and Ctrl+Shift+Z. 6. Save and share A small form appears with the cropped screenshot. Type a title, set a priority (low, medium, or high), and optionally fill in expected vs actual behavior plus any notes. Saved bugs appear as cards in the right panel. Click "View all" to open the full bug board, which shows every report expanded by default with inline edit and delete. Copy all bugs to the clipboard — they paste cleanly into Jira, Slack, Notion, Google Docs, and Gmail — or open a printable report to save as a PDF. ──────────────────────────────────────────── WHAT'S INSIDE ──────────────────────────────────────────── Device simulator Over eighty realistic device profiles covering iPhones from the SE through the 16 Pro Max, Android phones from Samsung, Pixel, OnePlus, Xiaomi and others, foldables, tablets including iPad and Galaxy Tab, and desktop resolutions up to 4K and 5K. The preview iframe renders at each device's true logical resolution so your media queries fire correctly. Responsive controls Custom width and height inputs, rotation, fit-to-viewport zoom, and live breakpoint detection. A configurable design grid with 4, 6, 8, 12, or 16 columns, adjustable gutters, optional baseline, and breakpoint markers helps you check pixel-perfect implementation against your mockups. Visual bug reporter Drag-to-select screenshot capture, annotation tools (arrow, box, circle, comment, undo, redo, clear), per-bug title, priority, expected, actual, and notes fields, and support for multiple screenshots per bug. Bug board A full-screen modal showing every saved bug fully expanded by default. Live search, priority filter, sort, expand-all, collapse-all, inline editing, and per-row delete. Export everything as rich-text for tracker tools or as a printable report. Element inspector A floating tooltip that shows the computed CSS of whatever you hover. Click to pin an element so its details stay visible — pinned elements are captured inside your bug screenshot, so you can file an issue about a specific component with its computed styles already attached. On-page SEO check A six-tab analyzer (Summary, Headers, Images, Links, Social, Tools) that surfaces every metadata signal on the page along with a composite score and clear suggestions of what to fix. ──────────────────────────────────────────── WHO IT IS FOR ──────────────────────────────────────────── - Web developers debugging responsive layouts and filing visual issues to their team - QA engineers running quick checks across different screen sizes - Designers comparing implementations against their mockups using the column grid - Product managers capturing feedback on a page without switching tools - Marketing teams verifying social share previews and meta tags before launch ──────────────────────────────────────────── PRIVACY AND DATA ──────────────────────────────────────────── BugTest does not collect, transmit, or share any user data. The extension makes no outbound network requests of any kind. There is no analytics, no error reporting, and no remote configuration. Everything you create stays on your device: - Saved bugs and screenshots are stored in your browser's IndexedDB - Settings and custom device presets are stored in chrome.storage.local - The per-tab open state is stored in chrome.storage.session - Annotation undo history is held in memory and discarded when the tab closes The one permission with a network angle is declarativeNetRequest. BugTest uses it to remove X-Frame-Options and Content-Security-Policy frame-ancestors response headers on the single tab where you've opened the overlay, and only while the overlay is visible. This is required so sites that normally refuse to be embedded can still be rendered inside the device-simulator iframe. As soon as you close the overlay, the original headers are restored. No headers are touched on any other tab. ──────────────────────────────────────────── KEYBOARD SHORTCUTS ──────────────────────────────────────────── - Ctrl+Shift+D or Cmd+Shift+D — Toggle BugTest on the current tab - Ctrl+Shift+B or Cmd+Shift+B — Go straight to bug report mode - Ctrl+Z and Ctrl+Shift+Z (or Cmd+Z and Cmd+Shift+Z) — Undo and redo annotations - Esc — Close the overlay or any open modal ──────────────────────────────────────────── GETTING STARTED ──────────────────────────────────────────── 1. Install BugTest from the Chrome Web Store 2. Pin the toolbar icon so it's always one click away 3. Open any webpage — localhost, a staging environment, or a public site 4. Press Ctrl+Shift+D (Cmd+Shift+D on Mac) 5. Pick a device, drag a selection around any bug, annotate it, and share the report with your team That's it. No account, no setup, no waiting.