AIMRAN Inspector
Maße, Farben, Kontrast, Typografie und CSS-Variablen jedes Elements prüfen, Abstände messen und CSS live bearbeiten.
AIMRAN Inspector macht jede Webseite zu Ihrem Frontend-Labor. Klicken Sie auf das Erweiterungssymbol (oder drücken Sie Alt+Umschalt+I), bewegen Sie die Maus über die Seite und klicken Sie auf ein Element, um zu sehen, wie es aufgebaut ist, und CSS-Änderungen direkt auf der echten Website auszuprobieren.
Was Sie sehen
- Visuelles Box-Modell (Margin, Border, Padding und Inhalt) mit exakten Maßen und einem Label tag#id.klasse.
- Eindeutiger CSS-Selektor zum Kopieren und eine Breadcrumb-Leiste zum Navigieren durch die Vorfahren.
- Text-, Hintergrund-, Rahmen- und SVG-Farben in HEX, RGB oder HSL, mit berechnetem effektivem Hintergrund – auch bei halbtransparenten Ebenen.
- WCAG-Kontrast mit AA- und AAA-Bewertung für normalen und großen Text.
- Vollständige Typografie: deklarierte Familie, tatsächlich gerenderte Schrift, Größe in px und rem, Stärke und Zeilenhöhe.
- Berechnete Stile ohne Ballast, nach Kategorien gruppiert, sowie die vom Element genutzten CSS-Variablen mit ihrem aufgelösten Wert.
- HTML-Code des Elements, formatiert und kopierbar.
Werkzeuge
- Abstände messen: Halten Sie Alt gedrückt und zeigen Sie auf ein anderes Element, um die Abstände in Pixeln zu sehen – mit Hilfslinien wie in Design-Apps.
- 8-px-Raster, konfigurierbare Spalten und Grundlinie zum Prüfen von Ausrichtungen.
- Pipette für den Bildschirm mit Verlauf der zuletzt verwendeten Farben.
- Zu einem CSS-Selektor springen oder Elemente über ihren Text finden.
- PNG-Screenshot des Elements kopieren oder herunterladen.
CSS live bearbeiten
- Prüfung Zeile für Zeile, Autovervollständigung, Schnellregler und Verlauf pro Element.
- Gespeicherte Snippets, um Stile auf andere Elemente anzuwenden.
- Export als CSS, CSS-Variablen, SCSS, JS/React-Stilobjekt oder angenäherte Tailwind-Klassen.
Ganz nach Ihrem Geschmack
- Helles, dunkles oder automatisches Design, sieben Akzentfarben, kompakte oder großzügige Dichte, Schriftgröße, anpassbare Breite und Deckkraft des Panels.
- Gespeicherte Seite und Position, Start-Tab, sichtbare Tabs und deren Reihenfolge sowie Farben des Box-Overlays.
- Einstellungen als JSON exportieren und importieren.
- Oberfläche auf Deutsch, Englisch, Spanisch und Französisch.
So funktioniert es
- Öffnen Sie eine beliebige Website und klicken Sie auf das Symbol von AIMRAN Inspector oder drücken Sie Alt+Umschalt+I.
- Bewegen Sie die Maus über die Seite und klicken Sie auf das gewünschte Element. Während der Auswahl erhält die Seite keine Klicks – kein Link und keine Schaltfläche wird versehentlich ausgelöst.
- Wechseln Sie zwischen den Tabs Übersicht, Farben, Schrift, Stile, Editor und Code. Pfeiltasten navigieren durch den Baum, die Leertaste fixiert die Auswahl, Alt misst, G blendet die Hilfslinien ein.
- Mit Esc, dem Symbol oder dem × beenden Sie den Inspector. Die Seite kehrt in ihren ursprünglichen Zustand zurück.
Warum installieren
- Ein einziges Panel, schneller als die DevTools für alltägliche Design- und Layoutprüfungen.
- Ein isoliertes Panel, das vom CSS der Website nicht beeinflusst wird und die Seite nicht verlangsamt: getestet mit Seiten aus 20.000 Knoten.
Datenschutz Die Erweiterung arbeitet nur im aktiven Tab und nur, wenn Sie sie aktivieren. Sie liest das ausgewählte Element, verarbeitet es in Ihrem Browser und sendet nichts an einen Server. Im Chrome-Speicher werden Ihre Einstellungen, CSS-Snippets und Pipettenfarben gespeichert. Keine Konten, keine Analyse, keine Werbung, kein Tracking.