# Screenshot One Element: A Note for Your AI Coding Tool

> Screenshot one element, lock it, and write your note for an AI coding tool. Copy the annotated screenshot, or the clean PNG crop. Local, no account.

- Canonical: https://www.superchargebrowser.com/features/element-screenshot/
- Extension: inspect
- Published: 2026-10-08
- Updated: 2026-10-08
- Source: SuperchargeBrowser (https://www.superchargebrowser.com)

You want a picture of one button or card, not the whole screen, and you do not want to crop it by hand. [SuperchargeInspect](/inspect/) is a browser extension that captures one element and adds your note, so an AI coding tool sees what you mean. Point at the element, lock it with Enter, and copy or save a PNG cropped to that element. The crop comes from the visible part of the tab, ready to paste into an AI coding tool, a chat, or a ticket.

## Three Ways to Copy the Element Image

The locked element gives you three actions. Two live in the More ways to copy menu. The third is the Copy reference button itself.

| Action | Where it is | What you get |
| --- | --- | --- |
| Copy image only | More ways to copy menu | The clean crop on your clipboard |
| Save PNG | More ways to copy menu | The clean crop as `supercharge-inspect.png` |
| Copy reference | Main button or Ctrl+Enter | The text reference plus the annotated PNG in one clipboard item |

Copy image only and Save PNG give you the clean crop, with no footer. Copy reference is the annotated element screenshot: one clipboard item with the text reference and the PNG. If the element is not locked yet, Ctrl+Enter (Cmd+Enter on macOS) locks it and copies in one step.

## What the Annotated Element Screenshot Shows

Copy reference renders the visible crop on a white background, scaled to fit 1600 x 1200, and adds a footer of labeled rows under it. The rows are Your note, Source, Element and Styles. Source is the page address. Element is the locator for the element. The Styles line carries the first `font-family`, the `font-size` and `line-height`, the `font-weight`, the text color on the background in hex, the `padding` and the `border-radius`.

That footer is what makes it a screenshot with CSS reference: it carries your note and the key styles, so the image explains itself to an AI coding tool. When you paste it into a chat, a ticket or an AI coding tool, the reader does not need the page open to see what you pointed at.

## Picking the Right Element

Start an inspection with Alt+Shift+E. Hover over the page, or move with the arrow keys, until you are on the element you want. To screenshot one element and nothing else, stop on the smallest element that holds what you want to show. To get the whole card instead of one label, press Ctrl+Up (Option+Up on macOS) to move to the parent. Move into a child with Ctrl+Down (Option+Down on macOS). Press Enter to lock it, then copy the image.

Only the part of the element that is on screen ends up in the image, so scroll the element into view before you capture it.

## The Screenshot Stays on Your Device

The crop is made on your device, from the visible part of the tab. The extension makes no network calls, has no account, and nothing you inspect is sent to any server. The image leaves your device only when you save it with Save PNG or paste it into another app. That app then handles it.

[Send the annotated screenshot to an AI coding tool with a note](/features/ai-element-reference/).

---

Canonical URL: https://www.superchargebrowser.com/features/element-screenshot/