Editar arquivos com Workspaces (guia Sistema de Arquivos)

Use a guia Sistema de Arquivos na ferramenta Fontes para definir um workspace, para salvar alterações de DevTools em seus arquivos de código-fonte, em vez de apenas em uma cópia transitória dos arquivos que são retornados pelo servidor Web.

Este tutorial fornece prática prática prática na configuração e no uso de um workspace no DevTools. Depois de adicionar arquivos a um workspace, as alterações feitas no código-fonte usando DevTools são salvas no computador local. Essas alterações são preservadas entre atualizações de página.

Para atualizar seus conhecimentos sobre as tecnologias usadas, confira os seguintes artigos:

• Use HTML, CSS e JavaScript para criar uma página da Web. Confira Introdução à Web

• Use DevTools para fazer alterações básicas no CSS. Consulte Introdução à exibição e alteração do CSS

• Execute um servidor Web HTTP local. Confira:

  • Usando Node.js (usado para este tutorial): configure um servidor localhost na instalação da extensão DevTools para Visual Studio Code.

  • Usando o Python: executando um servidor HTTP local simples em Como configurar um servidor de teste local?

Introdução

Um workspace do DevTools permite salvar as alterações que você faz em uma cópia local do código-fonte para o mesmo arquivo em seu computador, de modo que as alterações sejam retidas entre as atualizações da página. Aqui está um cenário típico para usar um workspace:

• Você tem o código-fonte do site de demonstração em sua área de trabalho.

• Você está executando um servidor Web local do diretório de código-fonte para que o site esteja acessível em localhost:8080. Observação: se você usar a opção de servidor Python, o número da porta padrão será 8000.

• Você abriu localhost:8080 no Microsoft Edge e está usando o DevTools para alterar o código-fonte do site, que inclui os arquivos CSS, HTML e JavaScript.

As etapas do tutorial a seguir orientam você sobre essa configuração de ambiente.

Limitações

Se você estiver usando uma estrutura moderna, provavelmente 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. Um workspace geralmente é capaz de mapear o código otimizado de volta para o código-fonte original, usando mapas de origem para JavaScript e CSS. No entanto, há muita variação em como cada estrutura usa mapas de origem.

O DevTools não dá suporte a todas as variações de estrutura; por exemplo, o recurso Workspaces (guia Filesystem) não funciona com a estrutura Criar React Aplicativo.

Se você encontrar problemas ao usar workspaces com sua estrutura de escolha ou identificar etapas específicas da estrutura necessárias, inicie um thread na lista de emails do Chrome DevTools ou faça uma pergunta sobre o Stack Overflow para trocar informações com o restante da comunidade de DevTools.

Recurso relacionado: Substituições

Substituições é um recurso DevTools semelhante a um workspace. Você pode usar uma substituição quando quiser experimentar alterações em uma página da Web e precisa exibir as alterações entre cargas de página da Web, mas não se importa em mapear suas alterações no código-fonte da página da Web. No entanto, suas alterações não são salvas quando você atualiza a página da Web.

O recurso Substituições permite armazenar uma cópia local dos arquivos da página da Web no servidor. Quando você atualiza a página, o Microsoft Edge carrega a cópia local dos arquivos em vez dos arquivos no servidor. Para saber mais sobre substituições, consulte Substituir recursos de página da Web com cópias locais (guia Substituições).

Criar o diretório de arquivos de origem

Configuraremos os arquivos de demonstração e configuraremos DevTools.

1. Em outra janela ou guia, acesse o código-fonte de demonstração dos Workspaces.

2. Crie um app diretório, como ~/Desktop/app ou C:\Users\myusername\app\. Copie index.html, ../shared/img/logo.png, README.md, , script.jse styles.css do código-fonte de demonstração para o diretório app . Para o restante do tutorial, esse diretório é conhecido como ~/Desktop/app ou C:\Users\myusername\app\, embora você possa usar um caminho diferente.

3. Se você ainda não tiver, instale Node.js e npm. Para obter mais informações, consulte Instalar Node.js e node Package Manager (npm) em Instalar a extensão DevTools para Visual Studio Code.

4. Acesse um prompt de comando, como o shell git bash ou o painel Terminal no Microsoft Visual Studio Code.

