← Voltar para Funcionalidades
Free

CSS Inspector

O CSS Inspector é uma poderosa ferramenta de desenvolvedor que permite visualizar todas as propriedades CSS de qualquer elemento apenas passando o mouse sobre ele. Clique para travar os estilos, edite-os diretamente e veja as alterações aplicadas instantaneamente na página.

Esteja você corrigindo problemas de layout ou estudando um site que você ama, o CSS Inspector fornece tudo o que você precisa em um painel flutuante limpo. Inspecione facilmente sem abrir o DevTools do navegador.

Visualização ao Vivo
example.com/landing-page CSS Inspector: ON
Hover any element to inspect its CSS
Sign Up Now
button.cta-primary
180 × 48 top: 312px · left: 40px
CSS Properties Locked
<button> .cta-primary
BOX MODEL
margin: 0
padding: 12 24
180 × 48
Typography
font-familyJost, sans-serif
font-size16px
font-weight600
color#ffffff
Layout & Spacing
displayinline-flex
padding12px 24px
border-radius8px
Appearance
background#7c3aed
cursorpointer
transitionall 0.2s ease
Copy All CSS Edit
Principais Recursos

Visualização de Propriedades em Tempo Real

Veja fontes, tamanhos, cores, espaçamento e muito mais instantaneamente ao passar o mouse sobre qualquer elemento.

Clique para Travar

Clique no elemento para bloquear o painel para que ele não desapareça, permitindo uma inspeção detalhada.

Edição de Estilo ao Vivo

Clique duas vezes nos valores para alterá-los diretamente. Suas edições são refletidas instantaneamente na página.

Cópia com um Clique

Copie propriedades individuais ou todo o bloco de estilo de design para sua área de transferência com um clique.

Visualização do Box Model

Veja visualmente os valores de margem, borda e preenchimento.

Tamanho e Posição do Elemento

Exibe a largura, altura e posição do elemento na página.

O Que Você Pode Inspecionar

O CSS Inspector mostra mais de 40 propriedades:

Tipografia

  • font-family
  • font-size
  • font-weight
  • line-height
  • letter-spacing
  • text-align
  • text-transform
  • color

Modelo de Caixa

  • width
  • height
  • padding
  • margin
  • border
  • border-radius
  • box-sizing

Layout

  • display
  • position
  • top
  • right
  • bottom
  • left
  • z-index
  • float
  • overflow

Fundo

  • background-color
  • background-image
  • background-size
  • background-position

Efeitos

  • opacity
  • box-shadow
  • text-shadow
  • transform
  • transition
  • cursor
Casos de Uso Comuns

Solução de Problemas de Layout

Inspecione elementos desalinhados com precisão.

Aprenda com Designs Existentes

Estude os estilos dos seus sites favoritos.

Experimentos Rápidos de Design

Teste alterações antes de escrever o código.

Avaliações de Clientes

Mostre alterações ao vivo durante as reuniões.

Extração de Estilo

Obtenha facilmente o código CSS para novos elementos.

Como Usar
1

Ative o CSS Inspector

Clique no ícone do CSS Inspector na barra de ferramentas do DevSuite Pro.

2

Passe o mouse para inspecionar

Mova o cursor sobre qualquer elemento para ver as propriedades.

3

Clique para travar

Clique no elemento para fixar o painel.

4

Edite Estilos

Clique duas vezes nos valores para ajustá-los.

5

Copie e Use

Copie o código atualizado e use-o em seu projeto.

Pronto para Testar? CSS Inspector?

Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.

Adicionar ao Chrome Adicionar ao Edge Adicionar ao FireFox