Screenshot & Annotation
Screen capture and 10 annotation tools
Table of Contents
Screenshot Capture
When you start a capture from the Extension, an area selection overlay appears on the screen. Drag to select the desired area, then click the confirm button to capture it.
How to Start a Capture
| Method | Description |
|---|---|
| Keyboard Shortcut | Cmd+Shift+X (Mac) / Ctrl+Shift+X (Windows) |
| Popup Button | Click toolbar icon → Screenshot button |
| Context Menu | Right-click page → QA Note → Screenshot |
| Floating Button | Displayed on page when enabled in project settings |
You can attach up to 5 screenshots per issue. Use the additional capture button in the submission form to add more screenshots.
Annotation Tools
Add annotations on top of captured images to precisely communicate problem locations. 10 tools are available:
| Tool | Description |
|---|---|
| Select | Click to select annotations, drag to move them. Delete with the Delete key. |
| Pen | Draw freely. Supports pressure sensitivity for natural strokes. |
| Arrow | Drag to draw arrows. Useful for pointing to specific elements. |
| Text | Type text at the clicked position. |
| Highlight | Emphasize areas with a semi-transparent rectangle. |
| Rectangle | Draw an outlined rectangle. |
| Circle | Draw an outlined circle (ellipse). |
| Number Marker | Place circular markers that automatically increment with each click. Useful for showing step-by-step reproduction sequences. |
| Blur | Pixelate the dragged area to hide sensitive information. |
| Crop | Cut out a specific portion of the image. |
Color Selection
You can choose the annotation color from the toolbar. The selected color applies to all tools including pen, arrow, text, rectangle, circle, and highlight.
Undo / Redo
- Undo:
Cmd+Z(Mac) /Ctrl+Z(Windows) - Redo:
Cmd+Shift+Z(Mac) /Ctrl+Shift+Z(Windows)
Full history is maintained for all changes including additions, deletions, and moves.
Element Style Inspection
After capturing a screenshot, you can enable the Element Inspector feature from the submission form. Click DOM elements on the page to attach their CSS properties to the issue.
You can select up to 5 elements, and the following information is collected for each:
- CSS selector, tag name, classes, ID
- Box model (margin, padding, border)
- Typography (font-family, font-size, font-weight, line-height, color)
- Layout (display, position, flex/grid properties)
- Visual properties (background, opacity, border-radius, box-shadow)
Automatically Collected Metadata
The following technical information is automatically attached to the issue along with the screenshot:
- Console Logs —
error,warn,logoutput (last 100 entries) - Network Requests — Detailed HTTP request/response information (last 50 entries, sensitive headers automatically masked)
- JS Errors — Unhandled errors and Promise rejections (last 50 entries, with stack traces)
- User Actions — Click, input, scroll, and navigation event timeline (last 30 entries)
- Performance Metrics — Web Vitals including LCP, FCP, CLS, INP, TTFB
- React Component Tree — For React apps, component hierarchy and props/state
- Environment Info — Browser, OS, viewport, accessibility settings, GPU, network connection status
Capture History
The Extension popup surfaces the most recently submitted issues. Click any entry to jump straight to the issue detail page on the dashboard.
Displayed Fields
| Field | Description |
|---|---|
| Issue title | Latest 20 issues |
| Priority | Colored badge (low · medium · high · critical) |
| Relative time | 3 min ago · 2 hours ago format |
| Project | Project name shown when multiple projects are in use |
The local cache is stored in Chrome storage.local; status changes from the dashboard refresh on the next popup open.
Auto-save Draft
In-progress issues auto-save locally on a 2-second debounce. Screenshots, annotations, and form input all restore after a browser reload, accidental tab close, or Extension reload.
Saved Scope
- Form fields (title · description · priority · selected labels)
- Captured screenshots (up to 5, blob URL based)
- Annotation layer (Konva serialized state)
- Session replay · Instant Replay metadata (within storage budget). For the full list of opt-in metadata see Storage · DOM Snapshot.
TTL · Storage Management
- Auto-expires and deletes after 24 hours
- When storage limits are hit, the oldest drafts are dropped first
- If a save fails because of quota, a yellow banner appears at the top of the form (you can keep working, but restore is unavailable)