Element-Screenshot: Notiz für dein KI-Coding-Tool

Du willst ein Bild von einem einzelnen Button oder einer Karte, nicht vom ganzen Bildschirm, und du willst es nicht von Hand zuschneiden. SuperchargeInspect ist eine Erweiterung, die ein einzelnes Element erfasst und deine Notiz hinzufügt, damit ein KI-Coding-Tool sieht, was du meinst. Zeig auf das Element, fixiere es mit Enter und kopiere oder speichere ein PNG, das auf dieses Element zugeschnitten ist. Der Ausschnitt stammt aus dem sichtbaren Bereich des Tabs und lässt sich direkt in ein KI-Coding-Tool, einen Chat oder ein Ticket einfügen.

Drei Wege, das Element-Bild zu kopieren

Für das fixierte Element stehen dir drei Aktionen zur Verfügung. Zwei findest du im Menü „Weitere Kopieroptionen“. Die dritte ist die Schaltfläche „Referenz kopieren“ selbst.

„Nur Bild kopieren“ und „PNG speichern“ liefern dir den sauberen Ausschnitt ohne Fußzeile. „Referenz kopieren“ ist der annotierte Element-Screenshot: ein Zwischenablage-Eintrag mit der Textreferenz und dem PNG. Ist das Element noch nicht fixiert, erledigt Strg+Enter (Cmd+Enter unter macOS) Fixieren und Kopieren in einem Schritt.

Was der annotierte Element-Screenshot zeigt

„Referenz kopieren“ rendert den sichtbaren Ausschnitt auf weißem Hintergrund, skaliert auf maximal 1600 x 1200, und fügt darunter eine Fußzeile mit beschrifteten Zeilen hinzu. Die Zeilen sind „Deine Notiz“, „Quelle“, „Element“ und „Styles“. „Quelle“ ist die Seitenadresse. „Element“ ist der Locator für das Element. Die Styles-Zeile enthält den ersten Eintrag aus font-family, außerdem font-size und line-height, font-weight, die Textfarbe auf dem Hintergrund als Hex-Wert, padding und border-radius.

Genau diese Fußzeile macht ihn zu einem Screenshot mit CSS-Referenz: Sie enthält deine Notiz und die wichtigsten Styles, sodass das Bild sich für ein KI-Coding-Tool selbst erklärt. Wenn du es in einen Chat, ein Ticket oder ein KI-Coding-Tool einfügst, muss die Person, die es liest, die Seite nicht geöffnet haben, um zu sehen, worauf du gezeigt hast.

Das richtige Element auswählen

Starte eine Inspektion mit Alt+Shift+E. Fahre mit der Maus über die Seite oder bewege dich mit den Pfeiltasten, bis du auf dem gewünschten Element bist. Um nur ein einzelnes Element und sonst nichts zu erfassen, bleib auf dem kleinsten Element stehen, das alles enthält, was du zeigen willst. Um statt einer einzelnen Beschriftung die ganze Karte zu erfassen, drücke Strg+Pfeil nach oben (Option+Pfeil nach oben unter macOS), um zum Elternelement zu wechseln. Mit Strg+Pfeil nach unten (Option+Pfeil nach unten unter macOS) wechselst du zu einem Kindelement. Drücke Enter, um es zu fixieren, und kopiere dann das Bild.

Nur der Teil des Elements, der auf dem Bildschirm sichtbar ist, landet im Bild. Scrolle das Element also in den sichtbaren Bereich, bevor du es erfasst.

Der Screenshot bleibt auf deinem Gerät

Der Ausschnitt wird auf deinem Gerät aus dem sichtbaren Teil des Tabs erstellt. Die Erweiterung stellt keine Netzwerkverbindungen her, benötigt kein Konto, und nichts, was du inspizierst, wird an einen Server gesendet. Das Bild verlässt dein Gerät nur, wenn du es mit „PNG speichern“ sicherst oder in eine andere App einfügst. Diese App verarbeitet es dann.

Sende den annotierten Screenshot mit einer Notiz an ein KI-Coding-Tool.