Exibir ou editar arquivos de origem usando a ferramenta Fonte rápida

Use a ferramenta Fonte rápida para exibir ou editar arquivos de origem ao mesmo tempo que exibe uma ferramenta diferente da ferramenta Fontes . A ferramenta Fonte rápida sempre exibe os mesmos arquivos que estão abertos na ferramenta Fontes .

O local principal para exibir arquivos de origem no DevTools é na ferramenta Fontes . Mas, às vezes, você precisa acessar outras ferramentas, como o Elements ou o Console, ao exibir ou editar os arquivos de origem. Use a ferramenta Fonte rápida , que por padrão é aberta no painel Visualização Rápida na parte inferior do DevTools.

Usar a ferramenta Fonte rápida em conjunto com a ferramenta Fontes

Para exibir a ferramenta Fonte rápida na Exibição Rápida na parte inferior do DevTools, uma ferramenta diferente da ferramenta Fontes deve estar aberta na Barra de Atividades na parte superior do DevTools.

A ferramenta Fonte rápida fornece uma exibição alternativa dos arquivos que estão abertos na ferramenta Fontes . A ferramenta Fonte rápida tem um subconjunto de recursos. Para recursos completos, use a ferramenta Fontes .

Se você abrir ou fechar um arquivo em uma ferramenta, o arquivo será aberto ou fechado na outra ferramenta. Em ambas as ferramentas, há uma guia para cada arquivo aberto.

Edite arquivos de origem locais no DevTools selecionando uma pasta do Workspace

Este é um tutorial de ponta a ponta de todas as etapas para demonstrar a ferramenta Fonte rápida , usando o aplicativo Web ToDo no repositório MicrosoftEdge / Demonstrações .

Ao selecionar uma pasta local como um Espaço de trabalho na ferramenta Fontes , você pode editar arquivos de dentro da ferramenta Fonte rápida ao mesmo tempo em que exibe uma ferramenta diferente e fazer com que essas edições sejam salvas em sua unidade local. Dessa forma, você pode editar arquivos na ferramenta Fonte rápida enquanto usa outra ferramenta, como Elementos ou Rede, e fazer com que suas edições sejam salvas no arquivo de origem correspondente em sua unidade local.

Para editar arquivos de origem na ferramenta Fonte rápida , você fará o seguinte:

1. Tenha acesso aos arquivos de origem da página da Web localmente, como um repositório clonado.

2. Na guia Workspace na ferramenta Sources (), adicione uma pasta local de arquivos de origem.

3. Na guia Workspace , abra um arquivo, como um .js arquivo.

4. Na Barra de Atividades, selecione uma ferramenta diferente da ferramenta Fontes , como a ferramenta Elementos .

5. No painel Visualização Rápida na parte inferior do DevTools, abra a ferramenta Fonte rápida . O arquivo aberto .js é mostrado em um editor simplificado e a ferramenta Elementos ainda é exibida.

Essas etapas são detalhadas no tutorial abaixo.

Tem arquivos de origem locais, como um repositório clonado

Para usar a ferramenta Fonte rápida para salvar as alterações localmente, você deve ter arquivos de origem locais que correspondam aos arquivos do servidor Web. Verifique se há arquivos de origem na unidade local que correspondam aos arquivos transitórios retornados pelo servidor Web.

Por exemplo, se ainda não tiver feito isso, clone o repositório MicrosoftEdge/Demos para sua unidade local, da seguinte forma:

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

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

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

4. Clique no botão suspenso Código .

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

6. Supondo que você tenha o git instalado, abra um prompt de comando.

7. 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 um prompt de comando:

   # 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:

   • Clone o repositório "MicrosoftEdge / Demos" para sua unidade em Código de exemplo para DevTools.
   • Clone o repositório WebView2Samples em Configurar seu ambiente de Desenvolvimento para WebView2. Mostra um repositório de exemplo diferente, mas mostra etapas para várias ferramentas.
   • Clonar um repositório – GitHub docs.

Agora você tem uma pasta local de arquivos de origem (como /demo-to-do/) que correspondem aos arquivos no servidor Web.

Continue com a próxima seção.

Iniciar um servidor localhost

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

2. Vá para o diretório clonado /demo-to-do/ , como C:\Users\localAccount\GitHub\Demos\demo-to-do\.

   Se você usar o shell git bash, ele será um shell UNIX, portanto, mesmo no Windows, você precisará encapsular um caminho de diretório que tenha barras invertidas entre aspas ou então usar barras invertidas em vez de barras invertidas.

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

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

   # Node.js option
   cd ~/GitHub/demos/demo-to-do
   npx http-server  # Node.js
   

   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/demo-to-do
   python -m SimpleHTTPServer  # Python 2
   

   # Python 3 option
   cd ~/GitHub/demos/demo-to-do
   python -m http.server  # Python 3
   

5. Abra uma guia no Microsoft Edge e vá para 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 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.

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.

Selecione uma pasta local de arquivos de origem como o Espaço de trabalho

1. Continuando acima, clique com o botão direito do mouse na página da demonstração e selecione Inspecionar.

   O DevTools é aberto.

2. Na Barra de Atividades na parte superior do DevTools, selecione a ferramenta Fontes (), selecione a guia Workspace (agrupada com a guia Página ) e, na guia Workspace , clique no botão Adicionar pasta .

   A caixa de diálogo Selecionar Pasta é aberta.

