A ferramenta Medir Distância permite calcular o espaçamento horizontal, vertical e diagonal entre quaisquer dois elementos em uma página da web. Basta clicar no primeiro elemento, depois no segundo, e ver as medições precisas em pixels exibidas instantaneamente com linhas de guia coloridas.
Garantir o espaçamento correto entre os elementos é crucial para a fidelidade do design, mas o DevTools tradicional exige que você inspecione os elementos individualmente e calcule as diferenças de margem/preenchimento manualmente. O Medir Distância automatiza esse processo. Ao selecionar dois elementos, a ferramenta desenha linhas de medição dinâmicas entre eles: uma linha âmbar para a distância horizontal (X), uma linha vermelha para a distância vertical (Y) e uma linha roxa para a distância diagonal direta. Cada linha é rotulada com o valor exato em pixels. Se os elementos se sobrepõem ou estão distantes, a ferramenta calcula a distância mais curta entre suas bordas. Uma barra de informações na parte inferior da tela fornece um resumo detalhado de ambos os elementos e todas as medições, facilitando a verificação de mockups de design e a detecção de inconsistências de layout.
Calcula a distância exata em pixels entre as bordas de dois elementos selecionados. Suporta medições horizontais, verticais e diagonais simultaneamente, fornecendo uma visão completa do espaçamento espacial.
Desenha linhas coloridas diretamente na página conectando os dois elementos. As linhas se ajustam em tempo real se os elementos forem movidos ou se a página for redimensionada, mantendo as medições sempre precisas.
O primeiro elemento selecionado (Elemento A) é destacado em azul, e o segundo (Elemento B) em verde. Rótulos claros mostram as dimensões de cada elemento, para que você saiba exatamente o que está medindo.
Se os elementos estiverem sobrepostos, a ferramenta detecta a interseção e mede a distância negativa ou o deslocamento. Se um estiver dentro do outro, ela mede a distância das bordas internas para as externas.
Uma barra de informações flutuante na parte inferior da tela mostra os seletores de ambos os elementos, suas dimensões (L x A) e as medições X, Y e diagonais. Copie qualquer valor com um único clique.
Alterne rapidamente entre os elementos para comparar diferentes espaçamentos. Clique em um novo elemento para substituir a seleção atual e ver as novas medições instantaneamente.
Compare o espaçamento no seu site implementado com o mockup do Figma. Verifique se a margem de 24px entre o título e o corpo do texto é exatamente 24px, garantindo que o design seja seguido com precisão.
Dois elementos parecem desalinhados? Use o Medir Distância para verificar se eles têm o mesmo deslocamento horizontal ou vertical. A linha de medição X ou Y mostrará qualquer diferença de 1px instantaneamente.
Verifique os valores de gap em layouts Grid ou Flexbox. Meça a distância entre os itens da grade para confirmar se as propriedades de espaçamento do CSS estão sendo aplicadas corretamente em diferentes tamanhos de tela.
Ao construir componentes reutilizáveis, use a ferramenta para verificar o espaçamento interno e externo. Garanta que os botões, ícones e texto dentro de um card mantenham proporções consistentes.
Redimensione o navegador e use a ferramenta para ver como o espaçamento muda. Verifique se as margens diminuem corretamente em telas menores conforme definido no seu CSS responsivo.
Abra o dock flutuante do DevSuite Pro e clique no ícone Medir Distância. O cursor mudará para indicar que a ferramenta de medição está ativa.
Clique em qualquer elemento na página (Elemento A). Ele será destacado com uma borda azul e suas dimensões serão exibidas.
Clique em outro elemento (Elemento B). Uma borda verde aparecerá ao redor dele, e as linhas de medição serão desenhadas entre os dois elementos.
Veja as linhas coloridas: âmbar para horizontal, vermelho para vertical e roxo para diagonal. Os valores em pixels são exibidos diretamente nas linhas e na barra de resumo inferior.
Clique em um novo elemento para substituir a última seleção, ou clique no ícone da ferramenta novamente para desativar as medições e limpar os destaques.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
