Editar e salvar arquivos em um espaço de trabalho

Kayce Basques
Kayce Basques
X GitHub Falha
Sofia Emelianova
Sofia Emelianova
GitHub

Neste tutorial, oferecemos uma chance de praticar configurando um espaço de trabalho para que você possa usá-lo nos seus próprios projetos. Workspace permite salvar as alterações feitas no DevTools no código-fonte armazenado no seu computador.

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:

  • 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, para que o site possa ser acessado 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 mudanças de CSS feitas no DevTools são salvas no código-fonte na área de trabalho.

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 geralmente 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 de sua escolha ou se começar a usá-lo após 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 alterações de back-end ou quando quiser testar mudanças em uma página e precisar ver essas mudanças nos carregamentos de página, mas não é necessário mapear as mudanças 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 para algum diretório no seu computador. Por exemplo, para ~/Desktop.

  2. Inicie um servidor da Web local em ~/Desktop/devtools-workspace-demo. Abaixo está 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, 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. Você poderá acessar esse recurso por um URL como localhost:8000. O número da porta exato pode ser diferente.

    A página de demonstração hospedada localmente foi aberta no Chrome.

Configurar o DevTools

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

  2. Navegue até 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 Sources.
    • Clique no link selecionar pasta e escolha a pasta.
    • Clique em Adicione a solução Adicionar pasta e selecione a pasta. Em seguida, acesse a guia "Espaço de trabalho".

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

    O botão "Permitir" na solicitação.

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.

A guia "Espaço de trabalho" agora mostra um mapeamento entre os arquivos locais e os de rede.

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.

    Visualização de styles.css em um editor de texto.

  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 é definida como verde.

    Definir a propriedade de cor do elemento h1 como verde.

    O ponto 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 o simulador. 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. Depois, quando a página foi recarregada, 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

  1. Abra a guia Elementos.

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

    Tentativa de mudar o HTML da árvore DOM do painel &quot;Elements&quot;.

  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 o simulador. Atualize a página. A página volta ao título original.

Opcional: por que isso não funciona

  • A árvore de nós mostrada 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 também pode alterar o DOM com 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.

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 (í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 o simulador. Atualize a página. O elemento <h1> ainda está mostrando o novo texto.

    Como mudar o HTML no painel &quot;Sources&quot;.

  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. No entanto, às vezes você precisa acessar outros painéis, como Elementos ou Console, ao fazer mudanças no seu 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 fonte rápida. Na parte de baixo da janela do DevTools, agora há uma guia Quick Source.

    Abrindo a guia &quot;Fonte rápida&quot; pelo menu de comando.

    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.

    Abrindo o script por meio da caixa de diálogo &quot;Abrir arquivo&quot;.

  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 alteração.

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

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

Próximas etapas

É 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.

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