BugShot — Bug Reporting in One Shot
Featuredbug-shot.com · Developer Tools
Media
5 items
Description
Bug reporting for QA from a side panel: screenshot, recording, console/network logs, live CSS edits, sent to Jira, GitHub & Notion. 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 60 seconds as an MP4. - Screen recording: Record a specific window or your full screen using the system picker, for up to 60 seconds. - 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 environment information are organized automatically, while AI identifies the log that caused the bug — so developers can reproduce and root-cause issues faster. Designers: - Live design validation: Adjust styles directly on the live page to suggest pixel-level improvements. - Speak your design system's language: Read var() token names so you can communicate improvements in design tokens, not just raw computed values. - Before/after at a glance: See your edits in a before → after table that shows exactly what changed and what to update. Developers: - Less time debugging: Get a report with the reproduction context and console logs already organized, with the relevant causal response quoted inline, so you can jump straight to the root cause. - Fix CSS without DevTools: Validate styles quickly with an intuitive visual editor. - Exactly what to change: Get a before → after table showing which property to change and what to change it to, ready to translate into code. --- Connects straight to your issue tracker Connect the platforms you use in the Integrations tab. BugShot supports 8 integrations, including issue trackers and Slack. Connect multiple platforms at once and send or share each issue to whichever destination you need. See the full list of supported platforms and how to connect them in the guide: https://bug-shot.com/docs/integrations/platforms --- Private by design Your capture data — including screenshots, recordings, logs, and report content — never passes through a BugShot server. It goes directly from your browser to your issue tracker or Slack, while AI requests go directly to the LLM endpoint you configure. There's no BugShot account and no hosted storage. The only thing our server does is relay the OAuth token exchange when you connect a platform. --- 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. Capture the bug: Take a screenshot or record the moment it happens, for up to 60 seconds. Console, network, and action logs are already being collected in the background. 3. Inspect and edit: Select any element on the page to inspect its styles and attributes, then edit them instantly in the visual editor. 4. Generate an AI report: Get a bug report draft with reproduction steps and environment information organized from the collected data. 5. Share and export: Hand it off however you like — copy it as Markdown, send it to your issue tracker, share it to Slack, and more. --- Before you install BugShot 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. Alternatively, you can connect your own API key. If you run into installation issues, update your browser to the latest version and try again.