SuperchargeInspect öffnet sich auf jeder Seite und lässt dich jedes beliebige Element auswählen und mitnehmen. Fahr mit der Maus darüber und klick, oder steuere mit den Pfeiltasten und fixiere mit Enter. Das Overlay zeichnet das Box-Modell direkt auf die Seite, und das Panel zeigt Schrift, Farben und Abstände an. Ein einziger Kopiervorgang legt Text und einen sauberen Schnappschuss in deine Zwischenablage, auf Wunsch mit einer Notiz.
Mit der Maus auswählen oder mit den Pfeiltasten bewegen und mit Enter fixieren
Das Overlay zeichnet Padding, Margin und die Content-Box direkt auf die Seite
Schrift, Größe, Schriftstärke, Laufweite, Farben und Box-Modell pro Element ausgelesen
Jede Wertekachel lässt sich per Klick kopieren
Eine vollständige Referenz kopieren: Text plus sauberer PNG-Schnappschuss in einem einzigen Eintrag
Notizen mit bis zu 1200 Zeichen werden in der Referenz und in der Bildfußzeile mitgeliefert
Shadow Roots, Slots, SVG und Same-Origin-iframes sind alle auswählbar
Öffne eine beliebige Seite und drücke Alt+Shift+E oder klicke in der Symbolleiste auf das Erweiterungssymbol. Navigiere mit den Pfeiltasten, fixiere ein Element mit Enter und kopiere mit einem Klick eine vollständige Referenz.
Elemente auswählen
Es gibt zwei Wege: Fahre mit der Maus darüber und klicke, oder bleib bei der Tastatur. Mit den Pfeiltasten links, oben, rechts und unten wechselst du zwischen Elementen, Strg+Pfeil hoch (Option+Pfeil hoch auf dem Mac) springt zum übergeordneten Element und Strg+Pfeil runter (Option+Pfeil runter) zu einem untergeordneten. Enter fixiert das Element, Esc geht einen Schritt zurück und ? zeigt die Übersicht der Tastenkürzel. Die Auswahl reicht bis in Shadow Roots, Slots, SVG und Same-Origin-iframes.
Das Box-Modell direkt auf der Seite sehen
Wenn du ein Element auswählst, wird es direkt auf der Seite eingezeichnet. Padding und Margin werden schattiert, die Content-Box wird umrandet, und ein Ring mit bernsteinfarbenen Griffen markiert das fixierte Element. Die Umrandung folgt dem eigenen border-radius des Elements, sodass ein abgerundetes Element auch abgerundet bleibt.
Alles im Panel ablesen
Das Panel liest das Element vollständig aus: Schriftfamilie, Größe, Schriftstärke und Laufweite, mit einer Live-Schriftprobe in der eigenen Schrift des Elements. Text-, Hintergrund- und Rahmenfarben erscheinen als Farbfelder, und das Box-Modell-Diagramm zeigt Margins, Rahmen, Padding, Radius, Display und Gap. Jede Wertekachel lässt sich per Klick kopieren. Darüber befindet sich eine Breadcrumb-Leiste der übergeordneten Elemente, und du kannst das Panel links oder rechts andocken.
Notizen
Füge eine Freitext-Notiz mit bis zu 1200 Zeichen hinzu. Sie landet in der kopierten Referenz und in der Fußzeile des Snapshot-Bildes, damit das, was dir aufgefallen ist, immer mit dabei ist.
Referenz kopieren
„Kopieren“ legt eine vollständige Referenz als einen einzigen Eintrag in die Zwischenablage: Text und einen sauberen PNG-Snapshot zusammen. Der Text enthält die Notiz, die Quell-URL, den Seitentitel, einen Zeitstempel, Tag und Locator des Elements, seinen sichtbaren Text, Viewport und Abmessungen, die erfassten Styles sowie einen bereinigten Ausschnitt des Element-Codes. Formularwerte und verborgene Teile der Seite werden weggelassen, und Zugangsdaten-Parameter in der URL werden geschwärzt. Du kannst auch nur den Text oder nur das Bild kopieren oder das PNG als Datei speichern.