Editar e salvar arquivos em um espaço de trabalho

Kayce Basques

Sofia Emelianova

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

Cuidado: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 mudança feita no DevTools em uma cópia local do mesmo arquivo no seu computador. Por exemplo, suponha que:

• Você tem o código-fonte do site no computador.
• Você está executando um servidor da Web local no diretório do código-fonte. Assim, o site fica acessível em localhost:8080.
• Você tem localhost:8080 aberto no Google Chrome e está usando o DevTools para alterar o CSS do site.

Com o espaço de trabalho ativado, as alterações de CSS feitas no DevTools serão salvas no código-fonte na área de trabalho.

Limitações

Se você estiver usando um framework moderno, ele provavelmente transformará o código-fonte de um formato fácil de manter em um formato otimizado para executar o mais rápido possível. O espaço de trabalho geralmente é capaz de mapear o código otimizado de volta para o código-fonte original com a ajuda de mapas-fonte.

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 preferência ou se ele funcionar depois de alguma 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 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 alterações de back-end ou para testar alterações em uma página e precisar ver essas alterações nos carregamentos da página, mas não se importa em mapear suas alterações para o código-fonte da página.

Etapa 1: configuração

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

Configure a demonstração

1. Clone este repositório de demonstração (link em inglês) em algum diretório do computador. Por exemplo, para ~/Desktop.

2. Inicie um servidor da Web local em ~/Desktop/devtools-workspace-demo. Veja abaixo um exemplo de código para iniciar 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 do site. Use um URL como localhost:8000 para acessar. 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. Acesse Origens > Espaço de trabalho 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 Allow para que o DevTools leia e grave 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 dos elementos h1 é definida como fuchsia.

   

2. Feche o editor de texto.

3. De volta ao DevTools, clique na guia Elementos.

4. Mude o valor da propriedade color do elemento <h1> para sua cor favorita. Basta seguir estas etapas:

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

   

   O ponto verde ao lado de styles.css:1 no painel Styles 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 com sua cor favorita.

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

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

Tente alterar o HTML no painel Elementos

Aviso:o fluxo de trabalho que você está prestes a tentar não funciona. Você está tentando agora para não perder tempo depois tentando descobrir por que ele não está funcionando.

1. Abra a guia Elementos.

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

   

3. Abra /devtools-workspace-demo/index.html em um editor de texto. A alteração 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. Pule esta seção se não se importar com o motivo.

• A árvore de nós no painel Elementos representa o DOM da página.
• Para exibir uma página, um navegador busca 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 DOM. O CSS também pode alterar o DOM usando a propriedade content.
• Por fim, o navegador usa o DOM para determinar qual conteúdo deve apresentar aos usuários.
• Por isso, o estado final da página que os usuários veem pode ser muito diferente do HTML buscado pelo navegador.
• Isso dificulta o processo de correção do local em que uma mudança feita no painel Elementos precisa ser salva, já que o DOM é afetado por HTML, JavaScript e CSS.

Resumindo, o HTML DOM Tree !==.

Alterar o HTML no painel "Origens"

Se você quiser salvar uma mudança no HTML da página, use o painel Origens.

1. Acesse Sources > Page.
2. Clique em (índice). 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 o /devtools-workspace-demo/index.html. O elemento <h1> contém o novo texto.

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

O painel Origens também é o local para fazer mudanças no JavaScript. No entanto, às vezes você precisa acessar outros painéis, como Elementos ou Console, enquanto faz alterações no seu site. É possível fazer com que o painel Fontes seja aberto com outros painéis.

1. Abra a guia Elementos.
2. Pressione Command + Shift + P (Mac) ou Control + Shift + P (Windows, Linux, ChromeOS). O Menu de comando será aberto.

3. Digite QS e selecione Mostrar fonte rápida. Na parte de baixo da janela do DevTools, agora há uma guia Quick Source.

   

   A guia está exibindo o conteúdo de index.html, que é o último arquivo editado no painel Sources. A guia Quick Source oferece o editor no painel Sources, para que você possa editar arquivos enquanto outros painéis estão 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. Ele é estilizado regularmente.

7. Adicione o seguinte código à parte inferior 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 está em itálico.

Próximas etapas

Sucesso:parabéns! Agora você sabe como salvar as mudanças feitas no DevTools no seu site hospedado localmente.

Você pode configurar várias pastas em um espaço de trabalho. Todas essas pastas estão listadas em Configurações > Espaço de trabalho.

Em seguida, aprenda a usar o DevTools para mudar o CSS e depurar o JavaScript.