Breakpoint Viewer

Sprawdź, który breakpoint CSS jest aktywny na dowolnej stronie. W rogu ekranu pojawia się mała etykieta pokazująca nazwę aktualnego breakpointu, jego minimalną szerokość oraz rzeczywistą szerokość okna przeglądarki w pikselach. Etykieta aktualizuje się natychmiast podczas zmiany rozmiaru okna.

Jak to działa

Zainstaluj rozszerzenie i otwórz dowolną stronę. W rogu ekranu pojawi się mała etykieta. Podczas zmiany rozmiaru okna etykieta aktualizuje się w czasie rzeczywistym, pokazując aktywny breakpoint. Wybierz gotowy preset dla swojego frameworka CSS lub skonfiguruj własne breakpointy.

Funkcje

• Wyświetla aktywny breakpoint CSS, jego minimalną szerokość oraz aktualną szerokość okna
• Gotowe presety dla Tailwind CSS, Bootstrap, Bulma i Foundation
• Własne breakpointy z pełną kontrolą nad nazwami, szerokościami i kolorami
• Pozycja etykiety w dowolnym rogu strony
• Lista dozwolonych i zablokowanych witryn do sterowania widocznością etykiety na poziomie poszczególnych stron
• Aktualizacja w czasie rzeczywistym podczas zmiany rozmiaru okna
• Lekkie rozszerzenie, które nie ingeruje w zawartość strony
• Działa na każdej stronie

Dla kogo jest to rozszerzenie

Dla frontendowych programistów i projektantów tworzących lub testujących responsywne strony internetowe. Zamiast zgadywać lub ręcznie sprawdzać reguły CSS, masz potrzebne informacje od razu na stronie, bez żadnego wysiłku.

Dlaczego warto je zainstalować

Małe, szybkie i nienachalne. Nie wymaga konta, a żadne dane nie opuszczają przeglądarki.