GrátisExtensão para Chrome e Firefox
Copie HTML e CSS de qualquer elemento
O HTML/CSS Extractor adiciona um painel à aba Elementos do DevTools. Selecione um elemento e ele mostra o HTML do elemento e as regras CSS que o estilizam, prontos para editar, visualizar e copiar.
Capturas de tela
Como funciona
Abra o DevTools em qualquer site: pressione F12, ou Cmd+Option+I no Mac.
Selecione um elemento na aba Elementos (o Inspetor no Firefox), ou clique nele com o botão direito na página e escolha Inspecionar.
Abra a aba HTML/CSS Extractor na barra lateral do painel, ao lado de Computado.
Confira a pré-visualização ao vivo, edite o código se quiser e clique em “Copy CSS” ou “Copy HTML”.
O que faz
As regras que valem
As regras CSS das folhas de estilo da página que se aplicam ao elemento e a tudo dentro dele, incluindo regras :hover, ::before e ::after, e media queries na ordem original.
Seletores mais curtos
Seletores longos são reduzidos à forma mais curta que ainda funciona, com um comentário que mostra o seletor original e a especificidade dele.
Pré-visualização ao vivo
Veja o código extraído renderizado na largura de celular (375 px), tablet (768 px) ou desktop (1240 px). Os links na pré-visualização não navegam.
Edite e copie
CSS e HTML abrem em editores separados com realce de sintaxe, números de linha e recolhimento de código. Copie qualquer um com um clique.
URLs completas
Endereços relativos de imagens, fontes e links viram URLs completas, para o código continuar funcionando quando você colar em outro lugar.
Fontes e variáveis
Inclua, se quiser, as regras @font-face da página, e marque as variáveis CSS que o código extraído nunca usa.
Estilos herdados
Adicione, se quiser, os estilos de texto que o elemento herda dos pais, como fonte e cor, em um elemento que envolve o HTML.
Segue a sua seleção
O painel se atualiza sempre que você seleciona outro elemento. Seis chaves controlam o que entra, e suas escolhas ficam salvas.
Feito para ser privado
- Sem conta e sem cadastro.
- Funciona só dentro do DevTools, no elemento que você seleciona.
- Suas configurações ficam salvas só no seu navegador. O código que você extrai não é salvo.
- Sem analytics, sem rastreamento e sem anúncios. Nada do que você extrai é enviado.
Tudo incluído
- HTML e CSS de qualquer elemento
- Simplificação de seletores
- Pré-visualização ao vivo em três larguras de tela
- Editores de código com cópia em um clique
- Seis opções de extração, lembradas entre sessões