este artigo popular foi actualizado em 2020. Para mais informações sobre a melhoria do seu fluxo de trabalho de desenvolvimento com ferramentas, leia o essencial do programador: ferramentas no Prémio SitePoint.
Um dia típico de um desenvolvedor web envolve a criação de páginas web HTML com CSS associado e JavaScript em seu editor favorito. O fluxo de trabalho:
- abre a página hospedada localmente num navegador.Jura.
- Open DevTools to investigate the layout and functionality problems.,
- ajustar os elementos HTML, propriedades CSS, e código JavaScript para corrigir os problemas.
- Copie essas alterações de volta para o editor e retorne ao passo #1.
enquanto ferramentas como a recarga ao vivo tornaram este processo mais fácil, muitos desenvolvedores continuam a ajustar o código em ambos DevTools e seu editor.
no entanto, é possível abrir e editar arquivos de código diretamente no Chrome. Todas as alterações que fizer são gravadas no sistema de arquivos e atualizadas dentro do editor (presumindo que ele refresque quando as alterações de arquivos ocorrem).,
Passo 1: lançar as ferramentas de desenvolvimento
abrir o Chrome, carregar uma página do seu sistema/servidor de ficheiros local e abrir as ferramentas de desenvolvimento do menu Mais ferramentas ou carregar em F12 ou em Ctrl/Cmd + Shift + I, dependendo do seu sistema. Navegue para a página de fontes para examinar o ficheiro explorer:
pode abrir e editar os ficheiros CSS e JavaScript nesta janela, mas quaisquer alterações serão perdidas assim que actualizar a página.
Passo 2: associar uma pasta com a área de trabalho
carregue na página do sistema de ficheiros e depois carregue em + Adicionar uma pasta à área de trabalho., Ser-lhe-á solicitado que localize a sua pasta de trabalho e o Chrome pedir-lhe-á para confirmar que permite o acesso. O explorer mostra arquivos no seu sistema que podem ser abertos com um único clique:
Passo 3: edite e salve o seu código
você pode agora saltar e editar o seu código. As edições não gravadas estão marcadas com um asterisco na página ficheiro.
CSS alterações são instantaneamente atualizadas mas, no caso de HTML e JavaScript, você terá normalmente de carregar em Ctrl / Cmd + s para gravar o ficheiro no sistema de ficheiros e depois actualizar o navegador.,
Note que também pode carregar com o botão direito na página do ficheiro e seleccionar gravar como… para gravar uma cópia do ficheiro noutro sítio.
Passo 4: rever e desfazer as alterações
para rever as alterações, carregue com o botão direito numa página de ficheiro e escolha as modificações locais… no menu de contexto:
é mostrada uma vista Tipo diff. O ícone da seta na parte inferior-esquerda da área irá desfazer todas as alterações e reverter o ficheiro para o seu estado original.,as ferramentas de desenvolvimento do Chrome nunca serão uma substituição completa para o seu editor favorito, mas pode ser útil quando estiver a fazer alterações rápidas ou a trabalhar noutro PC onde o seu editor não possa ser instalado.