Tutorial do workspace (ferramenta Fontes, guia Workspace)

Use as etapas a seguir para usar o DevTools como um IDE, como fazer edições na página da Web na guia Espaço de trabalho da ferramenta Fontes, salvando as alterações nos arquivos de origem no disco.

Você pode ler ou seguir estas etapas que mostram como configurar e usar um espaço de trabalho no DevTools. Depois de configurar um workspace, as alterações feitas nos arquivos no workspace, usando o DevTools, são salvas no computador local.

Etapa 1: clonar o repositório de demonstrações do Edge em sua unidade local

Primeiro, você configura um diretório local que contém os arquivos de origem da página da Web, como a página da Web de demonstração do Workspaces.

Clone o repositório MicrosoftEdge / Demos em sua unidade local, incluindo a /workspaces/ pasta demo, da seguinte maneira:

1. Se ainda não tiver feito isso, baixe o git e instale-o.

2. Acesse o repositório MicrosoftEdge / Demos em uma nova janela ou guia.

3. Clique no botão suspenso Código e, em seguida, clique no botão Copiar URL para a área de transferência .

   A URL é copiada para a área de transferência: https://github.com/MicrosoftEdge/Demos.git

   Ou, se você tiver o GitHub Desktop instalado, clique em Abrir com GitHub Desktop para clonar o repositório e ignore a etapa do prompt de comando abaixo.

   Ou você pode usar o painel Controle do Código-Fonte do Visual Studio Code para clonar o repositório e pular a etapa do prompt de comando abaixo.

4. Abra um prompt de comando, como git bash.

5. Clone o repositório em sua unidade local, inserindo a cadeia de caracteres da URL que você copiou do repositório do GitHub. Se você usar o prompt de comando do git bash:

   # Example location where the repo directory will be added:
   cd ~/GitHub
   git clone https://github.com/MicrosoftEdge/Demos.git
   

Para obter detalhes sobre como clonar um repositório, consulte:

• Clonar um repositório – GitHub docs.

Continue com a próxima seção.

Etapa 2: inicie o servidor localhost no diretório de arquivos de origem da página da Web

1. Se ainda não tiver feito isso, instale uma versão atualizada do Node.js e do npm do Node.js.

   Veja também:

   • Instale o Node.js e o Gerenciador de Pacotes de Nó (npm) em Instalando a extensão DevTools para Visual Studio Code.

2. Vá para um prompt de comando, como o shell do Git Bash ou o painel Terminal no Microsoft Visual Studio Code.

3. Altere para o Demos diretório do workspaces repositório:

   cd ~/GitHub/Demos/workspaces
   pwd
   

   Um diretório para uso com a guia Espaço de trabalho da ferramenta Fontes pode ter qualquer nome. Esse diretório de demonstração é chamado ./workspaces/

4. Crie um branch de trabalho chamado "test" e mude para ele (para evitar alterar os arquivos da demo no branch "main"):

   git checkout -b test
   

   Isso equivale a:

   git branch test
   git switch test
   

5. Execute um dos seguintes comandos para iniciar o servidor Web:

   # Node.js option
   npx http-server
   

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

   # Python 2 option
   cd ~/GitHub/demos/workspaces
   python -m SimpleHTTPServer
   

   # Python 3 option
   cd ~/GitHub/demos/workspaces
   python -m http.server
   

6. Abra uma guia no Microsoft Edge e vá para a versão hospedada localmente do site. Normalmente, você acessa acessandolocalhost:8080:

   

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

   A página da Web de Demonstração de Workspaces do DevTools é aberta.

   (O link na demonstração mais recente pode dizer "Editar arquivo com espaços de trabalho" ou "Editar e salvar arquivos em um espaço de trabalho (guia Espaço de trabalho da ferramenta Fontes)".)

Veja também:

• Executando um servidor HTTP local simples em Como você configura um servidor de teste local? no MDN - mostra Python.

Continue com a próxima seção.

Etapa 3: adicionar uma pasta do Workspace na ferramenta Fontes

Em seguida, defina um Workspace no DevTools:

