Os estilos que importam
Sem regras riscadas: fonte, tamanho, peso, entrelinha, cor, fundo, bordas, raio e sombra.
Inspeção de design
Inspetor CSS: passe o cursor e veja como a página foi feita
O inspetor CSS do Smart Design Inspector mostra os estilos calculados, a caixa, as margens, os paddings e as distâncias de qualquer elemento ao passar o cursor, sem abrir as ferramentas de desenvolvimento.
Inspecionar, medir distâncias e a régua: grátis para sempre
h1 · yourclient.example
- Fonte
- Inter
- Tamanho
- 48 px
- Peso
- 600
- Entrelinha
- 1,1
- Cor
- #0B0B0B
- Fundo
- transparente
- Bordas
- —
- Raio
- 0
- Sombra
- —
Copiar CSS
margin024
border0
padding0
560 × 106
| Ao botão | 24 px |
| Ao parágrafo | 16 px |
| À margem esquerda | 64 px |
01
As DevTools não foram pensadas para design
O problemaNas DevTools, para saber o tamanho de letra de um título é preciso abrir o painel, procurar o elemento na árvore e percorrer uma lista de regras riscadas. Para saber a distância entre dois blocos, é preciso somar margens à mão.
02
O que se vê ao passar o cursor
4 coisasCaixa
Largura, altura, margens e paddings desenhados sobre o elemento.
Distâncias
Fixe um elemento com um clique e passe o cursor sobre outro: vê os pixels entre os dois.
Régua
Mantenha pressionada a tecla Alt e meça qualquer zona da página.
03
Experimente nesta página
Sem instalarUm site de exemplo e o painel do inspetor, sem instalar nada. Passe o cursor sobre um elemento, ou escolha-o na lista, e veja os estilos, a caixa e a distância ao elemento de baixo.
Escolha um elemento
Smart Design Inspector · CSSh1.hero-title
- Fonte
- —
- Tamanho
- —
- Peso
- —
- Entrelinha
- —
- Cor
- —
- Fundo
- —
- Bordas
- —
- Raio
- —
- Sombra
- —
- Caixa
- —
- Margem
- —
- Padding
- —
Distância ao elemento abaixo
—
Site de exemplo · os valores são lidos desta página
| Grátis0 €para sempre | Pro49 €pagamento único | |
|---|---|---|
| Inspecionar ao passar o cursor: CSS calculado, caixa, margens e paddings | ||
| Copiar o CSS de cada elemento | ||
| Medir distâncias entre elementos e régua | ||
| Copiar um bloco como JSX + Tailwind ou HTML/CSS | — | Acesso antecipado grátis |
| Exportar o sistema de design | — | Acesso antecipado grátis |
É grátis?
Sim. Inspecionar, medir distâncias e a régua são grátis para sempre.
Em que se diferencia das DevTools?
Mostra só os estilos que se aplicam, sem regras riscadas, e desenha medidas e distâncias sobre a página. As DevTools continuam melhores para depurar JavaScript ou a rede.
Funciona em qualquer site?
Em qualquer página que abra no Chrome. As páginas internas do navegador e a própria Chrome Web Store não deixam que as extensões as leiam.
Posso copiar o CSS?
Sim, o de cada elemento. Para copiar um bloco inteiro como JSX + Tailwind ou HTML/CSS existe a função Pro.
Em que navegadores e sistemas funciona?
No Chrome, Edge, Brave, Arc, Opera e Vivaldi, em Windows, Mac e Linux, desde a 1.0. Funciona da mesma forma em todos porque quem executa a extensão é o navegador, não o sistema. O código está preparado para chegar ao Firefox e ao Safari sem ser reescrito. Enquanto está em desenvolvimento, pode haver alterações.
Lista de espera
Seja dos primeiros a experimentar
O Smart Design Inspector está em desenvolvimento. Deixe o seu email e avisamos no dia em que chegar à Chrome Web Store, com as 7 funções Pro grátis em acesso antecipado.
Um email no dia do lançamento e poucos mais · Cancele com um clique