Como depurar HTML e JavaScript

Encontre erros de seletores, estilos e execução com um exemplo pequeno e o console.

HTML CSS JS Compiler · Metodologia · Contato

Passos

Comece pelo template inicial ou carregue um projeto de exemplo.
Edite a estrutura HTML, os estilos CSS e o comportamento JavaScript.
Pressione Executar (Ctrl/Cmd + Enter) para atualizar a pré-visualização sandbox.
Abra o painel do console para ler logs, avisos e erros.
Use os controles responsivos para verificar o layout em larguras comuns.
Formate, copie ou baixe seu trabalho como index.html.

Exemplo

HTML

<button id="demo">Hello</button>

CSS

#demo { padding: 12px; }

JavaScript

// Broken: document.getElementById("missing").textContent = "OK";
const button = document.getElementById("demo");
if (button) button.textContent = "OK";

O ID missing não existe e causa um erro. Use demo para encontrar o botão; a validação de sintaxe não identifica esse erro de execução.

Dica

A execução básica de HTML, CSS e JavaScript para a pré-visualização ocorre localmente no seu navegador.