How to Take Annotated Screenshots in Chrome

A screenshot without annotation is evidence; a screenshot with annotation is communication. The difference between "the layout is broken" and an arrow pointing at the exact broken element is the difference between a bug report that takes one look and one that takes three rounds of questions.

This guide shows how to capture and mark up web pages in Chrome using Screenshot Annotation, our extension for element-snapping capture and in-place markup. The techniques apply to any annotation workflow; the snapping part is where this tool differs from OS-level screenshot utilities.

Table of contents#

• The capture step: visible area vs. region
• Element snapping, and why it matters
• The annotation set
• Redacting before you share
• Limits of in-browser annotation
• FAQ

The capture step: visible area vs. region#

Two capture modes cover nearly every case:

• Visible area (Alt+A; Cmd+Shift+S on macOS) grabs everything currently rendered in the viewport. Use it when the context around the target matters — layout bugs, responsive issues, "look at this whole section."
• Region (Alt+C; Cmd+Shift+X on macOS) lets you drag out a custom rectangle. Use it when the target is small and the surrounding page is noise.

Both modes open the annotation editor immediately — there is no save-then-reopen round trip through an image editor.

Element snapping, and why it matters#

When you move the pointer during a capture, the selection frame snaps to the boundaries of the page element under the cursor — a button, a card, a table row, a whole section. Two consequences:

1. Pixel-exact selections without careful mouse work. Hand-dragged rectangles over a 12-pixel-tall element are usually off by a few pixels on at least one side. Snapping uses the element's actual bounding box, from the page's own layout.
2. Semantic framing. A capture snapped to an element says "this component," not "this rough area" — which is exactly what a designer or developer needs to see.

One boundary worth knowing: content inside cross-origin iframes cannot be snapped to, because the extension cannot read another origin's layout. You can still capture it as raw pixels with a region capture.

The annotation set#

The editor covers the markup that bug reports and docs actually use:

• Arrows — the workhorse of "look here." Point at the element, keep the arrow outside it so it does not cover the detail.
• Boxes and ellipses — enclose an area without occluding it. Boxes read as "this region is the subject"; circles read as "this specific thing."
• Lines — for connecting two related spots.
• Zoom callouts — a magnified copy of a small area, bordered and linked to its source. The right answer when the important detail is 14 pixels tall and your screenshot will be viewed at half size.
• Spotlight — dims everything except the area you choose, for presentations where you want the viewer's eye in exactly one place.
• Text and highlighter — labels and emphasis. The highlighter has two behaviors: drag for a freehand stroke, click to place a text label.

Numbered steps in documentation work well as arrows plus text labels ("1", "2", …) placed beside each action.

Redacting before you share#

Two tools in the editor exist for privacy rather than emphasis:

• Mosaic pixelates a region beyond recognition. Use it on email addresses, names, prices, API keys in developer tools — anything you want to show exists without showing what it is.
• Keep originals local: the editor runs entirely in your browser, so a screenshot containing sensitive data never leaves the machine unless you export it.

Mosaic is destructive on purpose — once applied and exported, the original pixels cannot be recovered from the image. If you might need the unredacted version later, keep the capture session open or take a second, private copy before redacting.

Limits of in-browser annotation#

Stated plainly so you know when to reach for something else:

• No full-page stitched capture. The extension captures the visible viewport or a region, not content below the fold. For entire-page captures you need a dedicated full-page tool or browser devtools.
• Annotations are flattened. The exported image has no editable layers. Once copied or downloaded, the markup cannot be reopened and adjusted.
• Cross-origin iframes are pixels-only, as noted above.
• Very large captures may be scaled to fit browser memory.

FAQ#

Where does the finished image go?#

Either to your clipboard (paste straight into chat, a ticket or a doc) or to a downloaded file. Both happen locally.

Can I annotate a screenshot I took elsewhere?#

The editor opens from a capture. To annotate an existing image, capture a region over the page where the image is displayed, or use a general image editor.

Does the extension see the pages I capture?#

The capture and markup run in your browser. Nothing is uploaded; the extension asks only for the permissions the capture flow requires — see Browser extension permissions, explained for what each one does.