Medir Distancia te permite hacer clic en dos elementos cualesquiera de una página web y ver al instante la distancia exacta en píxeles entre ellos — horizontalmente (X), verticalmente (Y) y diagonalmente. Aparecen líneas de conexión visuales con mediciones etiquetadas entre los elementos, y una barra de información muestra las dimensiones de ambos elementos y las distancias en las tres direcciones.
Verificar el espaciado entre dos elementos en los DevTools del navegador requiere pasar el cursor sobre cada elemento por separado, leer los valores de margen/padding y hacer cálculos mentales para calcular la distancia visual real. Medir Distancia elimina esto por completo. Haz clic en el Elemento A, haz clic en el Elemento B, y las distancias exactas en píxeles aparecen inmediatamente — X (horizontal), Y (vertical) y diagonal — mostradas como líneas etiquetadas conectando los dos elementos directamente en la página. La herramienta mide desde los bordes del elemento (bounding boxes), por lo que los valores representan el espacio visual real entre los elementos como los ve el usuario. Esto es diferente de leer los valores de margen/padding, que no tienen en cuenta el efecto acumulativo de múltiples propiedades de espaciado. Cada elemento seleccionado se resalta con un borde de color y muestra sus propias dimensiones (ancho × alto), por lo que puedes ver tanto los tamaños de los elementos como el espaciado entre ellos en una sola vista.
Haz clic en el primer elemento (resaltado con un borde azul), luego haz clic en el segundo elemento (resaltado con un borde verde). Las distancias entre sus bounding boxes se calculan y muestran al instante. Sin arrastrar, sin entrada manual — solo dos clics.
Ve la distancia horizontal (X), distancia vertical (Y) y distancia diagonal simultáneamente — cada una mostrada con su propia línea de medición codificada por color y etiqueta. X en ámbar, Y en rojo, diagonal en púrpura.
Líneas de medición discontinuas conectan los dos elementos seleccionados directamente en la página, con etiquetas de distancia posicionadas en el punto medio de cada línea. La representación visual hace inmediatamente claro lo que se está midiendo.
Cada elemento seleccionado muestra sus propias dimensiones de ancho × alto en una pequeña etiqueta. Esto te permite ver tanto los tamaños de los elementos como el espaciado entre ellos en la misma vista — sin cambiar de herramienta.
Haz clic en un nuevo par de elementos para actualizar las mediciones al instante. No es necesario desactivar y reactivar la herramienta. Las líneas de medición anteriores se reemplazan con nuevas para el nuevo par de elementos.
Una barra de información persistente en la parte inferior del viewport muestra un resumen compacto: nombres y dimensiones de ambos elementos, más los tres valores de distancia (X, Y, diagonal). Fácil de copiar para pegar en informes de errores o retroalimentación de diseño.
La maqueta dice que el botón debe estar 24px debajo del encabezado. Haz clic en el encabezado, haz clic en el botón, y confirma que la distancia Y sea exactamente 24px. Detecta discrepancias sutiles de espaciado que son invisibles al ojo pero especificadas en los tokens de diseño.
Mide la distancia entre la Tarjeta 1 y la Tarjeta 2, luego entre la Tarjeta 2 y la Tarjeta 3. Si los espacios no son idénticos, has encontrado una inconsistencia — probablemente causada por márgenes diferentes o un problema de gap de flexbox.
Mide las distancias de los elementos en el ancho de escritorio, luego redimensiona el navegador y mide nuevamente en el ancho móvil. Verifica que el espaciado escale correctamente en los breakpoints y que los ajustes responsivos de margen/padding funcionen como se diseñaron.
Incluye mediciones precisas en tus informes de errores: "El espacio entre la nav y el hero es de 47px, debería ser 32px según la especificación de diseño". Los valores de la barra de información se pueden copiar directamente en tickets de Jira o issues de GitHub.
Haz clic en dos elementos que deberían estar alineados horizontalmente. Si la distancia Y es 0px, están perfectamente alineados. Cualquier valor Y distinto de cero indica una desalineación vertical — el número exacto te dice cuántos píxeles de diferencia tiene.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono de Medir Distancia. El cursor cambia a un punto de mira, indicando que puedes seleccionar el primer elemento.
Haz clic en cualquier elemento de la página. Se resalta con un borde azul y se etiqueta como "Elemento A" con sus dimensiones (ancho × alto en píxeles).
Haz clic en un segundo elemento. Se resalta con un borde verde y se etiqueta como "Elemento B". Las líneas de medición aparecen inmediatamente conectando los dos elementos.
Aparecen tres líneas de medición: horizontal (X) en ámbar, vertical (Y) en rojo y diagonal en púrpura. Cada línea tiene una etiqueta mostrando la distancia en píxeles. La barra de información en la parte inferior resume todos los valores.
Haz clic en otro par de elementos para medir una nueva distancia al instante. Haz clic en el ícono de Medir Distancia en el dock para desactivar la herramienta cuando termines.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
