Pixel Ruler

Use o Pixel Ruler para medir pixels em qualquer página: uma régua na tela para tamanho de elementos e espaçamentos.

O Pixel Ruler coloca uma régua na tela e deixa você medir qualquer coisa dentro do navegador. Clique no ícone da barra de ferramentas, arraste o mouse pelo layout e leia a distância exata em pixels CSS. Passe o cursor sobre um elemento e você recebe a largura, a altura, o padding e os espaços até os blocos vizinhos. Os números batem com o DevTools, porque a extensão lê os mesmos pixels CSS que o navegador usa para desenhar a página. Nenhum painel para abrir, nenhuma captura de tela para exportar, nenhuma conta de cabeça. Só uma régua de tela por cima do site que você já está olhando. Uma única sobreposição, nada para ficar alternando: 📏 Pressione e arraste para medir a distância entre dois pontos quaisquer da página. 📏 Aponte para um elemento e veja o tamanho, o padding e as distâncias até os vizinhos. 📏 Solte guias verticais e horizontais e alinhe os blocos por elas. Você sempre tem uma régua na tela como referência, e uma tecla copia o resultado para a área de transferência junto com o seletor CSS do elemento sob o cursor. Como começar, em três passos: 1. Instale a extensão e fixe na barra de ferramentas. 2. Abra a página em que você está trabalhando e clique no ícone. 3. Arraste, aponte, meça — aperte Esc duas vezes quando terminar. Quem trabalha com front-end usa para conferir o layout contra o mockup. Designers usam como régua de página quando o arquivo de handoff já está desatualizado. O pessoal de QA abre um bug com um número real em vez de "o botão parece um pouco baixo". Quem precisa de uma medida rápida em pixels num site no ar resolve em dois cliques. O que esta régua para web entrega: - a distância entre dois pontos quaisquer, em pixels - largura e altura de qualquer elemento da página - padding, margens e os espaços entre vizinhos - os deslocamentos de um elemento até os blocos ao redor - escalas nas bordas superior e esquerda da janela - a tag, as classes e o seletor CSS do elemento medido - guias reutilizáveis para conferir alinhamento Controle pelo teclado para o cursor não sair do lugar: → Shift trava a medição no eixo horizontal ou vertical → As setas deslocam o ponto atual em exatamente 1 px → Esc limpa a medição atual, um segundo Esc devolve a página → Um atalho copia o resultado para a área de transferência Instale uma vez e você tem a mesma régua de pixels que roda para quem usa Windows, Linux e ChromeOS, e a mesma régua de pixels que roda para quem usa Mac, porque a ferramenta mora no navegador, não no sistema operacional. Não existe download de régua de pixels para caçar, nem instalador, nem direitos de administrador: a extensão chega da Chrome Web Store em um clique. No lançamento é uma régua de pixels gratuita, com todos os recursos abertos para todo mundo. Um aplicativo de régua de tela que abre numa janela separada passa a medir a coisa errada assim que a página rola. Esta régua de pixels é desenhada dentro da aba e rola junto com o conteúdo. Esta é uma régua de pixels online: funciona na página no ar, num servidor de homologação, no site do cliente, atrás de um login. Um programa de desktop que mede uma foto parada da janela não consegue fazer isso. Precisa conferir uma ilustração ou um logo? Use como régua de pixels para imagens: passe o cursor sobre a figura e leia o tamanho renderizado, que muitas vezes não é o tamanho do arquivo original. Perguntas e respostas P: Como medir pixels na tela sem abrir o DevTools? R: Clique no ícone e arraste. A sobreposição fica acima da página, então você mede o que realmente vê, inclusive estados de hover que somem quando um painel rouba o foco. P: Régua de pixels na tela, régua de tela, régua em px, screen ruler, px ruler, pixelruler — qual delas é esta? R: Todas. A ferramenta é a mesma, o que muda é a frase da busca. P: Dá para medir em centímetros ou polegadas? R: Não. É uma régua de pixels e ela reporta apenas pixels CSS, a unidade que você escreve na sua folha de estilo. P: Funciona em qualquer lugar? R: Em sites comuns, sim. Páginas de sistema do Chrome, o leitor de PDF embutido e o interior de iframe de outra origem são fechados para qualquer extensão, inclusive esta. P: Que dados ela coleta? R: Nenhum. Zero requisições de rede, sem conta, sem cadastro. Ela não pede nenhuma permissão assustadora na instalação e só toca na página depois que você clica no ícone. Os hábitos antigos são mais lentos e menos exatos: encostar uma régua de plástico no vidro do monitor ou contar pixels numa captura de tela. Uma régua para trabalhar na tela do computador precisa morar dentro do navegador, se redesenhar quando o layout recalcula e falar as mesmas unidades do código. É isso que esta sobreposição faz, e é por isso que uma régua de pixels para sites ganha de uma régua desenhada por cima de um print colado num editor gráfico. A ficha está disponível em 52 idiomas, então uma régua de pixels para web está a uma busca de distância também em português. Instale, meça os pixels na próxima página que abrir e deixe a régua de tela a um clique pelo resto do dia.