El Mesurador de distàncies et permet clicar en qualsevol parell d'elements d'una pàgina web i veure a l'instant la distància de píxels exacta entre ells — horitzontalment (X), verticalment (Y) i diagonalment. Apareixen línies de connexió visuals amb les mesures etiquetades entre els elements, i una barra d'informació mostra les dimensions d'ambdós elements i les distàncies en les tres direccions.
Comprovar l'espaiat entre dos elements amb les DevTools del navegador requereix passar el ratolí per sobre de cada element per separat, llegir els valors de margin/padding i fer càlculs mentals per esbrinar la distància visual real. El Mesurador de distàncies ho elimina completament. Clica a l'Element A, clica a l'Element B, i les distàncies de píxels exactes apareixeran immediatament — X (horitzontal), Y (vertical) i diagonal — mostrades com a línies etiquetades que connecten els dos elements directament sobre la pàgina. L'eina mesura des de les vores dels elements (caixes delimitadores), de manera que els valors representen l'espai visual real entre elements tal com el veu l'usuari. Això és diferent de llegir els valors del margin/padding, que no tenen en compte l'efecte acumulat de múltiples propietats d'espaiat. Cada element seleccionat es ressalta amb una vora de color i mostra les seves pròpies dimensions (amplada × alçada), de manera que pots veure tant les mides dels elements com l'espaiat entre ells en una sola vista.
Clica al primer element (ressaltat amb una vora blava) i després al segon element (ressaltat amb una vora verda). Les distàncies entre les seves caixes delimitadores es calculen i es mostren a l'instant. Sense arrossegar ni introduir dades manualment — només dos clics.
Mira la distància horitzontal (X), la vertical (Y) i la diagonal simultàniament — cadascuna amb la seva línia de mesura codificada per color i etiqueta. La X en ambre, la Y en vermell i la diagonal en lila.
Línies de mesura discontínues connecten els dos elements seleccionats directament sobre la pàgina, amb etiquetes de distància situades al punt mitjà de cada línia. La representació visual clarifica immediatament què s'està mesurant.
Cada element seleccionat mostra les seves dimensions d'amplada × alçada en una petita etiqueta. Això et permet veure tant les mides dels elements com l'espaiat entre ells en la mateixa vista — sense canviar d'eina.
Clica un nou parell d'elements per actualitzar les mesures a l'instant. No cal desactivar i tornar a activar l'eina. Les línies de mesura anteriors se substitueixen per unes de noves per al nou parell d'elements.
Una barra d'informació persistent a la part inferior del visor mostra un resum compacte: els noms i dimensions d'ambdós elements, a més dels tres valors de distància (X, Y, diagonal). Fàcil de copiar per enganxar en informes d'errors o comentaris de disseny.
La maqueta indica que el botó ha d'estar 24px per sota de l'encapçalament. Clica a l'encapçalament, clica al botó i confirma que la distància Y és exactament de 24px. Detecta discrepàncies d'espaiat subtils que són invisibles a l'ull però especificades als tokens de disseny.
Mesura la distància entre la Targeta 1 i la Targeta 2 i després entre la Targeta 2 i la Targeta 3. Si els buits no són idèntics, has trobat una inconsistència — segurament causada per marges diferents o un problema de buit (gap) de flexbox.
Mesura les distàncies dels elements en l'amplada de l'escriptori, després canvia la mida del navegador i torna a mesurar en l'amplada del mòbil. Verifica que l'espaiat s'escala correctament entre els punts de ruptura i que els ajustos reactius de margin/padding funcionen com s'ha dissenyat.
Inclou mesures precises als teus informes d'errors: "L'espai entre la navegació i l'àrea hero és de 47px, i hauria de ser de 32px segons l'especificació del disseny". Els valors de la barra d'informació es poden copiar directament a tiquets de Jira o incidències de GitHub.
Clica a dos elements que haurien d'estar alineats horitzontalment. Si la distància Y és de 0px, estan perfectament alineats. Qualsevol valor de Y que no sigui zero indica una desalineació vertical — el número exacte t'indica quants píxels de desviament hi ha.
Obre el tauler flotant de DevSuite Pro i fes clic a la icona del Mesurador de distàncies. El cursor canviarà a una creueta, indicant que pots seleccionar el primer element.
Clica en qualsevol element de la pàgina. Ressaltarà amb una vora blava i s'etiquetarà com a "Element A" amb les seves dimensions (amplada × alçada en píxels).
Clica en un segon element. Ressaltarà amb una vora verda i s'etiquetarà com a "Element B". Les línies de mesura apareixeran immediatament connectant els dos elements.
Apareixen tres línies de mesura: horitzontal (X) en ambre, vertical (Y) en vermell i diagonal en lila. Cada línia té una etiqueta que mostra la distància en píxels. La barra d'informació de la part inferior resumeix tots els valors.
Clica en un altre parell d'elements per mesurar una nova distància a l'instant. Fes clic a la icona del Mesurador de distàncies al tauler per desactivar l'eina quan hagis acabat.
Instal·la DevSuite Pro gratuïtament i desbloqueja més de 39 eines de desenvolupador per al teu navegador.
