Editar arquivos com Workspaces (guia Sistema de Arquivos)

Utilize o separador Sistema de Ficheiros na ferramenta Origens para definir uma área de trabalho, para guardar as alterações de DevTools nos seus ficheiros de código fonte em vez de apenas numa cópia transitória dos ficheiros devolvidos pelo servidor Web.

Este tutorial fornece prática prática na configuração e utilização de uma área de trabalho no DevTools. Depois de adicionar ficheiros a uma área de trabalho, as alterações efetuadas no código fonte através de DevTools são guardadas no seu computador local. Estas alterações são preservadas nas atualizações de página.

Para atualizar os seus conhecimentos sobre as tecnologias utilizadas, consulte os seguintes artigos:

• Utilize HTML, CSS e JavaScript para criar uma página Web. Consulte Introdução à Web

• Utilize DevTools para fazer alterações básicas ao CSS. Veja Introdução à visualização e alteração do CSS

• Execute um servidor Web HTTP local. Confira:

  • Utilizar Node.js (utilizado para este tutorial): configure um servidor localhost em Instalar a extensão DevTools para Visual Studio Code.

  • Utilizar o Python: executar um servidor HTTP local simples em Como configurar um servidor de teste local?

Introdução

Uma área de trabalho DevTools permite-lhe guardar as alterações efetuadas numa cópia local do código fonte para o mesmo ficheiro no seu computador, para que as alterações sejam mantidas nas atualizações da página. Eis um cenário típico para utilizar uma área de trabalho:

• Tem o código fonte do site de demonstração no seu ambiente de trabalho.

• Está a executar um servidor Web local a partir do diretório de código fonte, para que o site esteja acessível em localhost:8080. Nota: se utilizar a opção servidor Python, o número de porta predefinido é 8000.

• Abriu localhost:8080 no Microsoft Edge e está a utilizar o DevTools para alterar o código fonte do site, que inclui os ficheiros CSS, HTML e JavaScript.

Os passos do tutorial abaixo orientam-no ao longo desta configuração do ambiente.

Limitações

Se estiver a utilizar uma arquitetura moderna, é provável que transforme o seu código fonte a partir de um formato fácil de manter num formato otimizado para ser executado o mais rapidamente possível. Normalmente, uma área de trabalho é capaz de mapear o código otimizado de volta para o código fonte original, utilizando mapas de origem para JavaScript e CSS. No entanto, existe muita variação na forma como cada arquitetura utiliza mapas de origem.

As DevTools não suportam todas as variações de arquitetura; por exemplo, a funcionalidade Áreas de Trabalho (separador Sistema de Ficheiros) não funciona com a arquitetura Criar React Aplicação.

Se tiver problemas ao utilizar áreas de trabalho com a sua arquitetura de eleição ou identificar os passos específicos da arquitetura necessários, inicie um thread na lista de correio do Chrome DevTools ou faça uma pergunta no Stack Overflow para trocar informações com o resto da comunidade de DevTools.

Funcionalidade relacionada: Substituições

Substituições é uma funcionalidade de DevTools semelhante a uma área de trabalho. Pode utilizar uma substituição quando pretender experimentar alterações a uma página Web e tem de apresentar as alterações entre cargas de páginas Web, mas não se importa em mapear as alterações ao código fonte da página Web. No entanto, as alterações não são guardadas quando atualiza a página Web.

A funcionalidade Substituições permite-lhe armazenar uma cópia local dos ficheiros da página Web no servidor. Quando atualiza a página, o Microsoft Edge carrega a cópia local dos ficheiros em vez dos ficheiros no servidor. Para saber mais sobre substituições, consulte Substituir recursos de páginas Web com cópias locais (separador Substituições).

Criar o diretório de ficheiros de origem

Vamos configurar os ficheiros de demonstração e, em seguida, configurar as DevTools.

1. Noutra janela ou separador, aceda ao código fonte de demonstração áreas de trabalho.

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 resto do tutorial, este diretório é referido como ~/Desktop/app ou C:\Users\myusername\app\, embora possa utilizar um caminho diferente.

3. Se ainda não o fez, instale Node.js e npm. Para obter mais informações, veja Install Node.js and Node Package Manager (npm) in Installing the DevTools extension for Visual Studio Code (Instalar o Node.js e o Gestor de Pacotes de Nós [npm]) em Installing the DevTools extension for Visual Studio Code (Instalar a extensão DevTools para Visual Studio Code).

4. Aceda a uma linha de comandos, como a shell do git bash ou o painel Terminal no Microsoft Visual Studio Code.

5. Aceda ao app diretório que criou, como ~/Desktop/app ou C:/Users/myusername/app. Se utilizar a shell do git bash, é uma shell UNIX, por isso, mesmo no Windows, tem de moldar um caminho de diretório que tenha barras invertidas entre aspas ou utilizar barras em vez de barras invertidas.

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 um separador no Microsoft Edge e aceda à versão alojada localmente do site. Deverá conseguir aceder-lhe através localhost:8080do :

   

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

Definir uma área de trabalho em DevTools

1. Prima Ctrl+Shift+J (Windows, Linux) ou Comando+Opção+J (macOS) para abrir a Consola de DevTools:

   

2. Clique no separador Origens ().

3. No painel Navegador (à esquerda), clique no separador Sistema de Ficheiros (que está agrupado com o separador Página ):

   

4. Clique em Adicionar pasta à área de trabalho. Explorador de Arquivos ou Finder é aberto.

5. Aceda ao /app/ diretório que criou. Por exemplo, na caixa de texto Pasta: introduza o caminho, como ~/Desktop/app ou C:\Users\myusername\app\. Em seguida, clique no botão Selecionar Pasta .

   O DevTools pede-lhe se deve conceder acesso total às DevTools ao seu app diretório.

