Pular para o conteúdo

Meça, inspecione e anote
qualquer interface ao vivo.

Direto na página, sem sair do navegador.

Em breve na Chrome Web Store

v0.1.0Licença MITRoda só no seu navegador

A Régua sobre uma landing page: o parágrafo selecionado em azul, com as distâncias até as bordas e até o botão abaixo dele.
Meça. Segure Alt e veja a distância até cada vizinho.
O cartão de inspeção da Régua mostrando família, tamanho, peso, entrelinha e tracking do título da página.
Inspecione. Fonte, tamanho, peso e entrelinha de qualquer texto.
Réguas de pixel nas bordas, um grid de doze colunas e duas guias sobre um painel de receita.
Alinhe. Réguas, guias e um grid de colunas por cima da página.
Um valor circulado à caneta, uma seta com uma nota e um comentário com resposta preso a uma linha da tabela.
Anote. Setas, traços e comentários presos ao elemento.
O editor de gravação da Régua com a linha do tempo recortada e o menu de exportação em WebM, GIF ou MP4.
Grave. Recorte um trecho da aba e exporte em MP4, GIF ou WebM.

Revise o que de fato foi pro ar

O mockup mostra a intenção, a página publicada mostra o resultado. A Régua lê os valores reais do CSS e mede direto na tela, para conferir espaço, tipografia e alinhamento sem adivinhar.

Inspeção

Clique num elemento e leia tamanho, padding e tipografia. Um clique copia o valor.

Medidas

Segure Alt para ver as distâncias até os vizinhos e até o contêiner.

Guias de layout

Colunas, linhas ou grid por cima da página, com contagem, gutter e cor.

Mostre em vez de descrever

Um comentário preso ao elemento diz mais que três parágrafos no chat. Aponte, risque e capture, e mande para o time ou para o seu agente de código com o contexto certo.

Comentários

Presos a elementos reais, com respostas e status de resolvido.

Anotações

Setas, caneta livre e notas de texto direto na página.

Captura para colar

Selecione uma região e ela vai direto para a área de transferência.

Pacote npmnpm i regua

A Régua no seu projeto

Instale o pacote e deixe a toolbar à mão de todo mundo que roda o app em desenvolvimento. React, Next.js, Vue, Angular, Svelte ou HTML.

Extensão do Chrome

A Régua em qualquer site

Ligue a toolbar em qualquer página aberta no Chrome com um clique no ícone, sem tocar no código.

Em breve na Chrome Web Store

Nada sai do seu navegador

A Régua não tem servidor. O que você mede, desenha, captura e comenta fica no seu dispositivo, e nada acontece sem você pedir.

  • Sem servidor

    A Régua não faz requisições de rede. Não manda nada para nós nem para ninguém.

  • Sem conta

    Nada de cadastro, login ou chave de API. Instalou, está usando.

  • Sem analytics

    Nenhum rastreamento, nenhuma telemetria, nenhum cookie.

  • No seu dispositivo

    Configurações e anotações ficam no armazenamento do navegador, e você apaga quando quiser.

  • Só quando você pede

    Captura, gravação e área de transferência só entram em ação com um clique ou atalho seu.

  • Sem código remoto

    Todo o JavaScript vem no próprio pacote ou na extensão. Nenhum código de fora é baixado.

Ler a política de privacidade

Meça, inspecione e anote qualquer interface ao vivo.

Em breve na Chrome Web Store