Testar HTML, CSS e JavaScript no navegador
O código roda enquanto você digita: HTML, CSS numa tag <style> e JavaScript numa tag <script>, como num site, com as bibliotecas que a página carrega das CDNs públicas mais usadas. Ele roda num quadro isolado, em outro endereço, então não consegue ler o solta.now, os seus cookies nem as suas contas.
Nada é enviado enquanto você testa. O código fica guardado neste navegador até você apertar Limpar, então a página que você estava testando continua aqui amanhã.
O que conferir antes de enviar uma página
- Ela fica boa no celular. Mude para Celular: a maioria dos links enviados numa conversa é aberta num celular. Procure texto que sai da tela e botões pequenos demais para apertar.
- O Console está quieto. Cada erro aparece ali com a linha dele. Aperte a linha, e o código abre nela.
- Todas as imagens e arquivos carregam. O Console mostra o nome de um arquivo que a página não conseguiu carregar. Se ele está ao lado da página no seu computador, abra a pasta inteira.
- Cada botão faz o que diz. Aperte cada um, e digite em cada campo.
- Ela imprime bem, se alguém for imprimir. Salvar como PDF mostra a página como uma impressora mostraria.
Testar uma página que o Claude ou o ChatGPT escreveu
Copie a página que a sua IA escreveu e aperte Colar. Se algo não funcionar, o Console mostra o erro e a linha: diga os dois para a sua IA e cole o que ela mandar de volta. Uma página que começa com linhas import é um componente React, que precisa ser transformado em página antes que qualquer navegador consiga mostrá-lo: por que um artefato React abre em branco. Cole o código na caixa da página inicial, e o Solta transforma em página quando publica.
Do teste ao link
Quando funcionar, Gerar link, embaixo da página, publica a página no próprio endereço, e ela abre sem conta. Para abrir um arquivo HTML que alguém te mandou, em vez de escrever um, use o visualizador HTML, que começa pela página e não pelo código.
Perguntas
Isto é um compilador de HTML?
Não exatamente: HTML não é compilado. Um navegador lê o HTML e roda os scripts dele, e este testador faz o mesmo enquanto você digita. É o que as pessoas chamam de compilador ou executor de HTML: o código roda, e você vê o resultado.
Ele confere se o meu HTML é válido?
Não. Ele roda a página como um navegador rodaria, e o Console mostra cada erro que os scripts dão, com a linha. Para conferir a marcação em si pelo padrão HTML, use o validador de marcação do W3C.
Posso testar JavaScript?
Sim. Os scripts rodam como num site. O que eles registram com console.log, e cada erro, aparece no Console embaixo da página, cada um com a linha do código de onde veio.
O meu código fica salvo?
Ele fica guardado neste navegador, então continua aqui quando você voltar, até você apertar Limpar. Nada é enviado ao Solta até você apertar Gerar link.
Posso testar uma página com o CSS e as imagens em arquivos separados?
Sim. Abrir pasta, ou abra um .zip da pasta com Abrir arquivo, e a página roda com as folhas de estilo, os scripts e as imagens dela. Você pode mudar qualquer um dos arquivos aqui.
Posso testar no celular?
Sim. No celular, Código e Página se revezam na tela. No computador, Celular mostra a página com 390 pixels de largura, mais ou menos a de um celular.
Como mostro para alguém o que eu testei?
Gerar link publica a página no próprio endereço, e ela abre sem conta. Um site publicado sem conta fica no ar por 24 horas. Para mantê-lo, entre pelo cartão que mostra o endereço.