网页元素局部截图：为 AI 编程工具添加备注
对单个元素截图并锁定，为 AI 编程工具写下备注。复制带标注的截图，或干净的 PNG 裁剪图。本地运行，无需账号。
更新于
Ag
- Ink
- Amber
- Paper
你只想截取某个按钮或卡片，而不是整个屏幕，也不想手动裁剪。SuperchargeInspect 是一款扩展程序，可以截取单个元素并添加你的备注，让 AI 编程工具明白你的意思。指向该元素，按 Enter 锁定，然后复制或保存裁剪到该元素的 PNG 图片。裁剪图取自标签页的可见区域，可直接粘贴到 AI 编程工具、聊天窗口或工单中。
复制元素图片的三种方式
锁定元素后有三种操作。其中两种位于“更多复制方式”菜单中，第三种就是“复制引用”按钮本身。
| 操作 | 位置 | 得到的结果 |
|---|---|---|
| 仅复制图片 | “更多复制方式”菜单 | 干净的裁剪图像，复制到剪贴板 |
| 保存 PNG | “更多复制方式”菜单 | 干净的裁剪图像，保存为 supercharge-inspect.png |
| 复制引用 | 主按钮或 Ctrl+Enter | 文本引用加带标注的 PNG，合为一个剪贴板项目 |
“仅复制图片”和“保存 PNG”提供干净的裁剪图像，不带底栏。“复制引用”生成带标注的元素截图：一个剪贴板项目，同时包含文本引用和 PNG。如果元素尚未锁定，按 Ctrl+Enter（macOS 上为 Cmd+Enter）即可一步完成锁定和复制。
带标注的元素截图包含哪些信息
“复制引用”会将可见的裁剪区域渲染在白色背景上，缩放至 1600 x 1200 以内，并在下方添加一个由带标签的行组成的底栏。这些行分别是“你的备注”“来源”“元素”和“样式”。“来源”是页面地址。“元素”是该元素的定位符。“样式”一行包含第一个 font-family、font-size 和 line-height、font-weight、背景上的文字颜色（十六进制）、padding 以及 border-radius。
正是这个底栏让它成为带 CSS 引用的截图：它包含你的备注和关键样式，因此图片本身就能向 AI 编程工具说明问题。当你把它粘贴到聊天窗口、工单或 AI 编程工具中时，读者无需打开页面就能看到你指的是什么。
如何选中正确的元素
按 Alt+Shift+E 开始检查。将鼠标悬停在页面上，或用方向键移动，直到停在你想要的元素上。若只想截取一个元素而不包含其他内容，请停在能容纳你要展示内容的最小元素上。若想截取整张卡片而不只是一个标签，请按 Ctrl+Up（macOS 上为 Option+Up）移动到父元素。按 Ctrl+Down（macOS 上为 Option+Down）进入子元素。按 Enter 锁定，然后复制图片。
只有元素在屏幕上可见的部分才会出现在图片中，因此请在截取前将元素滚动到可视区域内。
截图只保留在你的设备上
裁剪在你的设备上完成，取自标签页的可见部分。该扩展不发起任何网络请求，无需账号，你检查的任何内容都不会发送到任何服务器。只有当你用“保存 PNG”保存图片或将其粘贴到其他应用时，图片才会离开你的设备，之后由该应用处理。