5. Acesse o app diretório que você criou, como ~/Desktop/app ou C:/Users/myusername/app. Se você usar o shell git bash, é um shell UNIX, portanto, mesmo no Windows, você precisa encerrar um caminho de diretório que tenha cílios nas aspas, ou então use barras para a frente em vez de backslashes.

6. Execute um dos seguintes comandos para iniciar o servidor Web:
   Node.js opção:

   # Node.js option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   npx http-server  # Node.js
   

   Para obter mais informações e opções, consulte Iniciar o servidor (npx http-server) em Instalar a extensão DevTools para Visual Studio Code.

   # Python 2 option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/Desktop/app  # or:  cd C:/Users/myusername/app
   python -m http.server  # Python 3
   

7. Abra uma guia no Microsoft Edge e acesse a versão hospedada localmente do site. Você deve ser capaz de acessá-lo usando localhost:8080:

   

   Outra URL equivalente comum é http://0.0.0.0:8080. O número de porta padrão para a opção do servidor Python é 8000. O número exato da porta pode ser diferente.

Definir um workspace em DevTools

1. Pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS) para abrir o Console de DevTools:

   

2. Clique na guia Fontes ().

3. No painel Navegador (à esquerda), clique na guia Sistema de Arquivos (que é agrupada com a guia Página ):

   

4. Clique em Adicionar pasta ao workspace. Explorador de Arquivos ou Finder é aberto.

5. Vá para o /app/ diretório que você criou. Por exemplo, na caixa Pasta: texto, insira o caminho, como ~/Desktop/app ou C:\Users\myusername\app\. Em seguida, clique no botão Selecionar Pasta .

   O DevTools solicita se você concederá ao DevTools acesso total ao seu app diretório.

6. Clique no botão Permitir , para dar permissão ao DevTools para ler e gravar no diretório.

   Na guia Sistema de Arquivos estão ícones de página que têm um ponto verde, para index.html, script.jse styles.css. O ponto verde indica que o DevTools estabeleceu um mapeamento entre um recurso de rede da página recebida do servidor Web e o arquivo de origem local em seu app diretório:

   

Editar CSS e salvar alterações no arquivo de origem

Para fazer uma alteração no arquivo CSS e salvá-lo em disco:

1. Na ferramenta Fontes , na guia Sistema de arquivos (agrupado com a guia Página ), selecione styles.css para abri-la no painel editor. A color propriedade do h1 elemento é definida como fuchsia:

   

2. Selecione a ferramenta Elementos () e, em seguida, na árvore DOM, expanda o <body> elemento e selecione o <h1> elemento.

   O painel Estilos exibe as regras CSS que são aplicadas ao <h1> elemento. O ícone arquivo mapeado () ao styles.css:1 lado é uma página com um ponto verde. O ponto verde significa que todas as alterações feitas nesta regra CSS são mapeadas styles.css em seu app diretório:

   

3. Altere o valor da color propriedade do <h1> elemento para laranja. Para fazer isso, selecione o <h1> elemento na Árvore DOM. Na regra CSS para h1, clique em fuchsia, comece a digitar laranja e selecione laranja na lista de cores:

   

4. Abra a cópia do styles.css que está em seu app diretório em um editor de texto, como Visual Studio Code. A color propriedade agora está definida como a nova cor, que é laranja neste exemplo. A alteração não foi feita apenas na cópia do arquivo retornado do servidor Web; a alteração também foi feita em seu arquivo mapeado no diretório app do workspace.

5. Atualize a página.

A cor do <h1> elemento ainda está definida como a nova cor. A alteração permanece em uma atualização, pois quando você fez a alteração, o DevTools salvou a alteração em disco. Quando você atualizou a página, o servidor local serviu a cópia modificada do arquivo do disco.

Ponta: Você também pode alterar a cor clicando na amostra cor fucshia para abrir o seletor de cores para escolher uma nova cor. O valor HEX para a cor que você escolhe é o nome de cor.

Editar HTML e salvar alterações no arquivo de origem

Na ferramenta Elementos , é possível alterar a marcação HTML em uma cópia do arquivo retornado pelo servidor. No entanto, para salvar suas edições em um arquivo de origem local, você precisa usar a ferramenta Fontes em vez da ferramenta Elementos .

