Laboratório de Código
Playground online de HTML, CSS e JavaScript com pré-visualização ao vivo, editor com números de linha e console capturado. Teste trechos na hora e baixe o resultado como um arquivo HTML - tudo no navegador.
O que é um laboratório de código?
Um laboratório de código é uma sandbox onde você escreve HTML, CSS e JavaScript e vê imediatamente o resultado renderizado. Este adiciona um console capturado, editores com números de linha e a possibilidade de baixar seu trabalho como um único arquivo HTML.
Como funciona a pré-visualização ao vivo?
Os três painéis de código são combinados num documento HTML completo e renderizados dentro de um iframe em sandbox. Com a execução automática ativada, a pré-visualização se atualiza meio segundo após você parar de digitar; senão, clique em Executar.
O que o painel de console mostra?
Tudo que a página escreve com console.log, console.info, console.warn e console.error, além de erros de execução e promises rejeitadas sem tratamento, com números de linha. É limpo a cada execução.
Meu código é salvo se eu recarregar a página?
Sim. Um rascunho dos três painéis é guardado localmente no navegador e restaurado na próxima visita. Redefinir volta ao código de demonstração original, e limpar os dados do site apaga o rascunho.
A pré-visualização é isolada? É segura?
A pré-visualização roda num iframe em sandbox sem acesso same-origin, então scripts testados não podem ler esta página nem seus cookies. Ainda assim, teste apenas código confiável, pois ele roda no seu navegador.
Posso baixar meu experimento?
Sim. Baixar .html salva o HTML, CSS e JavaScript atuais combinados num único arquivo autocontido que você pode abrir em qualquer navegador ou compartilhar.
O que posso executar no painel de JavaScript?
JavaScript padrão de navegador: manipulação do DOM, eventos, canvas, fetch para APIs públicas (sujeitas às regras CORS deles) e qualquer biblioteca colada inline. Módulos e pacotes npm não são resolvidos.
O laboratório precisa de internet?
Apenas para carregar a própria página. Edição, pré-visualização e captura de console funcionam depois localmente, e seu código nunca é enviado a lugar algum.
Como usar Laboratório de Código
Este playground combina seu HTML, CSS e JavaScript em uma pré-visualização ao vivo isolada (sandbox), inteiramente no seu navegador, com um painel de console que captura logs e erros. Um rascunho é salvo localmente para você continuar de onde parou.
- Edite os painéis de HTML, CSS e JavaScript — cada editor tem numeração de linhas e destaque de sintaxe.
- Com a Execução automática ativada, a pré-visualização é atualizada enquanto você digita; senão, clique em Executar (ou desative a Execução automática e rode manualmente).
- Fique de olho no painel Console abaixo da pré-visualização: saídas do console.log, avisos, erros e exceções não tratadas aparecem ali com números de linha.
- Clique em Redefinir para voltar à demonstração integrada, ou Baixar .html para salvar tudo em um único arquivo autocontido.
- Use Abrir em nova janela para ver o documento atual em tamanho cheio em sua própria aba.
O console é limpo a cada execução, então use console.log à vontade ao depurar — aparecem na hora, sem precisar abrir o console real do navegador.
Ferramentas relacionadas
- Embelezador JavaScript Embelezador e formatador de código JavaScript gratuito online. Converta instantaneamente JS minificado em código limpo, legível e bem indentado com opções personalizáveis.
- Minificador JS Minifique código JavaScript instantaneamente. Remova espaços, comentários e otimize seu JS para menor tamanho e carregamento rápido.
- Testador de Regex Teste e depure expressões regulares com correspondência em tempo real e captura de grupos.
- Visualizador Markdown Editor Markdown online gratuito com pré-visualização ao vivo. Escreva, renderize e exporte Markdown com suporte GFM completo.
- Verificador de Hash Calcule e verifique hashes MD5, SHA-1, SHA-256, SHA-512 localmente
- Calculadora Chmod Calculadora chmod online gratuita para visualizar e calcular permissões de arquivo Linux com caixas de seleção. Converta instantaneamente entre notação numérica (755, 644) e simbólica (rwxr-xr-x). Suporta permissões especiais como setuid, setgid, sticky bit.
- Tabela ASCII Referência completa de codificação de caracteres ASCII com códigos decimais, hexadecimais, octais, binários, entidades HTML e descrições. Pesquisa e filtro instantâneos.
- Visualizador Hexadecimal Visualize o conteúdo de arquivos em formato hexadecimal com busca, navegação por deslocamento e rolagem virtual