Pixel Ruler

Gunakan Pixel Ruler untuk mengukur piksel di halaman web mana pun: penggaris layar untuk ukuran elemen dan jarak.

Pixel Ruler menaruh penggaris di layar dan membuat Anda bisa mengukur apa pun di dalam browser. Klik ikon di toolbar, seret mouse melintasi tata letak, lalu baca jarak persisnya dalam piksel CSS. Arahkan kursor ke sebuah elemen dan Anda langsung melihat lebar, tinggi, padding, serta jaraknya ke blok di sekitarnya. Angkanya sama persis dengan DevTools, karena ekstensi ini membaca piksel CSS yang sama dengan yang dipakai browser untuk menggambar halaman. Tidak ada panel yang perlu dibuka, tidak ada tangkapan layar yang perlu diekspor, tidak ada hitung-hitungan. Hanya penggaris layar di atas situs yang sedang Anda buka. Satu lapisan saja, tidak perlu berpindah-pindah: 📏 Tekan dan seret untuk mengukur jarak antara dua titik mana pun di halaman. 📏 Arahkan kursor ke sebuah elemen dan lihat ukuran, padding, serta jaraknya ke elemen tetangga. 📏 Jatuhkan garis bantu vertikal dan horizontal, lalu sejajarkan blok terhadap garis itu. Penggaris selalu ada di layar sebagai acuan, dan satu tombol menyalin hasilnya ke clipboard bersama selektor CSS dari elemen di bawah kursor. Cara memulai, dalam tiga langkah: 1. Pasang ekstensi dan sematkan di toolbar. 2. Buka halaman yang sedang Anda kerjakan lalu klik ikonnya. 3. Seret, arahkan, ukur — tekan Esc dua kali kalau sudah selesai. Developer front-end memakainya untuk mencocokkan tata letak dengan mockup. Desainer memakainya sebagai penggaris halaman ketika file handoff sudah tidak sesuai lagi. QA engineer melaporkan bug dengan angka nyata, bukan "tombolnya kelihatan agak turun". Siapa pun yang butuh pengukuran piksel cepat di situs yang sedang berjalan bisa mendapatkannya dalam dua klik. Yang diberikan penggaris web ini: - jarak antara dua titik mana pun, dalam piksel - lebar dan tinggi setiap elemen di halaman - padding, margin, dan celah antar-elemen tetangga - jarak sebuah elemen ke blok di sekelilingnya - skala di tepi atas dan tepi kiri jendela - tag, class, dan selektor CSS dari elemen yang Anda ukur - garis bantu yang bisa dipakai ulang untuk memeriksa perataan Kendali keyboard menjaga kursor tetap stabil: → Shift mengunci pengukuran ke sumbu horizontal atau vertikal → Tombol panah menggeser titik aktif tepat 1 px → Esc menghapus pengukuran aktif, Esc kedua mengembalikan halaman → Satu pintasan menyalin hasil ke clipboard Pasang sekali dan Anda memakai penggaris piksel yang sama dengan pengguna Windows, Linux, dan ChromeOS, sama pula dengan yang dipakai pengguna Mac, karena alat ini hidup di dalam browser, bukan di sistem operasi. Tidak ada berkas unduhan penggaris piksel yang perlu dicari, tidak ada installer, dan tidak perlu hak admin: ekstensi datang dari Chrome Web Store dengan satu klik. Saat rilis ini penggaris piksel gratis, semua fiturnya terbuka untuk semua orang. Aplikasi penggaris layar yang terbuka di jendela terpisah selalu salah ukur begitu halaman digulir. Aplikasi penggaris piksel ini digambar di dalam tab dan ikut bergulir bersama kontennya. Ini penggaris piksel online: bekerja di halaman live, di server staging, di situs klien, di balik halaman login. Penggaris piksel desktop yang mengukur gambar diam dari sebuah jendela tidak bisa melakukan itu. Perlu memeriksa ilustrasi atau logo? Pakai sebagai penggaris piksel untuk gambar — arahkan kursor ke gambarnya dan baca ukuran tampilannya, yang sering berbeda dari ukuran di file aslinya. Tanya jawab T: Bagaimana cara mengukur piksel di layar tanpa membuka DevTools? J: Klik ikonnya lalu seret. Lapisannya berada di atas halaman, jadi Anda mengukur apa yang benar-benar terlihat, termasuk keadaan hover yang hilang saat sebuah panel merebut fokus. T: Penggaris piksel layar, penggaris layar, mistar piksel, screen ruler, px ruler, pixelruler — yang mana ini? J: Semuanya. Alatnya sama, yang berbeda hanya kata pencariannya. T: Bisakah mengukur dalam sentimeter atau inci? J: Tidak. Ini alat penggaris piksel dan hanya melaporkan piksel CSS, satuan yang Anda tulis di stylesheet. T: Apakah bekerja di mana saja? J: Di situs web biasa, ya. Halaman sistem Chrome, penampil PDF bawaan, dan bagian dalam iframe lintas-domain tertutup untuk semua ekstensi, termasuk yang ini. T: Data apa yang dikumpulkan? J: Tidak ada. Nol permintaan jaringan, tanpa akun, tanpa pendaftaran. Saat dipasang ia tidak meminta izin yang bikin waswas, dan baru menyentuh halaman setelah Anda klik ikonnya. Kebiasaan lama lebih lambat dan kurang akurat: menempelkan penggaris plastik ke kaca layar komputer, atau menghitung piksel di tangkapan layar. Penggaris untuk layar komputer harus tinggal di dalam browser, menggambar ulang saat tata letak berubah, dan berbicara dalam satuan yang sama dengan kode. Itulah yang dilakukan lapisan penggaris layar ini, dan itu sebabnya penggaris piksel untuk situs web mengalahkan penggaris yang ditarik di atas gambar layar yang ditempel ke editor grafis. Deskripsi ini tersedia dalam 52 bahasa, jadi penggaris piksel web hanya sejauh satu pencarian dalam bahasa Anda. Pasang, ukur piksel di halaman berikutnya yang Anda buka, dan simpan penggaris layar ini satu klik saja sepanjang hari.