BugShot — Bug Reports in One Shot

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

BugShot — Design QA & Bug Reporting, Directly in Your Browser From design review and bug reporting to style fixes and issue creation. Stop jumping between DevTools, screenshot tools, and issue trackers. BugShot is a Chrome extension that lets you inspect web elements, edit styles in real time, and submit fully documented issues — including diffs, logs, screenshots, and recordings — directly to Jira, GitHub, Linear, or Notion. --- Key Features Real-Time Element Inspection & Style Editing ● Click any element on the page to inspect and edit CSS instantly ● Changes are reflected in real time ● Inspect Hover / Active states ● Computed Style and layout debugging support Design Token Awareness ● Resolves CSS variables like var(--spacing-14) into design token names ● Supports var() chain tracing ● Displays semantic tokens instead of raw values ● Keeps consistency with your design system Automatic Before & After Diff Generation ● Automatically compares style changes before and after edits ● Tracks modified CSS properties ● Token-level diff support ● Generates Before / After comparison tables Screenshot & Screen Recording ● Drag-to-capture screenshots ● Add annotations ● Record up to 60 seconds of screen activity ● Capture interaction bugs with video Automatic Network & Console Log Collection ● Records API requests and failed network calls ● Automatically captures console errors and warnings ● Supports runtime error attachments ● Saves logs during screenshots and recordings AI Assistant ● Supports Chrome On-device LLM and custom LLM API integrations Automatic Issue Draft Generation ● Generates issue drafts from selected elements, style changes, screenshots, recordings, and logs ● Automatically writes issue titles and descriptions Natural Language Style Editing ● “Reduce the padding” ● “Increase the border radius” ● “Align the spacing between buttons” Modify multiple CSS properties with a single sentence. BugShot recognizes design tokens and snaps results to token-based values. Direct Multi-Platform Integration ● Supports Jira / GitHub / Linear / Notion ● Automatically attaches issue title, description, CSS diff, screenshots, recordings, and logs ● Supports platform-specific metadata configuration Supported Metadata Examples ● Jira: project, issue type, assignee, priority, epic ● GitHub: repository, labels, assignees ● Linear: team, project, priority, labels ● Notion: database, status, Select/Multi-select properties Issue Tracking ● View previously submitted issues ● Track issue status ● Manage platform links directly in the browser Markdown Export ● Copy directly into Notion / Slack / Confluence / Discord ● Preserves tables and diffs ● Works without any platform integration --- Who Is BugShot For? Designers & Frontend Developers ● Report implementation issues with precise CSS diffs ● Quickly debug and edit styles without opening DevTools ● Maintain UI consistency with design-token-aware workflows ● Propose fixes directly on live pages QA Engineers ● Create detailed bug reports with screenshots, recordings, and logs ● Capture interaction bugs with video recordings ● Reduce communication back-and-forth ● Deliver reproducible issues with full context --- How to Use 1. Launch BugShot ● Click the BugShot icon in your browser toolbar ● Or press Ctrl(Cmd) + Shift + E 2. Choose a Mode ● DOM element selection ● Area capture ● Screen recording 3. Edit Styles ● Select an element and modify CSS properties ● Changes are applied instantly 4. Review Changes ● Check the automatically generated Diff table ● Review screenshots, logs, and recordings 5. Submit or Copy ● Send directly to Jira / GitHub / Linear / Notion ● Or copy everything as Markdown --- Platform Integrations Connect your platforms from the Integrations tab. ● Jira — OAuth or API Token ● GitHub — OAuth or Personal Access Token ● Linear — OAuth or API Key ● Notion — OAuth or Internal Integration Token You can connect multiple platforms at the same time and choose where to send each issue. Screenshots, recordings, and logs are automatically uploaded as attachments. Even without any integrations, BugShot works perfectly as a standalone tool. All reports can be exported as Markdown.