Editar e salvar arquivos em um espaço de trabalho

Kayce Basques

Sofia Emelianova

Este tutorial oferece a oportunidade de praticar a configuração de um espaço de trabalho para que você possa usá-lo nos seus próprios projetos. O espaço de trabalho permite salvar as alterações feitas no DevTools no código-fonte armazenado no 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.
• Executar um servidor da Web HTTP local.

Visão geral

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

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

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

Limitações

Se você estiver usando um framework moderno, ele provavelmente vai transformar seu código-fonte de um formato fácil de manter em um formato otimizado para execução o mais rápido possível. O Workspace normalmente consegue mapear o código otimizado de volta ao código-fonte original com a ajuda de mapas de origem.

A comunidade do DevTools trabalha para oferecer suporte aos recursos fornecidos pelos mapas de origem em vários frameworks e ferramentas. Se você tiver problemas ao usar um espaço de trabalho com o framework escolhido ou se ele funcionar após 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 solicitar cabeçalhos sem esperar por mudanças no back-end ou quando você quiser experimentar mudanças em uma página e precisar que elas sejam mostradas em todos os carregamentos da página, mas não se preocupe em mapear suas mudanças para o 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 para algum diretório no seu computador. Por exemplo, para ~/Desktop.

2. Inicie um servidor da Web local em ~/Desktop/devtools-workspace-demo. Confira abaixo um exemplo de código para iniciar SimpleHTTPServer, mas você pode 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, este diretório será chamado de /devtools-workspace-demo.

3. Abra uma guia no Google Chrome e acesse a versão hospedada localmente do site. Você poderá acessar esse recurso por um URL como localhost:8000. O número de 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. Isso pode ser feito de várias maneiras:

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

3. Na solicitação na parte de cima, clique em Permitir para dar permissão ao DevTools para ler e gravar no diretório.

   

Na guia Espaço de trabalho, 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 está definida 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 Styles, encontre a regra CSS h1 { color: fuchsia } e mude a cor para a sua favorita. Neste exemplo, a cor é 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 como sua cor favorita.

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

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

Tente mudar o HTML no painel "Elementos"

Aviso:o fluxo de trabalho que você está prestes a tentar não funciona. Você está tentando agora para que não gaste tempo depois tentando descobrir por que 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 por 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 mudar o HTML no painel "Elements" não funciona. Você pode pular esta seção se não se importar com o motivo.

• A árvore de nós mostrada no painel Elements representa o DOM da página.
• Para mostrar uma página, um navegador busca HTML pela rede, analisa o HTML e o converte em uma árvore de nós DOM.
• Se a página tiver JavaScript, ele poderá adicionar, excluir ou alterar nós do DOM. O CSS também pode mudar o DOM usando a propriedade content.
• O navegador usa o DOM para determinar qual conteúdo apresentar aos usuários.
• Portanto, o estado final da página que os usuários veem pode ser muito diferente do HTML que o navegador buscou.
• Isso dificulta a resolução do DevTools para determinar onde uma mudança feita no painel Elements precisa ser salva, porque o DOM é afetado por HTML, JavaScript e CSS.

Em resumo, a árvore do DOM !== HTML.

Alterar o HTML no painel "Origens"

Se você quiser salvar uma mudança no HTML da página, faça isso no painel Sources.

1. Navegue até Origens > Página.
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 mudança.

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

   

6. Abra /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 Sources também é o lugar para fazer mudanças no JavaScript. No entanto, às vezes, é necessário acessar outros painéis, como o Elements ou o Console, ao fazer mudanças no site. Há uma maneira de abrir o painel Origens com outros painéis.

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

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

   

   A guia está mostrando o conteúdo de index.html, que é o último arquivo editado no painel Sources. A guia Origem rápida oferece o editor do painel Origens, 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 Open File.

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 tem um estilo regular.

7. Adicione o seguinte código à parte de baixo de script.js na guia Origem rápida.

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

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

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

Próximas etapas

Sucesso:parabéns! Agora você sabe como salvar nas origens as mudanças feitas no DevTools no 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 > Espaço de trabalho.

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