Screenshot & Annotation Tools

Automatic Screenshots

Sniffer captures screenshots automatically as part of the bug reporting process, ensuring that every report includes visual evidence of the issue.

One-Click Capture: When you initiate a bug report, Sniffer instantly captures a screenshot of the current viewport. This happens with a single click, requiring no additional steps or configuration.
Full Page Context: The automatic screenshot captures exactly what you see on screen at the moment of reporting. This provides developers with a clear visual reference of the issue as it appeared to you.
Element Highlighting: Sniffer can automatically highlight the specific element you are reporting on. When you click on an element to report an issue, Sniffer captures the screenshot with a visual box around the selected element, making it immediately clear which part of the page is affected.
Timing and State: Screenshots capture the current state of the page, including any dynamic content, hover states, or error messages that are visible at the time of capture. This is crucial for documenting issues that only appear under certain conditions.
Automatic Technical Data: Along with the visual capture, Sniffer records the selector/element reference for the highlighted element. This technical information helps developers locate the exact element in the code.

Manual Screenshot Capture

While automatic screenshots cover most scenarios, Sniffer also provides options for manually capturing additional screenshots when needed.

Additional Captures: If one screenshot is not enough to document an issue, you can capture multiple screenshots to show different aspects of the problem or different states of the page.
Capturing Different States: Some bugs only appear after specific interactions. Use manual capture to document the before and after states, showing how the page changes when the bug occurs.
Capturing Multiple Pages: If a bug affects multiple pages or requires navigation to reproduce, capture screenshots at each step to create a complete visual record.
Timed Captures: For issues that involve animations, transitions, or timed events, you can manually trigger captures at specific moments to document exactly what happens.
Capture Without Element Highlighting: When you need to capture general feedback about a page without focusing on a specific element, Sniffer allows you to take screenshots without the element highlight box.

Sniffer’s annotation toolbar provides powerful tools for marking up screenshots in real-time, helping you communicate issues clearly.

Accessing the Toolbar: The annotation toolbar appears automatically after capturing a screenshot or can be accessed by clicking the annotation icon. The toolbar contains all the tools you need to mark up your capture.

Available Tools: The annotation toolbar includes:

Arrow Tool: Draw arrows to point at specific elements or areas of concern. Arrows help direct the viewer’s attention to exactly what you want them to see.
Rectangle/Box Tool: Draw rectangles to highlight areas of the screenshot. Use this to frame sections that need attention or to indicate regions where something is missing.
Circle/Ellipse Tool: Draw circles or ovals to highlight rounded areas or to create emphasis on specific points.
Freehand Drawing: Use the pen or brush tool to draw freeform shapes, underline text, or create custom annotations that other shapes cannot achieve.
Text Tool: Add text labels and notes directly on the screenshot. Use text to explain what is wrong, suggest corrections, or provide additional context.
Highlight Tool: Apply semi-transparent highlights to draw attention to text or areas without obscuring the underlying content.
Blur Tool: Blur sensitive information such as personal data, passwords, or confidential content before sharing the screenshot.
Color Picker: Change the color of your annotations to improve visibility or to differentiate between different types of feedback.
Line Thickness: Adjust the thickness of lines, arrows, and shapes to make annotations more prominent or subtle as needed.

Drawing and Highlighting

Effective annotations communicate issues at a glance. Understanding how to use drawing and highlighting tools helps you create clear, actionable feedback.

Drawing Arrows: Click the arrow tool, then click on the starting point and drag to the ending point. The arrow head appears at the end of the line. Use arrows to point from a label to the element it describes or to indicate direction of movement.
Creating Shapes: Select the rectangle or circle tool, then click and drag to create the shape. Hold Shift while dragging to create perfect squares or circles. Use shapes to frame areas of interest or to indicate where something should appear.
Freehand Annotations: Select the pen tool and draw freely on the screenshot. Freehand drawing is useful for circling irregular areas, crossing out elements, or creating quick sketches to illustrate a point.
Adding Highlights: Select the highlight tool and drag over text or areas you want to emphasize. The semi-transparent overlay draws attention without hiding the content underneath. Highlights work well for emphasizing error messages, incorrect text, or areas that need review.
Combining Tools: Use multiple annotation tools together to create comprehensive feedback. For example, draw a rectangle around a problem area, add an arrow pointing to it, and include a text label explaining the issue.
Undoing Mistakes: If you make an annotation error, use the undo button or keyboard shortcut (Ctrl+Z or Cmd+Z) to remove the last annotation. You can undo multiple steps if needed.
Clearing All Annotations: If you want to start over, use the clear all button to remove every annotation from the screenshot at once.

Adding Text Annotations

Text annotations provide written context that visual markers alone cannot convey.

Placing Text: Click the text tool, then click on the location where you want to add text. A text input field appears where you can type your message.
Writing Effective Labels: Keep text annotations concise and clear. Instead of long explanations, use short labels like “Missing button,” “Wrong color,” “Text cut off,” or “Should say ‘Submit’.”
Positioning Text: Place text annotations near the elements they describe but not directly over important content. Use arrows to connect text labels to specific elements when the relationship might not be obvious.
Text Formatting: Depending on Sniffer’s features, you may be able to adjust text size, font weight (bold), or color to improve readability and emphasis.
Multiple Text Boxes: Add as many text annotations as needed to fully document the issue. Each text box can contain a different note or instruction.
Text for Instructions: Use text annotations to write step numbers, indicate sequence, or provide instructions for developers. For example, “1. Click here” followed by “2. This error appears.”

Saving Annotated Images

After completing your annotations, save the annotated screenshot to include it in your bug report.

Automatic Saving: In most cases, annotations are saved automatically as part of the bug report submission process. When you click “Submit” or “Save,” the annotated screenshot is attached to the task.
Saving Before Submission: If you need to pause and return later, Sniffer may offer an option to save your annotated screenshot as a draft. This preserves your work until you are ready to submit.
Annotation Preservation: Once saved, annotations become part of the image. Team members viewing the bug report see the screenshot exactly as you annotated it.
Viewing Annotated Screenshots: On Sniffer’s board, annotated screenshots appear in the task details. Click on the thumbnail to view the full-size annotated image.
Downloading Annotated Images: If you need to share an annotated screenshot outside of Sniffer, you may be able to download it as an image file. Check the task details for download options.
Editing After Saving: Depending on your permissions and project settings, you may be able to edit annotations after the bug report has been submitted. Open the task, access the screenshot, and use the annotation tools to make changes.
Multiple Annotated Screenshots: A single bug report can include multiple annotated screenshots. Each screenshot preserves its own set of annotations, allowing you to document different aspects of an issue comprehensively.

By mastering Sniffer’s screenshot and annotation tools, you can create visual bug reports that communicate issues instantly and unambiguously, reducing the back-and-forth typically required to clarify problems and speeding up the path from bug report to resolution.