LogoDocumentation

Bug Report Screenshots

Use Full Page Screenshot to capture a page issue, annotate it, and organize URL, viewport, and capture-time context for reproduction.

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: The editor shows page URL, capture time, viewport, capture mode, and image size. Add the browser version and operating system manually.
  • Annotation Capabilities: The built-in editor lets you add arrows, text, shapes, and blur directly to 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:

  • Capture Full Page: Captures the entire scrollable page.
  • Capture Current View: Captures only what is visible in the browser window.
  • Capture Selected Area: Use it when the issue is limited to a rectangle in the current viewport.

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.

Download or copy the image and upload it to Jira, GitHub Issues, Trello, or another tracker. The editor's Jira/GitHub action copies Markdown text; it does not upload the image. Complete the operating-system, browser, and version fields in the template.

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.