A Régua de Página adiciona réguas no estilo Photoshop e linhas de guia arrastáveis a qualquer página da web. Réguas com precisão de pixel percorrem as bordas superior e esquerda da janela de visualização, e você pode arrastar linhas de guia para a página para medir distâncias, verificar o alinhamento e validar o espaçamento — tudo diretamente na página ao vivo.
Designers que trabalham no Figma ou Photoshop dependem de réguas e guias para verificar o espaçamento e o alinhamento. Mas quando esses designs são implementados em HTML/CSS, verificar a precisão dos pixels geralmente significa abrir o DevTools, passar o mouse sobre os elementos um por um e comparar os valores calculados com o mockup. A Régua de Página traz o fluxo de trabalho familiar de régua e guia diretamente para o navegador. Uma régua horizontal com marcas de escala abrange o topo da janela de visualização, e uma régua vertical abrange a borda esquerda — ambas mostrando as posições dos pixels. Clique e arraste de qualquer régua para puxar uma linha de guia para a página. As guias são codificadas por cores (azul para horizontal, vermelho para vertical) e mostram sua posição em pixels. A distância entre quaisquer duas guias paralelas é calculada e exibida automaticamente. Arraste as guias para reposicioná-las ou clique duas vezes para remover. Toda a sobreposição não é intrusiva — ela fica no topo da página sem afetar o layout ou as interações.
Réguas precisas com marcas de escala a cada 50 pixels percorrem as bordas superior e esquerda da janela de visualização. As réguas rolam com a página e mostram posições de pixels precisas em relação à origem da página (0,0). Marcas de escala em intervalos de 10px com rótulos a cada 50px.
Clique e arraste da régua horizontal para criar uma guia horizontal, ou da régua vertical para uma guia vertical. As guias se ajustam à posição do cursor e mostram sua coordenada exata em pixels (ex: y: 200px). Arraste para reposicionar, clique duas vezes para remover.
Quando duas guias paralelas são colocadas, a distância em pixels entre elas é calculada e exibida automaticamente com um colchete de conexão e um rótulo. Coloque duas guias horizontais com 120px de distância e veja "120px" rotulado entre elas.
As guias horizontais são azuis, as guias verticais são vermelhas — facilitando a distinção rápida quando várias guias são colocadas. Cada guia mostra sua posição em um pequeno emblema de rótulo.
As réguas e guias são renderizadas como uma sobreposição transparente que não afeta o DOM, o layout ou o JavaScript da página. Você ainda pode clicar para interagir com os elementos da página. A sobreposição captura apenas cliques nas réguas e nas alças das guias.
Coloque quantas guias precisar — não há limite. Crie uma grade de medição completa com guias horizontais e verticais marcando cada ponto de alinhamento significativo na página.
O mockup diz que o cabeçalho tem 80px de altura e o conteúdo começa a 120px do topo. Coloque guias horizontais nessas posições e verifique instantaneamente se a página implementada corresponde às especificações do design.
Coloque guias na parte superior e inferior de elementos repetidos (cartões, itens de lista, seções) para verificar se todos têm espaçamento idêntico. Lacunas inconsistentes entre os itens tornam-se imediatamente óbvias.
Coloque uma guia vertical na borda esquerda de um título e verifique se o texto do parágrafo, os botões e as imagens abaixo se alinham na mesma linha. Desalinhamentos de até mesmo alguns pixels são visíveis contra a guia.
Coloque duas guias verticais nas bordas esquerda e direita de um elemento para medir sua largura. Coloque duas guias horizontais para a altura. A distância calculada automaticamente fornece as dimensões exatas em pixels.
Coloque uma guia vertical nas larguras de breakpoint comuns (768px, 1024px, 1280px) e redimensione o navegador para verificar se os elementos fluem corretamente em cada breakpoint. As guias permanecem fixas como pontos de referência visual.
Abra o dock flutuante do DevSuite Pro e clique no ícone Régua de Página. Réguas com precisão de pixel aparecem ao longo das bordas superior e esquerda da janela de visualização.
Clique e arraste da régua superior para colocar uma linha de guia horizontal, ou da régua esquerda para uma guia vertical. A guia segue o seu cursor e se ajusta à posição do pixel onde você solta.
Cada guia mostra sua posição em pixels (ex: y: 200px). Quando duas guias paralelas são colocadas, a distância entre elas é exibida automaticamente com um colchete rotulado.
Arraste qualquer guia para movê-la para uma nova posição — os rótulos de distância são atualizados em tempo real. Clique duas vezes em uma guia para removê-la da página.
Clique no ícone Régua de Página novamente para ocultar todas as réguas e guias. Suas posições de guia são preservadas se você reativar durante a mesma sessão.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
