Screenshots
Capture and annotate screenshots with arrows, shapes, text, and highlights.
Overview
VibeCheck's screenshot feature captures the current page and opens a built-in annotation editor. Add arrows, rectangles, text, and freehand drawings to highlight exactly where the bug is.
Capturing a screenshot
- Navigate to the page with the bug
- Click the VibeCheck icon
- Click the Screenshot button
- The page is captured and the annotation editor opens
Annotation tools
The annotation editor provides the following tools:
| Tool | Description |
|---|---|
| Pencil | Freehand drawing |
| Highlighter | Semi-transparent freehand highlight |
| Arrow | Draw arrows to point at specific elements |
| Rectangle | Draw rectangles to outline areas |
| Text | Add text labels anywhere on the screenshot |
Color picker
Select from a palette of predefined colors or pick a custom color. The color applies to whichever tool is currently active.
Undo / Redo
The editor keeps a history of up to 50 states. Use the undo and redo buttons (or keyboard shortcuts) to step through your changes.
Saving
Click Save when your annotations are complete. VibeCheck exports the annotated image as a PNG and uploads it along with any captured console logs and network data.
Console and network data
Even though screenshots are a single frame, VibeCheck still captures:
- Console logs from the page at the time of capture
- Recent network requests made by the page
This context is attached to the screenshot track so developers see more than just an image.
Tips
- Use arrows to point directly at the problematic element
- Use rectangles to highlight areas that should look different
- Add text to explain what's wrong ("Expected: green button, Got: red")
- Keep it focused — one screenshot per bug, annotate the key area