Testar HTML, CSS e JavaScript no browser
O código corre à medida que escreve: HTML, CSS numa tag <style> e JavaScript numa tag <script>, como num site, com as bibliotecas que a página carrega das CDN públicas habituais. Corre numa moldura isolada, noutro endereço, por isso não consegue ler o solta.now, os seus cookies nem as suas contas.
Nada é enviado enquanto testa. O código fica guardado neste browser até carregar em Limpar, por isso a página que estava a testar continua aqui amanhã.
O que verificar antes de enviar uma página
- Lê-se bem no telemóvel. Carregue em Telemóvel: a maior parte dos links enviados numa conversa abre-se num telemóvel. Procure texto que sai do ecrã e botões demasiado pequenos para carregar.
- A Consola está calada. Cada erro aparece lá com a sua linha. Carregue na linha, e o código abre nela.
- Todas as imagens e ficheiros carregam. A Consola indica um ficheiro que a página não conseguiu carregar. Se está ao lado da página no seu computador, abra a pasta inteira.
- Cada botão faz o que diz. Carregue em cada um, e escreva em cada campo.
- Imprime-se bem, se for para imprimir. Guardar como PDF mostra a página como uma impressora a mostraria.
Testar uma página que o Claude ou o ChatGPT escreveu
Copie a página que a sua IA escreveu e carregue em Colar. Se algo não funcionar, a Consola indica o erro e a linha: diga os dois à sua IA e cole o que ela devolver. Uma página que começa com linhas import é um componente React, que tem de ser transformado numa página antes de qualquer browser o conseguir mostrar: porque é que um artefacto React abre em branco. Cole-o na caixa da página inicial, e o Solta transforma-o numa página ao publicá-lo.
Do teste ao link
Quando funcionar, Criar link, por baixo da página, publica-a no seu próprio endereço, e abre-se sem conta. Para abrir um ficheiro HTML que alguém lhe enviou, 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: o HTML não é compilado. Um browser lê-o e corre os seus scripts, e este testador faz o mesmo à medida que escreve. É o que se chama um compilador ou um executor de HTML: o código corre, e vê o resultado.
Verifica se o meu HTML é válido?
Não. Corre a página como um browser a correria, e a Consola mostra cada erro que os scripts dão, com a linha. Para verificar a marcação em si face à norma do HTML, use o validador de marcação do W3C.
Posso testar JavaScript?
Sim. Os scripts correm como num site. O que registam com console.log, e cada erro, aparece na Consola por baixo da página, cada um com a linha de código de onde veio.
O meu código fica guardado?
Fica guardado neste browser, por isso continua aqui quando voltar, até carregar em «Limpar». Nada é enviado ao Solta até carregar em «Criar link».
Posso testar uma página com o CSS e as imagens em ficheiros separados?
Sim. «Abrir pasta», ou abra um .zip da pasta com «Abrir ficheiro», e a página corre com as suas folhas de estilos, scripts e imagens. Pode alterar aqui qualquer um dos ficheiros.
Posso testar no telemóvel?
Sim. No telemóvel, «Código» e «Página» alternam no ecrã. No computador, «Telemóvel» mostra a página com 390 píxeis de largura, mais ou menos a de um telemóvel.
Como mostro a alguém o que testei?
«Criar link» publica-a no seu próprio endereço, e abre-se sem conta. Um site publicado sem conta fica online durante 24 horas. Para o manter, inicie sessão a partir do cartão que mostra o endereço.