Configurar espaços de trabalho para salvar alterações nos arquivos de origem

Kayce Basques

Sofia Emelianova

Salve as mudanças feitas no DevTools nos arquivos de origem do computador configurando um espaço de trabalho. É possível conectar automaticamente uma pasta do espaço de trabalho ao DevTools disponibilizando um arquivo de configuração ou adicionar manualmente um local do espaço de trabalho no painel Origens.

Visão geral

Uma conexão automática (ou manual) com uma pasta do espaço de trabalho permite salvar uma mudança feita no DevTools em uma cópia local do mesmo arquivo no computador. Por exemplo, suponha que:

• Você tem o código-fonte do site no seu 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:PORT e também exiba um arquivo JSON simples com metadados (descritos mais adiante).
• Você tem o site localhost:PORT aberto no Google Chrome e está usando o DevTools para mudar o CSS dele.

Com uma pasta do espaço de trabalho conectada, as mudanças feitas no painel Origens nos arquivos CSS, HTML e JavaScript são salvas no código-fonte do seu computador. No entanto, o DevTools não salva as mudanças no DOM que você faz no painel Elementos.

Além disso, o DevTools geralmente consegue mapear o código otimizado de volta para o código-fonte original com a ajuda de mapas de origem.

Gerar metadados para uma conexão

Para que o DevTools descubra sua pasta do espaço de trabalho automaticamente, gere um UUID aleatório da versão 4 e coloque-o no seguinte arquivo JSON:

{
  "workspace": {
    "uuid": "UUID",
    "root": "path/to/project/root/folder"
  }
}

Em seguida, coloque o arquivo JSON em path/to/project/root/folder/.well-known/appspecific/com.chrome.devtools.json.

Por fim, execute o servidor HTTP local e veicule o arquivo JSON também.

Se preferir, pule esta etapa e configure manualmente uma conexão de pasta.

Conectar uma pasta do espaço de trabalho

Observação: esta e as próximas etapas usam a demonstração de pastas automáticas do Workspace para mostrar o recurso.

Para conectar uma pasta:

1. No Chrome, acesse a página hospedada localmente (neste exemplo, em localhost:8000) e abra o DevTools.

2. Em Origens > Espaço de trabalho, clique em Conectar ao lado da sua pasta.

   

3. Quando solicitado, clique em Editar arquivos para permitir que o DevTools acesse sua pasta.

   

4. Depois de conectar, você pode abrir a pasta na guia Espaços de trabalho.

   

A guia Workspace mostra um ponto verde ao lado dos arquivos HTML, CSS e JavaScript. Esses pontos verdes significam que o DevTools estabeleceu um mapeamento entre os recursos de rede da página e os arquivos na pasta.

Salvar uma alteração na pasta de origem

Você pode salvar as mudanças em qualquer arquivo CSS, HTML e JavaScript na pasta do espaço de trabalho conectado.

Salvar alterações no CSS

Dica: com uma pasta de espaço de trabalho conectada, o painel Assistência de IA pode salvar automaticamente as mudanças de CSS nas suas fontes.

Para salvar as mudanças no CSS:

1. Abra um arquivo CSS da pasta do espaço de trabalho conectado em Fontes > Espaços de trabalho.

2. Faça uma mudança no CSS.

   Observação: uma mudança é aplicada à página publicada, mas ainda não à origem.

3. Salve a mudança, por exemplo, pressionando Ctrl / Cmd + S, e confira a mudança aplicada no arquivo de origem. O painel Fontes mostra um ponto verde ao lado do nome do arquivo.

   Observação: não é necessário atualizar a página para aplicar e salvar as mudanças de CSS.

Para aprender o fluxo de trabalho, assista o vídeo:

Salvar alterações no HTML

Para salvar as mudanças no HTML:

1. Abra um arquivo HTML da pasta do espaço de trabalho conectado em Fontes > Espaços de trabalho.

2. Faça uma mudança no HTML.

   Observação: uma mudança ainda não se aplica à página ativa nem à origem.

3. Salve a mudança, por exemplo, pressionando Ctrl / Cmd + S, e confira a mudança aplicada no arquivo de origem. O painel Fontes mostra um ponto verde ao lado do nome do arquivo.

4. Atualize a página para que a mudança entre em vigor.

Para aprender o fluxo de trabalho, assista o vídeo:

Observação : é possível aplicar e salvar uma mudança de HTML no painel Origens, mas não no painel Elementos.

Por que não é possível mudar o HTML no painel Elementos?

• A árvore de nós que você vê no painel Elementos representa o DOM da página.
• Para exibir uma página, um navegador busca o HTML pela rede, analisa o HTML e o converte em uma árvore de nós do 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 com a propriedade content.
• O navegador usa o DOM para determinar qual conteúdo deve ser apresentado 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 que o DevTools resolva onde uma mudança feita no painel Elementos precisa ser salva, porque o DOM é afetado por HTML, JavaScript e CSS.

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

Salvar alterações no JavaScript

Para salvar as mudanças no JavaScript:

1. Abra um arquivo JavaScript da pasta do espaço de trabalho conectado em Fontes > Espaços de trabalho.

2. Faça uma alteração no JavaScript.

   Observação: uma mudança ainda não se aplica à página ativa nem à origem.

3. Salve a mudança, por exemplo, pressionando Ctrl / Cmd + S, e confira a mudança aplicada no arquivo de origem. O painel Fontes mostra um ponto verde ao lado do nome do arquivo.

4. Se o servidor HTTP local detectar mudanças no arquivo de origem em tempo real e recarregar a página automaticamente, as mudanças serão aplicadas assim que você as salvar no DevTools. Caso contrário, reimplante o servidor local.

Para aprender o fluxo de trabalho, assista o vídeo:

Dica: ao mudar o JavaScript, às vezes é necessário acessar outros painéis, como Elementos ou Console. Para isso, use o Painel e reordene os painéis.

Remover uma conexão de pasta do espaço de trabalho

Para remover uma conexão de pasta do espaço de trabalho, em Origens > Espaço de trabalho, clique com o botão direito do mouse na pasta, selecione Remover do espaço de trabalho no menu suspenso e clique em Remover.

Observação: mudar ou excluir o UUID da pasta no arquivo JSON de metadados também desconecta a pasta.

Conectar manualmente uma pasta do espaço de trabalho

1. Abra o DevTools na página hospedada localmente.

2. Em Origens > Espaço de trabalho, clique em Adicionar pasta manualmente. Em seguida, selecione uma pasta com os arquivos de origem.

   

   Observação: também é possível arrastar a pasta para o painel Origens.

3. Em seguida, siga as etapas 3 e 4 em Conectar uma pasta do espaço 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 ser executado o mais rápido possível. Uma conexão de pasta do espaço de trabalho geralmente pode mapear o código otimizado de volta para o 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 uma variedade de 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.

Próximas etapas

Todas as pastas já configuradas que você pode gerenciar em Configurações > Espaço de trabalho.

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

Consulte também

As substituições locais são outro recurso do DevTools um pouco semelhante que permite simular conteúdo da Web ou cabeçalhos da solicitação. Assim, você pode testar livremente as mudanças em uma página sem esperar que o back-end seja atualizado. Com as substituições locais, as mudanças persistem nos carregamentos de página, mas não são mapeadas para o código-fonte da página.