BugShot — Bug Reports in One Shot

Discover, fix, capture, and report bugs in one workflow.

BugShot — design QA and bug reporting, done right in your browser Design review, bug reports, style fixes, issue creation. No more bouncing between DevTools, screenshot tools, and issue trackers. BugShot is a Chrome extension that lets you inspect and restyle any element right on the page, then send a complete issue — with the change history, logs, screenshots, and recordings bundled in — straight to Jira, GitHub, Linear, and 4 more issue trackers, or share it to a Slack channel or DM. --- What you can do with BugShot 🎨 Styling — fix it before you even describe it - Element picker: Hover to highlight and click to select any DOM element on the page, even deeply nested ones. - Live CSS editing: Edit layout, spacing, sizing, color, typography, and borders through structured fields, or switch to a syntax-highlighted CSS code editor to edit raw CSS directly (prefilled with the element's current styles, with autocomplete, inline color swatches, arbitrary properties, and !important). The result shows on the live page instantly. - Design token awareness: Resolves var() chains and shows the token name (e.g. --color-primary) instead of the computed value, so your report speaks your design system's language. - Before/after diff: Every change is tracked and laid out as a before → after table in the issue. Edits across multiple elements stack up and ship together. 📸 Capture — grab exactly what's on screen and mark it up - Element capture: Crop a single element into a clean screenshot, with its DOM selector attached to the issue automatically. - Area capture: Drag any region of the screen to capture a precise slice. - Annotation: Mark up the shot with arrows, text, shapes, and highlights before attaching it. 🎬 Recording — when a still isn't enough, capture the behavior - Tab recording: Record the current tab, up to 60 seconds, as MP4. - Screen recording: Record a specific window or the full screen via the system picker, up to 60 seconds. - Draw on screen: While recording, turn on the pen from the side panel to sketch freehand over the page and point out exactly what's broken. - 30s Instant Replay: Keeps the last 30 seconds in an always-on buffer as MP4 — no need to hit record first. It looks back across page navigations so you can catch a bug you only just noticed, and trimming to the bug moment narrows the attached logs to the same range. 📋 Logs — reproduction context collected in the background - Network & console logs: Captured automatically while a capture is active and attached to the issue. Includes WebSocket frames and logs from cross-origin iframes (payment widgets, embeds), all filterable by origin. - Action log: Clicks, text input, navigations, keyboard shortcuts, and drag & drop recorded as step-by-step reproduction. Sensitive input is masked automatically. - Log viewer: A report with a video-synced timeline — click any console, network, or action entry to jump to that exact moment in the recording. 🤖 AI — drafts and style fixes from the info you've already collected - AI draft: Generates the title and body of a report — reproduction steps, expected behavior, actual behavior — from your capture (styles, screenshot, or log summary) in one go. - AI style fix: Describe the change you want and AI proposes the CSS edit for that element, applied to the page instantly. - Setup: Bring your own key (BYOK) with OpenAI, Anthropic, Gemini, and more, or use Chrome's on-device AI when no key is set. 🔗 Send straight to your issue tracker - Create and send the report and its attachments to a connected platform in one step. Environment info — DOM, browser, screen resolution — is filled in automatically. --- Built for teams like these QA: - Precise bug handoffs: Share visual issues that are hard to put into words with video and screenshots. - No more busywork: Never manually gather screenshots, browser info, and console logs again. - Reproducible reports: Reproduction steps and environment info are organized automatically, so you hand off issues developers can reproduce right away. Designers: - Live design validation: Adjust styles right on the live page to suggest pixel-level improvements. - Speak your design system's language: Reads var() token names so you communicate improvements in tokens, not raw values. - Before/after at a glance: Lays out your edits as a before → after table that shows exactly what to change and how. Developers: - Less time debugging: Get a report with the reproduction environment and console logs already organized, and jump straight to root cause. - Fix CSS without DevTools: Validate styles fast with an intuitive visual editor. - Exactly what to change: Get a before → after table showing which property to change and to what, ready to drop into your code. --- Connects straight to your issue tracker Connect the platforms you use in the Integrations tab. The 7 issue trackers support OAuth or API token, and Slack connects via OAuth. Connect several at once and send or share each issue to whichever destination you want. See the full list of supported platforms and how to connect them in the guide: https://bug-shot.com/docs/integrations/platforms --- How to use it 1. Launch the extension: Click the BugShot icon in your browser toolbar, or open the side panel with the shortcut (Cmd/Ctrl+Shift+E). 2. Start recording: Record the moment the bug happens, up to 60 seconds, and console and network logs are collected alongside it automatically. 3. Inspect and edit: Select any element on the page to check its styles and attributes, and edit them instantly in the visual editor. 4. Generate an AI report: Get a bug report draft with reproduction steps and environment info organized from the collected data. 5. Share and export: Hand it off however you like — Markdown, a send to your issue tracker, and more. --- Before you install Works in any Chromium-based browser that supports the Side Panel API. On-device AI features require a recent version of Chrome with Gemini Nano support (or you can connect your own API key). If you run into installation issues, update your browser to the latest version and try again.