Usar chrome como servidor web local, tutorial para usar o navegador chrome como servidor html local no windows.

Aprenda usar o chrome como live code para html usando um domínio real, que faz apenas alterações locais.

Desenvolva diretamente em seu domínio com usando essa ferramenta do chrome e acabe com problemas ao usar domínios de teste.

Habilitar chrome webserver

Crie uma pasta de desenvolvimento em qualquer lugar no windows criei a pasta C:devlocal

Para pastas criadas em C: é preciso remover o atributo “Somente leitura” para que o webserver funcione corretamente.

remover somente leitura pasta windows

Dentro dessa pasta vão ficar todos os projetos em desenvolvimento, criei o projeto local.dev, domínios .dev no chrome são https.

pasta devlocal chrome webserver

Agora criei o arquivo index.html e main.css dentro da pasta local.dev para iniciar um projeto de exemplo.

Se quiser copiar esse exemplo acesse o código em: https://jsfiddle.net/supertutorial/frb5wcz0/

Agora abra o chrome e aperte o atalho de desenvolvedor que é o F12.

chrome local webserver

Na tela do desenvolvedor, selecione a aba Sources e depois selecione a sub aba Overrides.

Em select folder for overrides, selecione a pasta C:devlocal (ou sua pasta criada para os projetos) e permita o acesso.

permitir acesso pasta chrome

Pronto agora acesse o endereço local.dev no chrome (ou o seu endereço criado) para iniciar as edições dos arquivos.

Caso não funcione, verifique se a pasta está marcada como read only no windows e desmarque para funcionar corretamente.

exemplo desenvolvimento local chrome webserver

Realize mudanças no código HTML, CSS e JS e pressione Crtl + S para salvar e depois pressione F5 para atualizar a página.

Mas, porque não desenvolver apenas abrindo o arquivo diretamente em: file:///C:/devlocal/local.dev/index.html

Existem alguns motivos, primeiro que usando o domínio .dev é possível desenvolver em HTTPS.

Segundo que você pode criar uma versão local do seu site sem instalar um servidor web e usar isso para editar HTML, CSS e JS.

Basta deixar a aba de desenvolvimento aberta e o chrome vai carregar a versão local do website.

Você pode facilmente mudar entre a versão local e real, desmarcando a opção Enable Local Override e alterar o site de forma rápida e segura.