BugShot — Bug Reporting in One Shot Chrome extension security report

A Design QA Tool Built Into Your Browser Streamline your design review workflow with BugShot, a Chrome extension that lets you inspect elements, edit styles in real time, and turn visual bugs into Jira issues — all from a side panel without leaving the page. With BugShot, you can: - Inspect elements — click any element on the page to view and edit its CSS properties instantly. - Edit styles visually — adjust typography, spacing, colors, borders, and effects in a clean editor UI. - See changes live — every modification is applied to the page in real time. No refresh needed. - Recognize design tokens — BugShot resolves CSS variables like var(--spacing-14) and displays token names instead of raw computed values. - Compare before & after — a diff table is generated automatically, showing exactly what changed with token-aware values. - Capture screenshots — drag to select any area, then annotate with arrows, text, shapes, and highlights. - Record video — capture the current tab for up to 60 seconds for bugs that screenshots can't explain. - Submit to Jira — create an issue in one click with auto-filled title, description, diff table, screenshots, and recordings attached. - Set Jira fields — assign priority, assignee, epic, and linked issues right from the side panel. - Track issues — view previously submitted issues and their status without leaving the browser. - Copy as Markdown — paste into Notion, Slack, Confluence, or anywhere else. Tables are preserved. --- Who Is BugShot For? Designers & Front-end Developers: - Catch implementation bugs during design review and report them with precise CSS diffs. - Debug layout and styling issues without opening DevTools. - See design token names instead of computed values to stay aligned with the design system. - Edit styles on the live page to show exactly what the fix should look like. QA Engineers: - File detailed Jira issues directly from the page with screenshots, recordings, and style comparisons. - Record interaction bugs as video and attach them to issues automatically. - Reduce back-and-forth by providing all context in a single report. --- How to Use BugShot 1. Activate the Extension: click the BugShot icon in your browser toolbar or press Alt + Shift + B. 2. Pick a Capture Mode: choose DOM element selection, area screenshot, or tab recording. 3. Edit Styles: select an element and modify its CSS properties. Changes appear on the page instantly. 4. Review Changes: check the auto-generated before/after diff table and screenshots. 5. Submit or Copy: send the issue to Jira in one click, or copy as Markdown for other tools. --- Jira Integration Connect via OAuth or API token in the Jira tab. BugShot supports project selection, issue types, assignees, priorities, epics, and linked issues. Screenshots and recordings are uploaded as attachments automatically. No Jira account? BugShot works standalone — copy everything as Markdown. Supports Korean and English.