Editar e salvar arquivos em um espaço de trabalho

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

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.

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.

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

    Botão "Permitir" no prompt.

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 de h1 é definido como fuchsia.

    Visualização de estilos.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 está definida como verde.

    Definindo a propriedade de cor do elemento h1 como verde.

    O ponto 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 o simulador. 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

  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.

    Tentativa de mudar o HTML da árvore DOM do painel Elementos.

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

    Como alterar o HTML no painel Origens.

  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.

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

    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.

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

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