1. Clique com o botão direito do mouse na página da Web de demonstração de DevTools Workspaces hospedada localmente e selecione Inspecionar. Ou pressione Ctrl+Shift+J (Windows, Linux) ou Command+Option+J (macOS).

   O DevTools é aberto.

2. Clique na guia Fontes ().

3. No painel Navegador (à esquerda), clique na guia Espaço de trabalho (agrupada com a guia Página ):

   

4. Clique no botão Adicionar pasta .

   A caixa de diálogo Selecionar Pasta é aberta.

5. Vá para o diretório clonado /Demos/workspace/ que você criou. Por exemplo, na caixa de texto Pasta: , insira o caminho, como C:\Users\localAccount\GitHub\Demos\workspaces\.

6. Clique no botão Selecionar Pasta .

   O DevTools pergunta se deseja conceder ao DevTools acesso total ao seu /workspaces/ diretório.

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

   Na guia Espaço de trabalho há ícones de página com um ponto verde "mapeado", para index.html, script.jse styles.css. O ponto verde "mapeado" 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 /Demos/workspace/ diretório:

   

Continue com a próxima seção.

Etapa 4: Salvar uma alteração CSS no disco (via guia Estilos da ferramenta Elementos)

Em seguida, edite o CSS e salve as alterações no arquivo de origem. Aqui usamos a guia Estilos da ferramenta Elementos, auxiliada por seus controles de interface do usuário, embora pudéssemos editar diretamente o arquivo CSS no editor de arquivos da guia Espaço de trabalho da ferramenta Fontes.

Para fazer uma alteração no arquivo CSS e salvá-lo em disco usando a guia Estilos da ferramenta Elementos:

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

   

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

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

   

3. Altere o color valor da 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. Selecione a ferramenta Fontes , clique com o botão direito do mouse styles.csse selecione Abrir na pasta que contém.

   O Explorador de Arquivos ou o Finder é aberto.

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

6. Atualize a página.

A cor do <h1> elemento ainda está definida com 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.

Dica: Você também pode alterar a cor clicando na amostra de cor fucshia para abrir o Seletor de Cor e escolher uma nova cor. O valor HEX para a cor escolhida é o nome da cor.

Continue com a próxima seção.

Etapa 5: Salvar uma alteração de HTML no disco (via guia Espaço de Trabalho da ferramenta Fontes)

Em seguida, edite o HTML e salve as alterações no arquivo de origem. Para salvar as alterações no arquivo HTML da página da Web, adicione a pasta código-fonte na guia Espaço de trabalho da ferramenta Fontes e edite o HTML na ferramenta Fontes. (As alterações não são feitas no arquivo de origem simplesmente alterando o HTML na árvore DOM na ferramenta Elementos .)

A guia DevTools Workspace é semelhante ao uso de um editor para editar o arquivo de origem HTML, mas permite editar o arquivo de origem HTML diretamente no DevTools.

1. Continuando acima, no DevTools, clique na guia Fontes ().

2. No painel Navegador à esquerda, na guia Espaço de trabalho (agrupada com a guia Página ), selecione index.html.

   A guia index.html é aberta na ferramenta Fontes .

3. Na marca, substitua "Demonstração do <h1> DevTools Workspaces" por "I Love Cake".

   Um asterisco aparece ao lado de index.html.

4. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS).

   A alteração é salva e o asterisco desaparece.

   Você fez a alteração na listagem de arquivos, em vez de na árvore DOM na ferramenta Elementos .

5. Atualize a página. O cabeçalho na página renderizada muda para "I Love Cake", porque essa cadeia de caracteres foi salva em index.html seu diretório mapeado /Demos/workspace/ :

   

6. Na ferramenta Fontes , clique com o botão direito do mouse index.htmle selecione Abrir na pasta que contém.

   O Explorador de Arquivos ou o Finder é aberto.

