Breakpoint Viewer

Bekijk welk CSS-breekpunt actief is op een willekeurige website. Een klein label verschijnt in de hoek van de pagina met de naam van het huidige breekpunt, de minimale breedte en de werkelijke viewportbreedte in pixels. Het label wordt direct bijgewerkt terwijl je het browservenster vergroot of verkleint.

Hoe het werkt

Installeer de extensie en open een willekeurige website. Er verschijnt een klein label in de hoek van de pagina. Terwijl je het venster vergroot of verkleint, wordt het label in realtime bijgewerkt om het actieve breekpunt weer te geven. Kies een voorinstelling voor jouw CSS-framework of stel je eigen breekpunten in.

Functies

• Toont het actieve CSS-breekpunt, de minimale breedte en de huidige viewportbreedte
• Kant-en-klare voorinstellingen voor Tailwind CSS, Bootstrap, Bulma en Foundation
• Aangepaste breekpunten met volledige controle over namen, breedtes en kleuren
• Labelpositie in elke hoek van de pagina
• Allowlist en blocklist voor controle per site over waar het label wordt weergegeven
• Wordt in realtime bijgewerkt terwijl je het venster vergroot of verkleint
• Lichtgewicht en heeft geen invloed op de pagina-inhoud
• Werkt op elke website

Voor wie is dit bedoeld

Frontend-ontwikkelaars en ontwerpers die responsieve websites bouwen of testen. In plaats van te gokken of handmatig je CSS te controleren, geeft deze extensie je die informatie in één oogopslag direct op de pagina.

Waarom installeren

Klein, snel en houdt zich op de achtergrond. Geen account nodig en er verlaat geen enkele data je browser.