Breakpoint Viewer

Zeigt an, welcher CSS-Breakpoint auf einer Website gerade aktiv ist. Ein kleines Badge erscheint in einer Ecke der Seite und zeigt den Namen des aktuellen Breakpoints, seine Mindestbreite sowie die tatsächliche Viewport-Breite in Pixeln. Das Badge aktualisiert sich sofort, wenn du die Browserfenstergröße änderst.

So funktioniert es

Installiere die Erweiterung und öffne eine beliebige Website. Ein kleines Badge erscheint in einer Ecke der Seite. Wenn du die Fenstergröße änderst, aktualisiert sich das Badge in Echtzeit und zeigt den aktuell aktiven Breakpoint an. Wähle ein Preset für dein CSS-Framework oder richte eigene benutzerdefinierte Breakpoints ein.

Funktionen

• Zeigt den aktiven CSS-Breakpoint, seinen Mindestwert sowie die aktuelle Viewport-Breite an
• Fertige Presets für Tailwind CSS, Bootstrap, Bulma und Foundation
• Benutzerdefinierte Breakpoints mit vollständiger Kontrolle über Namen, Breiten und Farben
• Badge-Position in jeder Ecke der Seite wählbar
• Allowlist und Blocklist für seitenspezifische Steuerung, wo das Badge angezeigt wird
• Echtzeit-Aktualisierung beim Ändern der Fenstergröße
• Schlank und ohne Einfluss auf den Seiteninhalt
• Funktioniert auf jeder Website

Für wen ist das gedacht

Frontend-Entwickler und Designer, die responsive Websites erstellen oder testen. Anstatt zu raten oder dein CSS manuell zu prüfen, liefert dir diese Erweiterung die nötigen Informationen direkt auf der Seite auf einen Blick.

Warum installieren

Klein, schnell und unauffällig. Kein Konto erforderlich, keine Daten verlassen deinen Browser.