CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
Ukur jarak dan kisi piksel sempurna di halaman web mana pun.
Image from store
Description from store
Ketepatan piksel adalah pahlawan yang tidak terlihat dalam desain yang hebat. Kesalahan penyelarasan satu piksel dapat merusak irama kisi, membuat teks terasa tidak berada di tengah, atau menyebabkan seluruh komponen terlihat "hampir benar" tetapi tidak sepenuhnya benar. Grid Ruler Lite memberikan pengembang front-end, desainer UI/UX, penguji QA, dan siapa saja yang peduli dengan polesan visual perangkat pengukuran instan di dalam browser—tanpa perangkat lunak desain yang berat, tanpa panel DevTools yang berantakan, dan tanpa tangkapan layar yang diacak ke aplikasi eksternal. Dengan satu klik, ekstensi ini melapisi penggaris yang dapat diubah ukurannya, panduan snap-to-grid, dan kisi garis dasar opsional di atas halaman web mana pun sehingga Anda dapat memeriksa spasi, memverifikasi kisi 8 titik, dan menangkap bukti bug tata letak dalam hitungan detik.
Apa yang Membuat Grid Ruler Lite Menonjol?
Aktivasi Satu Klik, Pemberhentian Satu Klik
Klik ikon bilah alat (atau panggil pintasan yang Anda atur di pengaturan papan ketik browser) dan ekstensi akan menyuntikkan elemen ringan<canvas> overlay yang dienkapsulasi dalam Shadow-DOM-nya sendiri. CSS halaman Anda tidak dapat mengganggu, dan overlay tidak akan pernah mengubah pohon DOM yang Anda uji. Klik lagi dan setiap panduan, kisi, dan label akan hilang—tidak ada pemuatan ulang halaman, tidak ada event listener yang tersisa.
Mengapa Anda Membutuhkannya di Perangkat Anda
Hemat Waktu: Mengukur padding di DevTools memerlukan pengeboran ke kotak bersarang dan menambahkan nilai border dan margin secara mental. Grid Ruler Lite menunjukkan jarak secara visual dalam satu tarikan.
Kurangi Bug: Temukan regresi spasi kecil sebelum mencapai tahap pementasan atau, lebih buruk lagi, produksi—terutama pada titik henti responsif yang mana perhatian QA tidak selalu tertuju.
Meningkatkan Kolaborasi: Desainer dapat melapisi kisi 8 titik langsung pada versi yang diterapkan dan berbagi tangkapan layar, sehingga pengembang memperoleh umpan balik piksel yang tepat tanpa komentar Figma.
Tetap Fokus: Tidak perlu menekan alt-tab di Photoshop atau membuka file Sketch hanya untuk mengukur tombol. Semuanya terjadi di halaman langsung, persis seperti yang dilihat pengguna akhir.
Mendidik & Mendokumentasikan: Manajer produk dan penulis teknis dapat menunjukkan perilaku tata letak dengan tangkapan layar penggaris, membuat dokumen spesifikasi lebih jelas bagi semua pemangku kepentingan.
Kelompok Pengguna Sasaran
Kelompok Pengguna
Pengembang Front-End
Perlu memverifikasi spasi CSS, celah flexbox, dan perataan komponen di seluruh titik henti Seret penggaris, jepret ke tepi, kunci panduan, ekspor tangkapan layar untuk tinjauan PR
Desainer UI/UX
Harus mengonfirmasi bahwa pengembangan yang dibangun mematuhi sistem desain 8 poin atau 10 poin. Hamparan kisi garis dasar, ukur bantalan, bagikan PNG yang diberi anotasi
Penguji QA
Laporkan bug piksel sempurna dengan bukti yang jelas
Pengukuran cepat dan tangkapan layar satu tombol langsung masuk ke pelacak bug
Editor Konten & PM
Periksa pembungkusan judul, spasi slot iklan, dan tata letak kartu pada halaman yang digerakkan oleh CMS Hamparan non-teknis menghindari kompleksitas DevTools
Pendidik & Siswa
Ajarkan prinsip desain, teori grid, dan tata letak responsif secara langsung di browser Demonstrasi visual dan waktu nyata tanpa alat eksternal