Capturing Bugs

Screenshots

Capture Modes

Crosscheck offers three screenshot modes to cover different scenarios:

Mode	What it captures	Best for
Viewport	The currently visible area of the browser tab	Quick captures of UI bugs, layout issues, or error states visible on screen
Full Page	The entire scrollable page from top to bottom, stitched into a single image	Long pages, scrollable content, or when you need to capture context above and below the fold
Selected Area	A specific rectangular region of the screen that you select by clicking and dragging	Focusing on a particular UI element or section without capturing the entire page

How It Works

When you take a screenshot, Crosscheck performs several steps behind the scenes to create a rich, contextual capture.

Trigger the capture

Click the screenshot button in the Crosscheck extension popup, or use the floating toolbar on the page. Select viewport, full-page, or selected area mode. You can also set an optional capture delay (0, 3, or 5 seconds) to prepare the page state before the screenshot is taken.

Image capture

For viewport screenshots, the extension captures the visible area of your current tab as a high-resolution PNG. For full-page mode, it scrolls through the entire page, capturing each viewport segment, then automatically stitches them together to produce one seamless image. For selected area mode, you click and drag to define the region you want to capture.

Developer context collection

Simultaneously, the extension collects developer context that was being tracked since the page loaded. This includes console logs, network requests (with status codes, timings, and payloads), and a timeline of user actions such as clicks, keypresses, and navigation events.

Annotate (optional)

After the screenshot is captured, the annotation editor opens immediately. You can draw arrows, add text, highlight areas, blur sensitive content, or add shapes to clearly communicate the issue. Skip this step if no annotation is needed.

Save and upload

The screenshot and its developer context data are saved to your workspace. A new check is created in your active project, and a link to the capture is ready to share.

Screenshot capture flow in extension

Taking a viewport screenshot with the Crosscheck extension

Developer context is always captured

Whether you take a viewport or full-page screenshot, the same set of developer context data is collected: console logs, network requests, performance metrics, and user action timeline. This data is attached to the capture and viewable in the dashboard detail view.

Annotation After Capture

The built-in annotation editor uses a canvas-based drawing system that supports arrows, rectangles, circles, freehand drawing, text labels, and a blur tool for redacting sensitive information. Annotations are non-destructive: the original screenshot is preserved alongside the annotated version.

Annotation editor with drawing tools

The annotation toolbar provides drawing, text, shapes, and blur tools

Full-page screenshots on long pages

Full-page capture works by scrolling the page programmatically and automatically stitching multiple viewport-sized segments together. On very long pages, this may take a few seconds. Elements with fixed positioning (like sticky headers) are handled automatically to avoid duplication in the final image.

Keyboard shortcuts

Use Alt+Shift+S to quickly take a Selected Area screenshot and Alt+Shift+V for a Visible Area screenshot without opening the extension popup.

Output Format

Screenshots are saved as PNG files for lossless quality. The developer context data (console logs, network requests, user actions) is saved alongside the screenshot and accessible from the dashboard.

Create a Project

Screen Recording

Last updated: March 2026