Ajuda - Visualizando o resultado

Ao editar o HTML no FastHTML, é natural que você queira ir acompanhando o resultado em paralelo. O FastHTML possui duas formas de visualizar: através do Preview interno (F12), rodando dentro de uma aba no próprio FastHTML, ou o Preview externo (Shift+F12), executando em seu navegador de preferência. Para estes, o procedimento estão abaixo.

Preview interno (F12)

Edite o arquivo e simplesmente tecle F12. Isso irá salvar o arquivo (o mesmo que teclar F5) e abrir uma aba ao lado do documento com o preview. Ao retornar ao documento e editar mais, ao teclar F12, o arquivo é novamente gravado e a mesma aba é auto-atualizada com as mudanças.

Este preview inline é possível através do Microsoft Edge Webview2, que deve estar previamente instalado. Ele abre uma instância (thread) do Microsoft Edge para cada aba. Você pode fechar a aba do preview independente da aba do documento, mas ao fechar o documento, a aba do preview é fechada junto. Por ser um navegador, você poderá navegar pelas páginas, mas ao teclar F12 o documento em edição será reexibido.

Teclando com o botão direito sobre a aba de preview, há um recurso interessante: o simulador de resoluções, focado para você ver seu site em diversas resoluções de tela, em especial para testar layouts responsivos (mobile, celulares/tablets). Você possui opções para replicar uma resolução para todas as abas web previamente abertas, bem como ajustar somente a largura, usando a altura máxima de sua área de trabalho.

Este preview serve tanto para arquivos HTML simples, quanto para arquivos PHP e para URLs fornecidas quando você cria um projeto. Na prática o melhor é sempre criar um projeto, especialmente se você tem um ambiente mais elaborado, rodando um Xamp, Apache ou Nginx em sua máquina local, ou algum servidor de desenvolvimento em Linux ou IIS, um Raspberry ou uma máquina virtual, por exemplo.

O FastHTML vêm com o motor básico do PHP incluído. Se você não estiver usando um projeto (com URL), ao dar preview em um PHP, o webserver built-in do PHP será executado em localhost (porta fixa 57680) e você poderá ver a execução do código. Mas note que, naturalmente, isto somente serve para necessidades básicas. Caso precise de algo mais elaborado, use um ambiente real de desenvolvimento em PHP. Se você for mais experiente com PHP, poderá sobrepor o existente na pasta "PHP" e configurar o php.ini conforme necessário.

Limitações:
Infelizmente o navegador interno possui algumas limitações. Como ele captura o teclado, não é possível voltar para a aba do documento teclando Control+Tab, você precisa clicar com o mouse sobre a aba para voltar a editá-lo.

Windows 7 e 8:
Embora o FastHTML oficialmente seja suportado a partir do Windows 10, na prática ele funciona no Windows 7 e 8, mas o Microsoft Edge Webview2 não parece funcionar muito bem neles. Por isso, sugerimos, para estes Windows, usar somente o preview externo.

Microsoft Edge Webview2:
Se você usa Windows 10 ou superior e possui o Microsoft Edge instalado, bem provável que já tenha ele instalado. Caso não, será mostrada uma mensagem de erro, ou a aba simplesmente aparecerá vazia. Sugerimos instalar o FastHTML pelo instalador padrão, pois ele baixará e instalará o recurso diretamente do endereço oficial da Microsoft. Se você optou pela versão Portable, terá que instalar manualmente.

Preview externo (Shift+F12)

O preview externo apenas deve ser executado uma vez. Na prática ele abre o navegador padrão do Windows com o arquivo em edição, ou o URL definido no projeto aberto. Neste formato o procedimento que você fará é: editar o arquivo no FastHTML, teclar F5 para salvar, usar Alt+Tab para alternar para a janela do navegador e teclar F5 para atualizar. Como a tecla de salvar e atualizar são propositalmente as mesmas (F5), se você deixar as duas janelas em linha no Windows, basicamente é só teclar F5, Alt+Tab, F5.

Navegador padrão:
O FastHTML executa o navegador padrão setado no Registro do Windows. Porém, o que podemos observar que o Windows sempre define o navegador padrão como o Microsoft Edge, mesmo que você tenha definido outro como Chrome ou Firefox! Se isso ocorrer com você, infelizmente o jeito é não usar o Shift+F12. Abra seu navegor preferido manualmente e insira o caminho ou URL de preview...

:: Menu principal