Editar e salvar arquivos em um espaço de trabalho

Kayce Basques

Sofia Emelianova

Neste tutorial, você praticou a configuração de um espaço de trabalho pode usá-lo em seus próprios projetos. O Workspace permite salvar as alterações feitas DevTools para o código-fonte armazenado no seu computador.

Atenção:antes de iniciar este tutorial, você precisa saber como:

• Use HTML, CSS e JavaScript para criar uma página da Web.
• Use o DevTools para fazer mudanças básicas no CSS.
• Execute um servidor da Web HTTP local.

Visão geral

O Workspace permite salvar uma alteração feita no DevTools em uma cópia local do mesmo arquivo no seu computador. Por exemplo, suponha que:

• O código-fonte do site está no computador.
• Você está executando um servidor da Web local no diretório do código-fonte, para que o site possa ser acessado às localhost:8080.
• Você tem localhost:8080 aberto no Google Chrome e está usando DevTools para mudar a CSS.

Com o Workspace ativado, as mudanças de CSS feitas no DevTools são salvas no código-fonte no seu computador.

Limitações

Se você usar um framework moderno, ele provavelmente transforma seu código-fonte em um formato que é em um formato otimizado para funcionar o mais rápido possível. O espaço de trabalho é geralmente conseguem mapear o código otimizado de volta ao código-fonte original com a ajuda de fontes Maps.

A comunidade do DevTools trabalha para oferecer suporte aos recursos fornecidos pelos mapas de origem em diversos frameworks e ferramentas. Se você tiver problemas ao usar um espaço de trabalho com o framework de sua escolha ou se ele funcionar Após definir uma configuração personalizada, inicie uma conversa na lista de e-mails ou faça uma pergunta no Stack Overflow para compartilhar seu conhecimento com o restante da comunidade do DevTools.

Recurso relacionado: substituições locais

As substituições locais (link em inglês) são outro recurso do DevTools semelhante ao espaço de trabalho. Use substituições locais para simular conteúdo da Web ou cabeçalhos de solicitação sem esperar por mudanças no back-end ou quando você quer testar alterações em uma página e precisa visualizá-las seja carregado, mas não será necessário mapear as alterações no código-fonte da página.

Etapa 1: configuração

Conclua este tutorial para ter uma experiência prática com um espaço de trabalho.

Configurar a demonstração

1. Clone este repositório de demonstração em um diretório do seu computador. Por exemplo, para ~/Desktop.

2. Inicie um servidor da Web local em ~/Desktop/devtools-workspace-demo. Abaixo estão alguns exemplos de código para inicialização SimpleHTTPServer, mas é possível usar o servidor que preferir.

   cd ~/Desktop/devtools-workspace-demo
   # If your Python version is 3.X
   # On Windows, try "python -m http.server" or "py -3 -m http.server"
   python3 -m http.server
   # If your Python version is 2.X
   python -m SimpleHTTPServer
   

   No restante deste tutorial, esse diretório será chamado de /devtools-workspace-demo.

3. Abra uma guia no Google Chrome e acesse a versão hospedada localmente. Você vai conseguir acessá-lo por um URL como localhost:8000. O número da porta exato pode ser diferente.

   

Configurar o DevTools

1. Abra o DevTools na página de demonstração hospedada localmente.

2. Navegue até Origens > Workspace e configure um espaço de trabalho na pasta devtools-workspace-demo que você clonou. É possível fazer isso de várias maneiras:

   • Arraste e solte a pasta no Editor em Sources.
   • Clique no link selecionar pasta e selecione a pasta.
   • Clique em Adicionar pasta e selecione a pasta.

3. No prompt na parte de cima, clique em Permitir para que o DevTools possa ler e gravar no diretório.

   

Na guia Espaço de trabalho, agora há um ponto verde ao lado de index.html, script.js e styles.css. Esses pontos verdes significam que o DevTools estabeleceu um mapeamento entre os recursos de rede da página e os arquivos em devtools-workspace-demo.

Etapa 2: salvar uma alteração de CSS no disco

1. Abra /devtools-workspace-demo/styles.css em um editor de texto. Observe como a propriedade color de h1 é definido como fuchsia.

   

2. Feche o editor de texto.

3. No DevTools, clique na guia Elements.

4. Mude o valor da propriedade color do elemento <h1> para sua cor favorita. Para fazer isso, siga estas etapas:

   1. Clique no elemento <h1> na Árvore DOM.
   2. No painel Estilos, encontre a regra de CSS h1 { color: fuchsia } e mude a cor para sua cor favorita. Neste exemplo, a cor está definida como verde.

   

   O ponto verde ao lado de styles.css:1 no painel Estilos significa que qualquer mudança feita é mapeada para /devtools-workspace-demo/styles.css.