6. Clique no botão Permitir para dar permissão às DevTools para ler e escrever no diretório.

   No separador Sistema de Ficheiros encontram-se í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 que é recebido do servidor Web e o ficheiro de origem local no diretório app :

   

Editar CSS e guardar alterações ao ficheiro de origem

Para fazer uma alteração no ficheiro CSS e guardá-lo no disco:

1. Na ferramenta Origens , no separador Sistema de Ficheiros (agrupado com o separador Página ), selecione styles.css para abri-lo no painel do editor. A color propriedade do h1 elemento está definida como fuchsia:

   

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

   O painel Estilos apresenta as regras CSS que são aplicadas ao <h1> elemento . O ícone de ficheiro mapeado () junto a styles.css:1 é uma página com um ponto verde. O ponto verde significa que todas as alterações efetuadas a esta regra CSS são mapeadas styles.css no seu app diretório:

   

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

   

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

5. Atualize a página.

A cor do <h1> elemento ainda está definida para a nova cor. A alteração permanece numa atualização, porque quando efetuou a alteração, as DevTools guardaram a alteração no disco. Quando atualize a página, o servidor local serviu a cópia modificada do ficheiro a partir do disco.

Sugestão: Também pode alterar a cor ao clicar no relógio cor de fucshia para abrir o seletor de cores para escolher uma nova cor. O valor HEX para a cor que escolher é o nome da cor.

Editar HTML e guardar alterações ao ficheiro de origem

Na ferramenta Elementos , é possível alterar a etiquetagem HTML numa cópia do ficheiro que é devolvida pelo servidor. No entanto, para guardar as suas edições num ficheiro de origem local, tem de utilizar a ferramenta Origens em vez da ferramenta Elementos .

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

Pode fazer alterações ao conteúdo HTML com a árvore DOM na ferramenta Elementos , mas as alterações à árvore DOM não são guardadas no disco e afetam apenas a sessão atual do browser.

Os passos seguintes demonstram que as edições na árvore DOM não são preservadas nas atualizações de página:

1. Continuando acima, selecione a ferramenta Elementos .

2. Na árvore DOM, no elemento, selecione a cadeia de DevTools Workspaces Demotexto , elimine-a, escreva a cadeia I Love Cakede texto e, em <h1> seguida, prima Enter. A página Web composta mostra o novo texto do cabeçalho:

   

3. Abra o index.html ficheiro que está no seu app diretório num editor de texto, como Visual Studio Code. A alteração que acabou de efetuar não é apresentada; O cabeçalho continua a indicar "Demonstração de Áreas de Trabalho de DevTools".

4. No browser, atualize a página de demonstração. A página reverte para o cabeçalho original , "Demonstração de Áreas de Trabalho de DevTools", porque a árvore DOM com a sua edição foi eliminada e o DOM foi recriado a partir do ficheiro inalterado index.html no diretório da área app de trabalho.

Alterar HTML a partir da ferramenta Origens guarda as alterações

Se quiser guardar uma alteração no HTML da página Web, edite o HTML na ferramenta Origens com uma área de trabalho definida (no separador Sistema de Ficheiros ), em vez de alterar o HTML na árvore DOM na ferramenta Elementos .

1. Continuando acima, clique no separador Origens ().

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

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

4. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS) para guardar a alteração.

5. Atualize a página. O cabeçalho na página composta muda para "I Love Cake", porque essa cadeia foi guardada no index.html seu diretório mapeado app :

   

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

   O <h1> elemento contém o novo texto, porque efetuou a alteração com o editor da ferramenta Origens para editar index.html e, em seguida, guardou a alteração e esse ficheiro foi mapeado numa área de trabalho (o separador Sistema de Ficheiros ), indicado por um ponto verde no ícone do ficheiro.

Editar JavaScript e guardar alterações ao ficheiro de origem

O local main para utilizar o editor de código de DevTools é a ferramenta Origens. No entanto, por vezes, tem de aceder a outras ferramentas, como a ferramenta Elementos ou a Consola, enquanto edita ficheiros. A Ferramenta de origem rápida fornece-lhe apenas o editor da ferramenta Origens , enquanto qualquer ferramenta está aberta.

Para abrir o editor de código DevTools juntamente com outras ferramentas:

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

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

3. Na linha de comandos Executar , comece a escrever rapidamente e, em seguida, selecione Mostrar Origem rápida:

   

   Na parte inferior da janela DevTools , a ferramenta DevTools é aberta, apresentando o conteúdo de index.html, porque este é o último ficheiro que editou na ferramenta Origens . Se necessário, clique em Expandir Vista Rápida e certifique-se de que a ferramenta Elementos está selecionada.

4. Prima Ctrl+P (Windows, Linux) ou Comando+P (macOS) para apresentar a linha de comandos Abrir Ficheiro do Menu de Comandos:

   

5. Comece a escrever script e, em seguida, selecione script.js que está no diretório app/ .

   A listagem de ficheiros é apresentada na Ferramenta de origem rápida . Na página Web de demonstração composta, a hiperligação Editar ficheiros com Áreas de Trabalho não tem o estilo itálico.

6. Utilize 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. Prima Ctrl+S (Windows, Linux) ou Comando+S (macOS) para guardar a alteração.

8. Atualize a página. Se necessário, clique sem soltar no botão Atualizar e, em seguida, selecione Atualização Fixa. A hiperligação Editar ficheiros com Áreas de Trabalho na página está agora em itálico:

   

Consulte também

• Abra uma pasta de demonstração na ferramenta Origens e edite um ficheiro no Código de exemplo 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 é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.