JebCode Elemento

Aponte, clique e entenda o HTML, CSS e JavaScript de qualquer elemento.

JebCode Elemento é um inspetor visual e didático para aprender e ensinar desenvolvimento front-end diretamente em páginas reais. Ative a extensão, passe o mouse sobre a página e clique em um elemento para visualizar sua estrutura HTML, regras CSS e JavaScript inline detectável. O elemento selecionado recebe um destaque visual, facilitando a compreensão da relação entre o código e o resultado exibido no navegador. Principais recursos: • Destaque visual de elementos ao passar o mouse. • Seleção de alvo, elemento pai e contêiner da lista. • Visualização do HTML real com indentação e números de linha. • Exibição de regras CSS que correspondem ao elemento. • Identificação de eventos JavaScript inline detectáveis. • Visualização de estruturas CSS Grid e Flexbox. • Informações de tamanho, layout, classes e identificadores. • Exemplos de código fáceis de copiar. • Editor HTML temporário para testes. • Ações para adicionar atributos, duplicar ou remover elementos. • Painel móvel, responsivo e configurável. • Interface visual com foco em aulas e gravações de tela. A extensão foi desenvolvida especialmente para tornar o aprendizado de front-end mais visual e acessível, incluindo aulas destinadas a pessoas surdas. Como usar: 1. Clique no ícone da extensão. 2. Passe o mouse sobre uma página. 3. Clique no elemento desejado. 4. Explore as abas HTML, CSS e JavaScript. 5. Use o botão Copiar quando houver código detectável. As alterações realizadas pela ferramenta são temporárias e desaparecem ao atualizar a página. Privacidade: A inspeção acontece localmente no navegador. A extensão não possui servidor próprio e não envia o conteúdo das páginas para serviços externos. Observação: por segurança do Chrome, a extensão não funciona em páginas internas como chrome:// ou na própria Chrome Web Store.