3. Navegue até uma pasta, como C:\Users\localAccount\GitHub\Demos\demo-to-do, e clique no botão Selecionar Pasta .

   Na parte superior do DevTools, uma mensagem diz DevTools solicita acesso completo ao <caminho>.

4. Clique no botão Permitir .

   A árvore de demo-to-do arquivos aparece na guia Workspace da ferramenta Fontes . Os arquivos HTML, JS e CSS têm um ponto verde "mapeado".

5. Na guia Workspace , expanda a árvore de arquivos e clique em um ou mais arquivos, como to-do.js.

   O arquivo é aberto na ferramenta Fontes :

   

Abrir a ferramenta Fonte rápida e editar um arquivo

Suponha que você queira continuar exibindo a ferramenta Elementos , mas deseja simultaneamente exibir e editar os arquivos de origem que foram abertos por meio da ferramenta Fontes .

1. Continuando acima, na Barra de Atividades na parte superior do DevTools, selecione uma ferramenta diferente da ferramenta Fontes (), como a ferramenta Elementos (ícone da ).

2. Se a barra de ferramentas de Visualização Rápida não for mostrada na parte inferior do DevTools, pressione Esc.

3. Na barra de ferramentas Visualização Rápida na parte inferior do DevTools, clique no botão Mais ferramentas e selecione Fonte rápida.

   A ferramenta Fonte rápida é aberta em Exibição rápida na parte inferior do DevTools:

   

   todo.js será exibido, porque esse arquivo está aberto na ferramenta Fontes .

4. Na página da Web de demonstração do To Do, exclua todas as tarefas.

5. Clique no painel Fonte rápida e pressione Ctrl+F.

   Na ferramenta Fonte rápida , a interface do usuário Localizar é exibida.

6. Digite "Sem tarefas" e pressione Enter.

7. Na linha de código, altere no tasks para 0 tasks.

   Um asterisco aparece na guia nome do arquivo.

8. Pressione Ctrl+S.

   O asterisco é removido da guia nome do arquivo.

9. Atualize a página da Web de demonstração (Ctrl+R).

10. Se a página da Web renderizada não mudar de "Não" para "0" e não houver mais um ponto "mapeado" verde na guia nome do arquivo JS, clique com o botão Atualizar com o botão Atualizar no Microsoft Edge e clique com o botão direito do mouse no Microsoft Edge e selecione Atualização forçada (Ctrl+Shift+R).

    A página da Web renderizada muda de "Não" para "0" e há um ponto verde "mapeado" na guia nome do arquivo JS.

    

Agora, quando você edita os arquivos da pasta no DevTools, as edições não são feitas apenas no arquivo transitório retornado pelo servidor, mas também são salvas nos arquivos de origem em sua unidade local. Você pode editar o arquivo de dentro da ferramenta Fonte rápida ao mesmo tempo que exibe outra ferramenta (ou de dentro da ferramenta Fontes ).

Este é o fim das etapas do tutorial.

Veja também:

• Adicione uma pasta local ao workspace para usar o DevTools para editar arquivos e salvar alterações em disco na visão geral da ferramenta Fontes.
• Editar e salvar arquivos em um espaço de trabalho (ferramenta Fontes, guia Espaço de Trabalho)
  • Etapa 6: Salvar uma alteração de JavaScript no disco no tutorial do Espaço de Trabalho (ferramenta Fontes, guia Espaço de Trabalho)

Abrir um arquivo usando o Menu de Comando

Abrir um arquivo usando o Menu de Comando abre esse arquivo na ferramenta Fonte rápida e na ferramenta Fontes .

Para abrir o Menu de Comando, siga um destes procedimentos:

• Selecione Personalizar e controlar o DevTools>Executar comando.

• Pressione Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS).

• Clique no link Executar comando na ferramenta Fonte rápida vazia (ou ferramenta Fontes ).

Para abrir um arquivo usando o prompt Abrir arquivo do menu de comando, siga um destes procedimentos:

• Ferramenta >Selecionar fontesMais opções (ao lado da guia Página) >Abrir arquivo.

• Selecione Personalizar e controlar o DevTools>Abrir arquivo.

• Pressione Ctrl+P (Windows, Linux) ou Command+P (macOS).

• Quando a ferramenta Fonte rápida (ou a ferramenta Fontes ) estiver vazia, clique no link Abrir arquivo nas instruções da ferramenta:

  

  O prompt Abrir arquivo do menu de comando é exibido.

  Para exibir o link Abrir arquivo nas instruções no painel, talvez seja necessário rolar para baixo ou arrastar o divisor de Visualização rápida para cima para tornar o painel Visualização rápida mais alto.

Atalhos de teclado na ferramenta Fonte rápida

A ferramenta Fonte rápida tem uma interface do usuário simplificada. Use estes atalhos de teclado.

• Ctrl+F - Localizar.

• Ctrl+S - Salvar. Se não houver mais um ponto verde "mapeado" no nome do 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).

• Ctrl+P - Abre um arquivo usando o Menu de Comando. Equivale a acessar a ferramenta Fontes e clicar em um arquivo na guia Workspace .

Fechar um arquivo

Para fechar um arquivo, clique no botão x na guia do arquivo.

O arquivo é fechado na ferramenta Fonte rápida e na ferramenta Fontes .

Confira também

• Visão geral da ferramenta Fontes
  • Ferramenta de origem rápida, para exibir arquivos de origem ao usar uma ferramenta diferente na visão geral da ferramenta Fontes
  • Acompanhar as alterações nos arquivos usando a ferramenta Alterações