Zum Hauptinhalt springen

Kostenlos · Kein Konto · Lokal

Jedes Element untersuchen.Werte für dein KI-Coding-Tool kopieren.

Zeig auf ein beliebiges Element, um Schrift, Farben und Abstände abzulesen. Kopiere sie für dein KI-Coding-Tool.

Kein Konto nötig · Keine Netzwerkanfragen

Zu Chrome hinzufügen – kostenlos Diese Seite untersuchen
Supreme Bold · 700

Ag

  • Ink
  • Amber
  • Paper
Aa Bb Cc 012392 / 1.0 / −0.028em

Der Button öffnet das echte Panel auf der Karte. Zeig auf irgendetwas auf der Seite.

Das Panel

Alles auf einen Blick

Wenn du ein Element fixierst, ordnet das Panel alles in drei Bereiche: Typografie, Farben und Box. Jeden angezeigten Wert kannst du einzeln mit einem Klick kopieren.

  • Typografie Schriftfamilie, Größe, Stärke und Laufweite ansehen.
  • Farben Text-, Hintergrund- und Rahmenfarben als Hex-Werte ablesen.
  • Box Padding, Margin, Gap, Radius und Display prüfen.
oder drücke AltShiftE
Das SuperchargeInspect-Panel, fixiert auf die Ag-Glyphe der Musterkarte: Typografie, Farben, Box, ein Notizfeld und „Referenz kopieren“. Das SuperchargeInspect-Panel, fixiert auf die Ag-Glyphe der Musterkarte: Typografie, Farben, Box, ein Notizfeld und „Referenz kopieren“.

Referenz kopieren

Elemente an dein KI-Tool übergeben

Du schreibst eine kurze Notiz und kopierst dann die Referenz.

  • Notiz, Seitenadresse, Element-Locator, Styles und Markup-Auszug.
  • Screenshot mit Anmerkungen, der das fixierte Element und seinen Kontext zeigt.
  • Nur Text kopieren, nur Bild kopieren oder als PNG speichern.
Referenzbild aus „Referenz kopieren“: die Ag-Glyphe zugeschnitten und umrandet, mit der Notiz „Use Supreme Bold for the Ag heading.“, der Seitenadresse und einer Style-Zeile.
Die Demo simuliert einen Screenshot, indem sie die Seite neu zeichnet. Die installierte Erweiterung erfasst deinen echten Tab, und die Aufnahme bleibt privat.
  • Netzwerkanfragen 0 es werden keine Daten gesendet
  • Konto Nein keine Registrierung nötig
  • Panel-Bereiche 3 Typografie, Farben, Box
  • Kopiermöglichkeiten 5 Wert, Referenz, Text, Bild, PNG

Alles per Tastatur steuern

  • Alt+Shift+EStartet die Inspektion auf der aktiven Seite. Du kannst auch den Button in der Symbolleiste verwenden.
  • Arrow keysZum vorherigen oder nächsten Element auf der Seite wechseln.
  • Ctrl+Up / Ctrl+DownZum übergeordneten oder untergeordneten Element wechseln. Unter macOS verwendest du Option+Pfeil nach oben und Option+Pfeil nach unten.
  • EnterFixiere das Element, auf das du zeigst. Drück die Taste erneut, um eine Notiz zu schreiben.
  • Ctrl+EnterKopiert die Referenz. Unter macOS verwendest du Cmd+Enter. Ist noch kein Element fixiert, wird es fixiert und kopiert.
  • EscZurück zur Auswahl oder Panel schließen.

Privat und lokal

Datenschutz von Grund auf

Keine Netzwerkanfragen, kein Konto.

  • Keine Netzwerkanfragen, und es werden keine Daten an einen Server gesendet.
  • Kein Konto, und nichts wird jemals von deinem Gerät hochgeladen.
  • Ein Screenshot verlässt dein Gerät nur, wenn du ihn speicherst oder einfügst.
  • Gespeichert werden nur deine letzte Auswahl pro Seite und deine Theme-Einstellung.

Was die einzelnen Anleitungen behandeln

Häufig gestellte Fragen

Was ist SuperchargeInspect?
SuperchargeInspect ist ein CSS-Viewer und Element-Inspector. Du zeigst auf ein beliebiges Element einer Seite, und SuperchargeInspect zeigt dir Schriftart, Farben und Abstände in einem Panel an. Du kannst einen einzelnen Wert kopieren oder alles zusammen mit einer Notiz und einem Screenshot mit Anmerkungen für dein KI-Coding-Tool.
Zeigt SuperchargeInspect die Schriftart an, die eine Website tatsächlich darstellt?
Es zeigt die deklarierte Schriftfamilie, keine verifizierte gerenderte Schrift. Das Panel zeigt die erste Familie in der Liste, und beim Kopieren wird der vollständige deklarierte Stack übernommen. Das ist die Schrift, die die Seite anfordert. Es wird nicht geprüft, welche Schrift tatsächlich auf dem Bildschirm dargestellt wird – betrachte den Wert also als die deklarierte Familie.
Welche Farbformate werden angezeigt?
Farben werden als Hex-Wert angezeigt. Das gilt für die Textfarbe, die Hintergrundfarbe und – falls vorhanden – die Rahmenfarbe. Eine teilweise transparente Farbe wird als rgba-Wert angezeigt, eine vollständig transparente als „transparent“. Klick auf eine beliebige Farbe, um genau diesen Wert zu kopieren.
Was wird für ein KI-Coding-Tool kopiert?
Du schreibst eine kurze Notiz und kopierst dann die Referenz. Der kopierte Text enthält deine Notiz, die Seitenadresse, das Element und seinen Locator, die Viewport-Größe und Scrollposition, die Position und Größe des Elements, die erfassten Styles und einen kurzen Markup-Auszug. Der kommentierte Screenshot zeigt das Element mit deiner Notiz, der Adresse und einer kurzen Style-Zeile.
Sendet die Erweiterung meine Daten irgendwohin?
Nein. Alles, was du untersuchst, bleibt auf deinem Gerät. Die Erweiterung stellt keine Netzwerkverbindungen her und sendet keine Daten. Es gibt kein Konto. Ein Screenshot verlässt dein Gerät nur, wenn du ihn speicherst oder irgendwo einfügst, und was eine andere App mit dem Eingefügten macht, liegt bei dieser App.
Wann und wo bekomme ich die Erweiterung?
Sie ist ab sofort für Chrome und Edge verfügbar, unter Windows, macOS und Linux. Du bekommst sie im Chrome Web Store oder in den Microsoft Edge Add-ons. Sie ist kostenlos und funktioniert ohne Konto.

In drei Sekunden installiert.Nichts zu konfigurieren.

Lokale Element-Inspektion, die Schrift, Farben und Abstände jedes Elements in einem Panel anzeigt und die Werte zusammen mit einer Notiz und einem kommentierten Screenshot für dein KI-Coding-Tool kopiert.

Zu Chrome hinzufügen – kostenlos

Beweis fürs Ticket

Zeig den Bug, statt ihn zu beschreiben.

Du hast beim Untersuchen ein kaputtes Layout entdeckt. Nimm den Tab auf oder mach einen Ganzseiten-Screenshot und teile ihn direkt über Drive. Kein Wasserzeichen, kein Konto.

Zu Chrome hinzufügen

Kostenlos · 100 % lokal · Kein Konto