Pixel Ruler

Użyj Pixel Ruler, aby mierzyć piksele na dowolnej stronie: linijka na ekranie do rozmiarów i odstępów.

Pixel Ruler kładzie linijkę na ekranie i pozwala zmierzyć w przeglądarce dowolny element. Kliknij ikonę na pasku narzędzi, przeciągnij myszą po układzie i odczytaj dokładną odległość w pikselach CSS. Najedź na element, a zobaczysz jego szerokość, wysokość, wypełnienie i odstępy do sąsiednich bloków. Liczby zgadzają się z DevTools, bo rozszerzenie czyta te same piksele CSS, którymi przeglądarka rysuje stronę. Żadnego panelu do otwierania, żadnego zrzutu ekranu do wyeksportowania, żadnego liczenia w pamięci. Po prostu linijka ekranowa na stronie, którą i tak masz przed sobą. Jedna nakładka, nie ma między czym się przełączać: 📏 Przytrzymaj i przeciągnij, aby zmierzyć odległość między dowolnymi dwoma punktami strony. 📏 Wskaż element i zobacz jego rozmiar, wypełnienie oraz odstępy od sąsiadów. 📏 Rozstaw pionowe i poziome prowadnice i wyrównuj do nich bloki. Linijka jest zawsze na ekranie jako punkt odniesienia, a jeden klawisz kopiuje wynik do schowka razem z selektorem CSS elementu pod kursorem. Jak zacząć, w trzech krokach: 1. Zainstaluj rozszerzenie i przypnij je do paska narzędzi. 2. Otwórz stronę, nad którą pracujesz, i kliknij ikonę. 3. Przeciągaj, najeżdżaj, mierz — na koniec naciśnij dwa razy Esc. Front-endowcy sprawdzają w ten sposób układ względem makiety. Projektanci używają jej jako linijki do strony, gdy plik z przekazaniem projektu zdążył się już zdezaktualizować. Testerzy zgłaszają błąd z konkretną liczbą zamiast "przycisk jakby wisi za nisko". Każdy, kto potrzebuje szybkiego pomiaru w pikselach na działającej stronie, dostaje go w dwóch kliknięciach. Co daje ta linijka do stron: - odległość między dowolnymi dwoma punktami, w pikselach - szerokość i wysokość dowolnego elementu na stronie - wypełnienie, marginesy i odstępy między sąsiadami - przesunięcia od elementu do otaczających go bloków - podziałki wzdłuż górnej i lewej krawędzi okna - tag, klasy i selektor CSS zmierzonego elementu - prowadnice wielokrotnego użytku do sprawdzania wyrównania Sterowanie z klawiatury, żeby kursor nie drgnął: → Shift blokuje pomiar w osi poziomej albo pionowej → Strzałki przesuwają bieżący punkt dokładnie o 1 px → Esc czyści bieżący pomiar, drugi Esc oddaje stronę → Jeden skrót kopiuje wynik do schowka Instalujesz raz i masz tę samą linijkę pikselową, z której korzystają użytkownicy Windows, Linux i ChromeOS, oraz tę samą linijkę pikselową, z której korzystają użytkownicy Mac, bo narzędzie mieszka w przeglądarce, a nie w systemie operacyjnym. Nie ma czego szukać do pobrania, nie ma instalatora ani uprawnień administratora: rozszerzenie przychodzi z Chrome Web Store jednym kliknięciem. Na start to darmowa linijka pikselowa, wszystkie funkcje otwarte dla wszystkich. Linijka ekranowa otwierana w osobnym oknie zaczyna mierzyć nie to, co trzeba, gdy tylko strona się przewinie. Ta linijka pikselowa jest rysowana wewnątrz karty i przewija się razem z treścią. To linijka pikselowa online: działa na żywej stronie, na serwerze testowym, na stronie klienta, za logowaniem. Program na pulpicie, który mierzy nieruchomy obraz okna, tego nie potrafi. Trzeba sprawdzić ilustrację albo logo? Użyj jej jako linijki pikselowej do obrazków — najedź na grafikę i odczytaj jej rozmiar wyświetlania, który często nie jest rozmiarem z pliku źródłowego. Pytania i odpowiedzi P: Jak zmierzyć piksele na ekranie bez otwierania DevTools? O: Kliknij ikonę i przeciągnij. Nakładka leży nad stroną, więc mierzysz to, co naprawdę widzisz, łącznie ze stanami hover, które znikają, gdy panel przejmuje fokus. P: Linijka ekranowa, linijka pikselowa, miarka w pikselach, screen ruler, px ruler, pixelruler — które z tego to jest? O: Wszystkie. Narzędzie jest to samo, zmienia się tylko fraza w wyszukiwarce. P: Czy zmierzy w centymetrach albo calach? O: Nie. To narzędzie do pomiaru w pikselach i podaje wyłącznie piksele CSS, czyli jednostkę, którą wpisujesz w arkuszu stylów. P: Czy działa wszędzie? O: Na zwykłych stronach tak. Strony systemowe Chrome, wbudowana przeglądarka PDF i wnętrze iframe z innej domeny są zamknięte dla każdego rozszerzenia, tego również. P: Jakie dane zbiera? O: Żadnych. Zero zapytań sieciowych, bez konta, bez rejestracji. Przy instalacji nie prosi o żadne straszne uprawnienia, a stronę dotyka dopiero po kliknięciu ikony. Stare nawyki są wolniejsze i mniej dokładne: przykładanie plastikowej linijki do szkła monitora albo liczenie pikseli na zrzucie ekranu. Linijka do pracy na ekranie komputera musi mieszkać w przeglądarce, przerysowywać się, gdy układ się przelicza, i mówić tymi samymi jednostkami co kod. Dokładnie to robi ta nakładka, i dlatego linijka pikselowa do stron wygrywa z linijką naniesioną na zrzut ekranu w edytorze graficznym. Opis jest dostępny w 52 językach, więc linijka pikselowa dla przeglądarki jest o jedno wyszukiwanie od ciebie także po polsku. Zainstaluj, zmierz piksele na następnej otwartej stronie i trzymaj linijkę ekranową o jedno kliknięcie przez resztę dnia.