Alterar a árvore DOM na ferramenta Elementos não salva alterações

Você pode fazer alterações no conteúdo HTML usando a árvore DOM na ferramenta Elementos , mas suas alterações na árvore DOM não são salvas no disco e afetam apenas a sessão atual do navegador.

As etapas a seguir demonstram que as edições na árvore DOM não são preservadas entre atualizações de página:

1. Continuando acima, selecione a ferramenta Elementos .

2. Na árvore DOM, no <h1> elemento, selecione a cadeia DevTools Workspaces Demode caracteres de texto , exclua-a, digite a cadeia I Love Cakede texto e pressione Enter. A página da Web renderizada mostra o novo texto de título:

   

3. Abra o index.html arquivo que está em seu app diretório em um editor de texto, como Visual Studio Code. A alteração que você acabou de fazer não aparece; o título ainda lê "Demonstração de Workspaces de DevTools".

4. No navegador, atualize a página de demonstração. A página reverte para o título original, "Demonstração de Workspaces de DevTools", porque a árvore DOM com sua edição foi descartada e o DOM foi recriado do arquivo inalterado index.html no diretório app do workspace.

Alterar HTML da ferramenta Fontes salva alterações

Se você quiser salvar uma alteração no HTML da página da Web, edite o HTML na ferramenta Fontes com um workspace definido (na guia Sistema de Arquivos ), em vez de alterar o HTML na árvore DOM na ferramenta Elementos .

1. Continuando por cima, clique na guia Fontes () .

2. No painel Navegador à esquerda, selecione index.html. O HTML para a página é aberto.

3. Substitua <h1>DevTools Workspaces Demo</h1> por <h1>I Love Cake</h1>, na listagem de arquivos (em oposição à árvore DOM na ferramenta Elementos ).

4. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar a alteração.

5. Atualize a página. O título na página renderizada muda para "I Love Cake", porque essa cadeia de caracteres foi salva em index.html seu diretório mapeado app :

   

6. Abra a cópia do index.html que está em seu app diretório em um editor de texto, como Visual Studio Code.

   O <h1> elemento contém o novo texto, porque você fez a alteração usando o editor da ferramenta Sources para editar index.html e salvou a alteração, e esse arquivo foi mapeado em um workspace (a guia Filesystem ), indicado por um ponto verde no ícone do arquivo.

Editar JavaScript e salvar alterações no arquivo de origem

O main local para usar o editor de código do DevTools é a ferramenta Fontes. Mas às vezes você precisa acessar outras ferramentas, como a ferramenta Elementos ou o Console, durante a edição de arquivos. A ferramenta de origem rápida fornece apenas o editor da ferramenta Fontes , enquanto qualquer ferramenta está aberta.

Para abrir o editor de código DevTools ao lado de outras ferramentas:

1. Continuando acima, selecione a ferramenta Elementos () .

2. Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando.

3. No prompt Executar , comece a digitar rapidamente e selecione Mostrar Fonte Rápida:

   

   Na parte inferior da janela DevTools, a ferramenta de origem rápida é aberta, exibindo o conteúdo de index.html, porque esse é o último arquivo que você editou na ferramenta Fontes . Se necessário, clique em Expandir Exibição Rápida e verifique se a ferramenta Elementos está selecionada.

4. Pressione Ctrl+P (Windows, Linux) ou Command+P (macOS) para exibir o prompt Abrir Arquivo do Menu de Comando:

   

5. Comece a digitar script e selecione script.js que está no aplicativo/ diretório.

   A listagem de arquivos é exibida na ferramenta de origem rápida . Na página da Web de demonstração renderizada, o hiperlink Editar arquivos com workspaces não é estilizado com itálico.

6. Use a ferramenta de origem rápida para adicionar o seguinte código à parte inferior do script.js:

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

7. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar a alteração.

8. Atualize a página. Se necessário, clique e segure o botão Atualizar e selecione Atualização Dura. O hiperlink Editar arquivos com workspaces na página agora está itálico:

   

Consulte também

• Abra uma pasta de demonstração na ferramenta Fontes e edite um arquivo em Exemplo de código para DevTools.

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.