BugShot — Bug Reporting in One Shot

BugShot — all-in-one bug reporting, without leaving the page See a bug, capture it with all the context your team needs, and file the issue — all from one side panel. No more bouncing between DevTools, screenshot tools, screen recorders, and issue trackers. BugShot is a Chrome side panel that captures a bug the way a developer needs to see it: a screenshot or recording, the console, network, and action logs behind it, and, for visual bugs, live CSS edits with a before → after diff. It bundles everything into one complete issue and sends it straight to Jira, GitHub, Linear, and 5 more integrations, or shares it to a Slack channel or DM. Nothing you capture ever passes through a BugShot server. Your capture data goes directly from your browser to your issue tracker or Slack, while AI requests go directly to the LLM endpoint you configure. --- How it works 1. Capture — Take a screenshot, record the behavior, or restyle an element right on the page. 2. Collect — Console, network, and action logs are collected automatically in the background. 3. Generate — AI drafts the report and identifies the log that actually caused the bug. 4. Send — Send it to Jira, GitHub, Slack, and 5 more integrations, with environment info filled in automatically. --- What you can do with BugShot 🎨 Live CSS editing — fix it before you even describe it - Element picker: Hover to highlight and click to select any DOM element on the page, including deeply nested elements and elements inside iframes. - Live editing: Adjust layout, spacing, sizing, color, typography, and borders through structured fields, or switch to a syntax-highlighted CSS editor to edit raw CSS directly. The editor is prefilled with the element's current styles and includes autocomplete, inline color swatches, arbitrary properties, and !important support. Changes appear on the live page instantly. - Design token awareness: Resolves var() chains and shows the token name (for example, --color-primary) instead of only the computed value, so your report speaks your design system's language. - Before/after diff: Every change is tracked and shown as a before → after table in the issue. Edits across multiple elements are combined into a single report. --- 🎬 Recording — when a still isn't enough, capture the behavior - 30s Instant Replay: Keeps the last 30 seconds in an always-on MP4 buffer, so you can capture a bug the moment you notice it without having to start recording first. It keeps rolling across page navigations. - Tab recording: Record the current tab for up to 2 minutes as an MP4. - Screen recording: Record a specific window or your full screen using the system picker, for up to 2 minutes. - Trim to the bug moment: However you captured it — replay, tab, or screen — the same trim view opens when the recording stops. Drag the handles to keep only what matters, and the console, network, and action logs are narrowed to that exact range. Entries about to be cut are dimmed while you drag, so you see what drops before you commit. Error and page-navigation markers on the timeline point you to the right spot. - Draw on screen: Turn on the pen from the side panel while recording to sketch freehand over the page and point out exactly what is broken. --- 📸 Capture — grab exactly what's on screen and mark it up - Element capture: Capture a single element as a clean screenshot, with its DOM selector automatically attached to the issue. - Area capture: Drag across any region of the screen to capture a precise area. - Full-page capture: Scroll-stitch a long page into one tall screenshot. - Annotation: Add arrows, text, shapes, and highlights before attaching the screenshot. --- 📋 Logs — reproduction context collected in the background - Network & console logs: Collected automatically for as long as the side panel is open, so the error that fired just before you captured the bug is already there. Includes WebSocket frames and logs from cross-origin iframes, such as payment widgets and embedded content, with filtering by origin. - Action log: Clicks, text input, navigations, keyboard shortcuts, and drag-and-drop actions are recorded as step-by-step reproduction context. Sensitive input is masked automatically. - Log viewer: Review everything on a video-synced timeline. Click any console, network, or action entry to jump to that exact moment in the recording. --- 🤖 AI — reports and style fixes from the info you've already collected - AI draft: Turns everything you've captured — styles, screenshots, and console, network, and action logs — into a ready-to-file report with a title, reproduction steps, and expected versus actual behavior. It reads the logs to identify the likely cause and quotes the relevant log entry verbatim, including successful 200 responses that look fine but contain the actual culprit, such as an empty list or missing field. It never invents a log: every quoted log comes from your original captured data, and if nothing is relevant, nothing gets attached. - AI style fix: Describe the change you want, and AI proposes a CSS edit for the selected element and applies it to the page instantly. - Bring your own key: Connect OpenAI, Anthropic, Gemini, and more using your own API key (BYOK), or use Chrome's on-device AI when no key is set. Your prompts and context go directly to the endpoint you choose — never through a BugShot server. --- 🔗 Send — straight to your issue tracker - Create and send the report and its attachments to a connected platform in one step. Environment information, including the DOM, browser, and screen resolution, is filled in automatically. --- Built for teams like these QA: - Complete bug handoffs: Capture the exact behavior, visual state, reproduction context, environment, and logs behind the bug without manually piecing them together. - No more busywork: Stop manually gathering screenshots, browser information, and console logs before filing an issue. - Reproducible reports: Reproduction steps and en…