Screen Ruler

O que é o Screen Ruler?

Screen Ruler é uma extensão Chrome para inspecionar e medir páginas web. Ajuda designers e developers a verificar dimensões de elementos, espaçamentos, seletores, CSS calculado, cores, capturas de ecrã, problemas de contraste de acessibilidade e metadados relacionados com SEO diretamente no navegador.

A extensão pode ser ativada pelo ícone na barra de ferramentas, pelo menu de contexto com botão direito ou por um atalho de teclado. Quando ativa, sobrepõe ferramentas de inspeção na página para que os utilizadores possam passar o rato ou clicar em elementos para inspecionar a disposição e os metadados da página sem sair do site.

Funcionalidades principais

• Medir tamanho e espaçamento de elementos: ver dimensões em pixels, margens, paddings e distâncias entre elementos.
• Inspecionar a identidade do elemento: revelar nomes de tags, IDs e nomes de classes ao passar o rato ou ao selecionar.
• Ver CSS calculado e copiá-lo: inspecionar os estilos calculados do elemento atual no painel lateral e copiar o CSS para a área de transferência.
• Usar réguas e um seletor de cores: colocar guias horizontais e verticais para medição precisa e amostrar cores em qualquer parte da página.
• Capturar conteúdo selecionado: tirar capturas de ecrã recortadas de elementos escolhidos com um atalho de teclado.
• Rever sinais de qualidade da página: detetar problemas de contraste WCAG, problemas SEO comuns, meta tags e dados de pré-visualização social para Facebook, X e LinkedIn.

Como usar o Screen Ruler

Depois de instalar a extensão, ative-a pelo ícone da barra de ferramentas, pelo menu de contexto ou pelo atalho Alt/Option + Shift + R. Passe o rato sobre os elementos para inspecionar o tamanho e os metadados, ou clique num elemento para o selecionar e compará-lo com conteúdo próximo.

No painel lateral, pode ver o CSS calculado e copiá-lo, usar atalhos de seleção de pai/filho, inspecionar réguas e cores, e aceder a ferramentas para capturas de ecrã, meta tags e análise da página. A extensão também suporta atalhos personalizados através das definições de extensões do Chrome.

Casos de uso

• Verificar espaçamento e alinhamento numa landing page ou mockup de interface antes de entregar o trabalho à engenharia.
• Identificar a classe CSS exata, o ID e os estilos calculados de um elemento durante a depuração frontend.
• Amostrar uma cor de uma referência de design ou de uma página em direto para corresponder a um sistema visual.
• Capturar uma captura de ecrã recortada de um único componente para documentação ou relatórios de bugs.
• Rever uma página para metadados SEO em falta, vários H1 ou problemas de contraste antes de publicar.

FAQ

O Screen Ruler funciona em qualquer website? A listagem diz que funciona em qualquer página web.

Como é ativada a extensão? Pode ser aberta a partir do ícone da extensão, do menu de contexto com botão direito ou do atalho de teclado Alt/Option + Shift + R.

Posso copiar o CSS de um elemento? Sim. O painel lateral inclui uma vista de CSS calculado e um botão “Copiar CSS”.

Inclui ferramentas mais avançadas para além da inspeção? Sim. A listagem também menciona capturas de ecrã, escolha de cores, verificações de acessibilidade, análise SEO e inspeção de pré-visualização social. Algumas capacidades adicionais fazem parte do nível PRO.

Alternativas

• Ferramentas de programador do navegador: úteis para inspeção e depuração diretas, especialmente quando se trabalha nos painéis integrados do Chrome em vez de uma extensão sobreposta.
• Outras extensões de inspeção do navegador: ferramentas semelhantes podem focar-se mais em medições, réguas, inspeção de CSS ou escolha de cores.
• Ferramentas de handoff de design e QA: são mais adequadas quando as equipas precisam de fluxos de revisão visual mais amplos em vez de inspeção de elementos no navegador.
• Ferramentas de auditoria de acessibilidade e SEO: podem fornecer relatórios de problemas mais profundos se o objetivo principal for fluxos de auditoria e não a inspeção em tempo real da página.