← Torna alle funzionalità
Free

Misura distanza

Clicca su due elementi e vedi la distanza esatta.

Nei DevTools servono calcoli mentali. Misura distanza elimina tutto con due clic.

Anteprima dal vivo
example.com/layout Measure Mode: ON
Logo
Element A
CTA Button
Element B
X: 248px
Y: 140px
Diagonal: 285px
A: Logo (120×48) B: CTA Button (140×48) | X: 248px Y: 140px D: 285px
Caratteristiche principali

Misurazione a due clic

Clicca primo (bordo blu) poi secondo (bordo verde).

Valori tre direzioni

Orizzontale X, verticale Y e diagonale.

Linee connessione visive

Linee tratteggiate con etichette distanza.

Etichette dimensioni

Ogni elemento mostra larghezza x altezza.

Ri-misurazione rapida

Clicca nuovi elementi per aggiornare.

Barra info

Riepilogo compatto in basso.

Casi d'uso comuni

Verifica spaziatura

Mockup dice 24px? Clicca e verifica.

Gap coerenti

Misura tra card consecutive.

Spaziatura responsive

Misura a desktop e mobile.

Bug report

Includi misure precise nei report.

Allineamento

Y=0 significa perfettamente allineati.

Come usare
1

Attiva

Apri dock e clicca icona.

2

Primo elemento

Clicca - bordo blu, Elemento A.

3

Secondo elemento

Clicca - bordo verde, linee appaiono.

4

Leggi distanze

X arancione, Y rosso, diagonale viola.

5

Ri-misura

Clicca nuovi elementi.

Pronto a provare? Misura distanza?

Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox