Pixel Ruler

Guna Pixel Ruler untuk mengukur piksel pada mana-mana halaman web: pembaris skrin untuk saiz elemen dan jarak.

Pixel Ruler meletakkan pembaris terus di atas skrin dan membolehkan anda mengukur apa sahaja di dalam pelayar. Klik ikon pada bar alat, seret tetikus merentasi susun atur, dan baca jarak tepat dalam piksel CSS. Tuding pada sesuatu elemen dan anda terus dapat lebar, tinggi, padding serta jurang ke blok di sekelilingnya. Angkanya sama dengan DevTools, kerana sambungan ini membaca piksel CSS yang sama seperti yang digunakan pelayar untuk melukis halaman. Tiada panel untuk dibuka, tiada tangkapan skrin untuk dieksport, tiada kira-kira. Hanya pembaris skrin di atas laman yang sedang anda lihat. Satu lapisan sahaja, tiada apa-apa untuk ditukar: 📏 Tekan dan seret untuk mengukur jarak antara mana-mana dua titik pada halaman. 📏 Tuding pada elemen dan lihat saiznya, padding dan sesarannya terhadap elemen jiran. 📏 Letakkan panduan menegak dan mendatar, kemudian jajarkan blok padanya. Pembaris sentiasa ada di skrin sebagai rujukan, dan satu kekunci menyalin hasilnya ke papan keratan bersama pemilih CSS bagi elemen di bawah penuding. Cara bermula, dalam tiga langkah: 1. Pasang sambungan ini dan semat pada bar alat. 2. Buka halaman yang sedang anda kerjakan dan klik ikonnya. 3. Seret, tuding, ukur — tekan Esc dua kali apabila selesai. Pembangun front-end menggunakannya untuk membandingkan susun atur dengan reka bentuk. Pereka menjadikannya pembaris halaman apabila fail serahan sudah tidak dikemas kini. Jurutera QA melaporkan pepijat dengan angka sebenar, bukan "butang itu nampak macam terlalu ke bawah". Sesiapa yang perlukan ukuran piksel pantas pada laman langsung mendapatnya dalam dua klik. Apa yang pembaris web ini berikan: - jarak antara mana-mana dua titik, dalam piksel - lebar dan tinggi mana-mana elemen pada halaman - padding, margin dan jurang antara elemen jiran - sesaran dari satu elemen ke blok di sekelilingnya - skala di sepanjang tepi atas dan kiri tetingkap - tag, kelas dan pemilih CSS bagi elemen yang anda ukur - garis panduan boleh guna semula untuk memeriksa penjajaran Kawalan papan kekunci mengekalkan penuding stabil: → Shift mengunci ukuran pada paksi mendatar atau menegak → Kekunci anak panah menganjak titik semasa tepat 1 px → Esc mengosongkan ukuran semasa, Esc kedua memulangkan halaman → Satu pintasan menyalin hasilnya ke papan keratan Pasang sekali sahaja dan anda mendapat pembaris piksel yang sama seperti pengguna Windows, Linux dan ChromeOS, serta pembaris piksel yang sama seperti pengguna Mac, kerana alat ini hidup di dalam pelayar, bukan di dalam sistem pengendalian. Tiada muat turun pembaris piksel yang perlu dicari, tiada pemasang dan tiada hak pentadbir: sambungan ini tiba dari Chrome Web Store dengan satu klik. Ia pembaris piksel percuma pada permulaan, dengan setiap ciri terbuka untuk semua orang. Aplikasi pembaris skrin yang terbuka dalam tetingkap berasingan akan tersalah ukur sebaik sahaja halaman ditatal. Aplikasi pembaris piksel ini dilukis di dalam tab dan menatal bersama kandungan. Ini pembaris piksel dalam talian: ia berfungsi pada halaman langsung, pada pelayan pementasan, pada laman pelanggan, di sebalik log masuk. Pembaris piksel desktop yang mengukur gambar statik sesebuah tetingkap tidak mampu berbuat begitu. Perlu menyemak ilustrasi atau logo? Gunakannya sebagai pembaris piksel untuk imej — tuding pada gambar dan baca saiz terpaparnya, yang selalunya bukan saiz dalam fail sumber. Soalan dan jawapan S: Bagaimana hendak mengukur piksel pada skrin tanpa membuka DevTools? J: Klik ikon dan seret. Lapisan ini duduk di atas halaman, jadi anda mengukur apa yang benar-benar anda lihat, termasuk keadaan tuding yang hilang apabila sesuatu panel merampas fokus. S: Pembaris skrin, pembaris piksel skrin, pembaris px, screen ruler, px ruler, pixelruler — yang mana satu ini? J: Semuanya. Alatnya sama, cuma frasa cariannya berbeza. S: Bolehkah ia mengukur dalam sentimeter atau inci? J: Tidak. Ia alat pembaris piksel dan ia melaporkan piksel CSS sahaja, unit yang anda tulis dalam helaian gaya anda. S: Adakah ia berfungsi di mana-mana? J: Pada laman web biasa, ya. Halaman sistem Chrome, pemapar PDF terbina dalam dan bahagian dalam iframe merentas asal tertutup kepada setiap sambungan, termasuk yang ini. S: Data apa yang dikumpulnya? J: Tiada. Sifar permintaan rangkaian, tiada akaun, tiada pendaftaran. Ia tidak meminta kebenaran yang menakutkan semasa pemasangan dan hanya menyentuh halaman selepas anda klik ikonnya. Tabiat lama lebih perlahan dan kurang tepat: menekap pembaris plastik pada kaca skrin komputer, atau mengira piksel pada tangkapan skrin. Pembaris untuk kerja pada skrin komputer mesti hidup di dalam pelayar, melukis semula apabila susun atur berubah, dan bercakap dalam unit yang sama seperti kod. Itulah yang dilakukan lapisan pembaris ini, dan sebab itu pembaris piksel laman web mengalahkan pembaris untuk imej skrin yang ditampal ke dalam editor grafik. Penyenaraian ini tersedia dalam 52 bahasa, jadi pembaris piksel web hanya satu carian jauhnya dalam bahasa anda. Pasangkannya, ukur piksel pada halaman seterusnya yang anda buka, dan simpan pembaris skrin sejauh satu klik sepanjang hari.