7. Abra a cópia do que está em seu /Demos/workspace/ diretório em um editor de index.html texto, como o Visual Studio Code.

   O <h1> elemento contém o novo texto, "I Love Cake", porque você fez a alteração usando o editor da ferramenta Fontes para editar index.html e depois salvou a alteração, e esse arquivo foi mapeado em um espaço de trabalho (a guia Espaço de trabalho ), indicado por um ponto verde "mapeado" no ícone do arquivo.

   Muitos desenvolvedores não escrevem HTML diretamente, mas usam abordagens como:

   • Uma linguagem do lado do servidor, como Java, Python ou PHP.
   • Um gerador de sites, como Eleventy.
   • Uma estrutura do lado do cliente que usa código JavaScript.
   • Uma linguagem de marcação diferente de HTML, como Markdown.

   Isso significa que, na prática, poucos desenvolvedores alteram os arquivos HTML na guia Workspace. A maioria dos desenvolvedores produz arquivos HTML usando um tipo diferente de arquivo de origem, como um arquivo de origem JS do componente React e, em seguida, reconstrói e recarrega (o que pode acontecer automaticamente).

8. Clique longamente ou clique com o botão direito do mouse no botão Atualizar no Microsoft Edge e selecione Atualização forçada (Ctrl+Shift+R).

   Na guia Workspace , pontos verdes "mapeados" aparecem em todos os arquivos HTML, CSS e JS.

Continue com a próxima seção.

Etapa 6: Salvar uma alteração do JavaScript em disco

Continuando acima, em seguida, você editará o arquivo JavaScript da demonstração do Workspace e salvará as alterações no arquivo de origem. Para salvar edições em um arquivo de código-fonte JavaScript, você pode usar o DevTools como um IDE, depois de adicionar a pasta de código-fonte na guia Espaço de trabalho da ferramenta Códigos-fonte . Em seguida, você pode editar e salvar o arquivo JavaScript no editor da ferramenta Fontes .

Na página da Web de demonstração renderizada, para estilizar o hiperlink Editar e salvar arquivos em um espaço de trabalho (guia Espaço de Trabalho da ferramenta Fontes) com itálico:

1. No DevTools, selecione a ferramenta Fontes e, em seguida, selecione a guia Workspace , que é agrupada com a guia Página .

2. Na guia Workspace , selecione script.js.

   script.js é aberto em uma guia no painel editor da ferramenta Fontes .

3. No painel editor, adicione o seguinte código à parte inferior do script.js:

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

   Um asterisco aparece na script.js guia.

4. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS).

   script.js for salvo e o asterisco for removido da script.js guia.

5. Atualize a página.

6. Se não houver mais um ponto verde "mapeado" no arquivo HTML, JS ou CSS, clique longamente ou clique com o botão direito do mouse no botão Atualizar no Microsoft Edge e selecione Atualização forçada (Ctrl+Shift+R).

   O hiperlink Editar arquivos com Áreas de Trabalho (ou Editar e salvar arquivos em uma área de trabalho (guia Área de Trabalho da ferramenta Fontes)) na página agora está em itálico:

   

Continue com a próxima seção.

Etapa 7: adicionar um arquivo .js usando o DevTools

1. Na ferramenta Fontes , na guia Workspace , clique com o botão direito do mouse na /workspaces/ pasta e selecione o item de menu Novo arquivo .

   Um arquivo chamado NewFile é adicionado:

   

2. Clique com o botão direito do mouse NewFile na guia Espaço de Trabalho e selecione Renomear.

3. Renomeie o arquivo para test.js.

4. Em test.js, adicione a linha: console.log('hello from test.js');

5. Na ferramenta Fontes , na guia Workspace , selecione index.html.

6. Em index.html, abaixo da linha <script src="./script.js" defer></script>, adicione a linha: <script src="./test.js" defer></script>

7. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS).

   index.html está salvo.

8. Clique longamente ou clique com o botão direito do mouse no botão Atualizar no Microsoft Edge e selecione Atualização forçada (Ctrl+Shift+R).

   Na guia Workspace , pontos verdes "mapeados" aparecem em todos os arquivos HTML, CSS e JS:

   

Isso conclui o tutorial.

Se você quiser reverter as edições em sua /workspace/ pasta, você pode usar comandos git em um prompt de comando, ou usar GitHub Desktop, para reverter as alterações no branch atual, como "main" ou "test".

Confira também

• Editar e salvar arquivos em um espaço de trabalho (ferramenta Fontes, guia Espaço de Trabalho)
• Introdução à exibição e alteração do CSS
• Introdução à depuração do JavaScript

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.