Klik dua elemen dan lihat jarak yang tepat secara instan.
Klik dua elemen dan lihat jarak yang tepat secara instan. Alat ini menghilangkan tebakan dalam tata letak dengan menyediakan dimensi ruang antar elemen secara presisi di seluruh halaman web.
Klik elemen pertama (ditandai dengan bingkai biru), lalu klik elemen kedua (ditandai dengan bingkai hijau). Jarak antara kotak pembatas (bounding box) keduanya dihitung dan ditampilkan seketika. Tanpa menyeret, tanpa input manual — cukup dua klik.
Lihat jarak horizontal (X), jarak vertikal (Y), dan jarak diagonal secara bersamaan — masing-masing ditampilkan dengan garis ukur dan label berkode warna. X berwarna jingga, Y berwarna merah, dan diagonal berwarna ungu.
Garis ukur putus-putus menghubungkan dua elemen yang dipilih secara langsung pada halaman, dengan label jarak yang diposisikan di tengah setiap garis. Representasi visual ini memperjelas bagian mana yang sedang diukur.
Setiap elemen yang dipilih menunjukkan dimensi lebar × tingginya sendiri dalam label kecil. Ini memungkinkan Anda melihat ukuran elemen sekaligus jarak di antara keduanya dalam satu tampilan yang sama.
Klik pasangan elemen baru untuk memperbarui pengukuran secara instan. Tidak perlu menonaktifkan dan mengaktifkan kembali alat ini. Garis ukur sebelumnya akan diganti dengan yang baru untuk pasangan elemen yang baru.
Bar info tetap di bagian bawah viewport menunjukkan ringkasan ringkas: nama dan dimensi kedua elemen, ditambah ketiga nilai jarak (X, Y, diagonal). Format teks mudah disalin untuk ditempelkan ke laporan bug atau umpan balik desain.
Mockup menyatakan tombol harus berada 24px di bawah judul. Klik judul, klik tombol, dan pastikan jarak Y tepat 24px. Membantu menemukan perbedaan spasi halus yang tidak terlihat oleh mata tetapi ditentukan dalam token desain.
Ukur jarak antara Kartu 1 dan Kartu 2, lalu antara Kartu 2 dan Kartu 3. Jika celahnya tidak identik, Anda telah menemukan ketidakkonsistenan — kemungkinan disebabkan oleh perbedaan margin atau masalah celah (gap) flexbox.
Ukur jarak elemen pada lebar desktop, lalu ubah ukuran browser dan ukur kembali pada lebar seluler. Verifikasi bahwa spasi diskalakan dengan benar di seluruh breakpoint dan penyesuaian margin/padding responsif berfungsi sesuai desain.
Sertakan pengukuran presisi dalam laporan bug Anda: "Celah antara navigasi dan hero adalah 47px, seharusnya 32px sesuai spesifikasi desain." Nilai pada bar info dapat disalin langsung ke tiket Jira atau issue GitHub.
Klik dua elemen yang seharusnya sejajar secara horizontal. Jika jarak Y adalah 0px, maka keduanya selaras sempurna. Nilai Y selain nol menunjukkan ketidakselarasan vertikal — angka pastinya memberi tahu Anda berapa piksel selisihnya.
Buka dok mengambang DevSuite Pro dan klik ikon Ukur Jarak. Kursor akan berubah menjadi crosshair, menandakan Anda dapat memilih elemen pertama.
Klik elemen apa pun di halaman. Elemen tersebut akan disorot dengan bingkai biru dan diberi label "Elemen A" beserta dimensinya (lebar × tinggi dalam piksel).
Klik elemen kedua. Elemen tersebut akan disorot dengan bingkai hijau dan diberi label "Elemen B." Garis ukur akan segera muncul menghubungkan kedua elemen tersebut.
Tiga garis ukur akan muncul: horizontal (X) berwarna jingga, vertikal (Y) berwarna merah, dan diagonal berwarna ungu. Setiap garis memiliki label yang menunjukkan jarak piksel. Bar info di bagian bawah merangkum semua nilai.
Klik pasangan elemen lain untuk mengukur jarak baru secara instan. Klik ikon Ukur Jarak di dok untuk menonaktifkan alat setelah selesai.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