5. Abra /devtools-workspace-demo/styles.css em um editor de texto novamente. A propriedade color agora está definida como sua cor favorita.

6. Atualize a página. A cor do elemento <h1> ainda estará definida como sua cor favorita. Isso funciona porque quando você fez a mudança e o DevTools a salvou no disco. Depois, ao recarregar a página, o servidor local veiculou a cópia modificada do arquivo do disco.

Etapa 3: salvar uma alteração do HTML no disco

Tente alterar o HTML no painel Elementos

Aviso:o fluxo de trabalho que você está prestes a testar não funciona. Você está tentando não perca tempo tentando descobrir por que não está funcionando.

1. Abra a guia Elements.

2. Clique duas vezes no conteúdo de texto do elemento h1, que tem o texto Workspaces Demo, e o substitua. com I ❤️ Cake.

   

3. Abra /devtools-workspace-demo/index.html em um editor de texto. A mudança que você acabou de fazer não está lá.

4. Atualize a página. A página volta ao título original.

Opcional: por que isso não funciona

Observação:esta seção descreve por que o fluxo de trabalho de Tente alterar o HTML no painel Elementos não funciona. Se você não se importar, pule esta seção.

• A árvore de nós que aparece no painel Elements representa o DOM da página.
• Para exibir uma página, o navegador busca o HTML na rede, analisa o HTML e o converte em uma árvore de nós do DOM.
• Se a página tiver JavaScript, esse JavaScript poderá adicionar, excluir ou alterar nós do DOM. O CSS pode altere o DOM também com a propriedade content.
• O navegador eventualmente usa o DOM para determinar qual conteúdo deve ser apresentado aos usuários do navegador.
• Portanto, o estado final da página que os usuários veem pode ser muito diferente do HTML que o navegador buscado.
• Isso dificulta para o DevTools resolver onde uma mudança foi feita no painel Elements. deve ser salvo, pois o DOM é afetado por HTML, JavaScript e CSS.

Resumindo, o HTML !== da Árvore DOM.

Alterar HTML no painel Origens

Se você quiser salvar uma alteração no HTML da página, faça isso no painel Origens.

1. Navegue até Origens > Página.
2. Clique em (index). O HTML da página é aberto.
3. Substitua <h1>Workspaces Demo</h1> por <h1>I ❤️ Cake</h1>.
4. Pressione Command + S (Mac) ou Control + S (Windows, Linux, ChromeOS) para salvar a alteração.

5. Atualize a página. O elemento <h1> ainda está mostrando o novo texto.

   

6. Abra /devtools-workspace-demo/index.html. O elemento <h1> contém o novo texto.

Etapa 4: salvar uma alteração do JavaScript no disco

O painel Origens também é onde você faz mudanças no JavaScript. Mas às vezes você precisa acessar outros painéis, como Elements ou Elements, ao fazer alterações para seu site. Há uma maneira de abrir o painel Fontes ao lado de outros.

1. Abra a guia Elements.
2. Pressione Command+Shift+P (Mac) ou Control+Shift+P (Windows, Linux, ChromeOS). Menu de comando abre.

3. Digite QS e selecione Mostrar fonte rápida. Na parte inferior da janela do DevTools, acesse a guia Origem rápida.

   

   A guia está mostrando o conteúdo de index.html, que é a última que você editou no painel Origens. A guia Quick Source fornece o editor do Sources, para que você possa editar arquivos enquanto tem outros painéis abertos.

4. Pressione Command + P (Mac) ou Control + P (Windows, Linux, ChromeOS) para abrir a caixa de diálogo Abrir arquivo.

5. Digite script e selecione devtools-workspace-demo/script.js.

   

6. Observe o link Edit and save files in a workspace na demonstração. É estilizado regularmente.

7. Adicione o seguinte código ao final do script.js na guia Fonte rápida.

   document.querySelector('a').style = 'font-style:italic';
   

8. Pressione Command + S (Mac) ou Control + S (Windows, Linux, ChromeOS) para salvar a alteração.

9. Atualize a página. O link na página agora está em itálico.

Próximas etapas

Sucesso: parabéns! Agora você já sabe como salvar em fontes as alterações feitas no DevTools para seu site hospedado localmente.

É possível configurar várias pastas em um espaço de trabalho. Todas essas pastas estão listadas em Configurações > Workspace.

A seguir, aprenda a usar o DevTools para mudar o CSS e depurar o JavaScript.