Use Case: Creating Effective Bug Report Screenshots

In software development and testing, a clear and comprehensive bug report is key to efficient communication and rapid problem resolution. The Full Page Screenshot extension provides powerful tools to help you easily create screenshots that include all necessary context.

Why Choose Full Page Screenshot?

• Completeness: Capture the entire page to ensure no potentially relevant UI elements are missed.
• Contextual Information: Automatically or manually include metadata such as the page URL, screenshot time, and browser version.
• Annotation Capabilities: The built-in editor allows you to add arrows, text, highlights, and blurs directly on the screenshot to visually pinpoint the issue.

Step-by-Step Guide

Step 1: Discover and Capture the Issue

When you find a bug on a webpage, click the Full Page Screenshot icon in your browser toolbar. Choose the most appropriate capture mode based on the issue:

• Full Page: The most common mode, used to capture the content of the entire scrolling page.
• Visible Part: Captures only the area currently visible in the browser window.
• Select Area: Very useful when the issue is confined to a specific component on the page.

Step 2: Annotate in Detail in the Editor

Once the screenshot is taken, it will automatically open in the editor in a new tab. Now, use the powerful editing tools to enrich your bug report:

1. Use the Arrow Tool: Point to the specific element causing the problem, such as a misplaced button or incorrect text.
2. Use the Text Tool: Add short comments describing the expected behavior or the actual issue.
3. Use the Rectangle Tool: Frame the problem area to make it stand out.
4. Use the Blur Tool: If the screenshot contains sensitive user information (like names or email addresses), be sure to use the blur tool to protect user privacy.

Step 3: Export and Share

After finishing your annotations, click the "Download" button in the top-right corner. You can choose to save the screenshot as a PNG or JPG file.

In your bug reporting tool (like Jira, GitHub Issues, or Trello), upload the screenshot and include the metadata copied from the extension. A perfect bug report with visual evidence and technical details is now complete!

Best Practices

Tip: To help developers reproduce the issue faster, it's recommended to include clear reproduction steps, expected results, and actual results in your bug report, in addition to the screenshot. Screenshots are a powerful tool for understanding but should not replace written descriptions.