Apresentar ou editar ficheiros de origem com a Ferramenta de origem rápida

Utilize a Ferramenta de origem rápida para apresentar ou editar ficheiros de origem ao mesmo tempo que apresenta uma ferramenta diferente da ferramenta Origens . A Ferramenta de origem rápida apresenta sempre os mesmos ficheiros que estão abertos na ferramenta Origens .

O local principal para ver ficheiros de origem nas DevTools é na ferramenta Origens . No entanto, por vezes, tem de aceder a outras ferramentas, como Elementos ou Consola, ao ver ou editar os seus ficheiros de origem. Utilize a Ferramenta de origem rápida , que, por predefinição, é aberta no painel Vista Rápida na parte inferior de DevTools.

Utilizar a Ferramenta de origem rápida em conjunto com a ferramenta Origens

Para apresentar a Ferramenta de origem rápida na Vista Rápida na parte inferior das DevTools, uma ferramenta que não seja a ferramenta Origens tem de estar aberta na Barra de Atividade na parte superior das DevTools.

A Ferramenta de origem rápida fornece uma apresentação alternativa dos ficheiros que estão abertos na ferramenta Origens . A Ferramenta de origem rápida tem um subconjunto de funcionalidades. Para obter as funcionalidades completas, utilize a ferramenta Origens .

Se abrir ou fechar um ficheiro numa ferramenta, o ficheiro será aberto ou fechado na outra ferramenta. Em ambas as ferramentas, existe um separador para cada ficheiro aberto.

Editar ficheiros de origem local em DevTools ao selecionar uma pasta área de trabalho

Este é um tutorial completo de todos os passos para demonstrar a Ferramenta de origem rápida , ao utilizar a aplicação Web ToDo no repositório MicrosoftEdge/Demos .

Ao selecionar uma pasta local como uma Área de Trabalho na ferramenta Origens , pode editar ficheiros a partir da Ferramenta de origem rápida ao mesmo tempo que apresentar uma ferramenta diferente e guardar essas edições na unidade local. Desta forma, pode editar ficheiros na Ferramenta de origem rápida enquanto utiliza outra ferramenta, como Elementos ou Rede, e fazer com que as suas edições sejam guardadas no ficheiro de origem correspondente na unidade local.

Para editar ficheiros de origem na Ferramenta de origem rápida , faça o seguinte:

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

2. No separador Área de Trabalho na ferramenta Origens (), adicione uma pasta local de ficheiros de origem.

3. No separador Área de Trabalho , abra um ficheiro, como um .js ficheiro.

4. Na Barra de Atividade, selecione uma ferramenta que não seja a ferramenta Origens , como a ferramenta Elementos .

5. No painel Vista Rápida , na parte inferior de DevTools, abra a Ferramenta de origem rápida . O ficheiro aberto .js é apresentado num editor simplificado e a ferramenta Elementos continua a ser apresentada.

Estes passos são detalhados no tutorial abaixo.

Ter ficheiros de origem locais, como um repositório clonado

Para utilizar a Ferramenta de origem rápida para guardar as alterações localmente, tem de ter ficheiros de origem locais que correspondam aos ficheiros do servidor Web. Certifique-se de que existem ficheiros de origem na unidade local que correspondam aos ficheiros transitórios devolvidos pelo servidor Web.

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

1. Se ainda não tiver terminado, transfira o git e instale-o.

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

3. Aceda a MicrosoftEdge/Demonstrações numa nova janela ou separador.

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

5. Clique no botão Copiar URL para a área de transferência .

   

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

   Em alternativa, se tiver o GitHub Desktop instalado, clique em Abrir com o GitHub Desktop para clonar o repositório e ignore o passo da linha de comandos abaixo.

   Em alternativa, pode utilizar o painel Controlo de Código Fonte do Visual Studio Code para clonar o repositório e ignorar o passo da linha de comandos abaixo.

6. Partindo do princípio de que tem o git instalado, abra uma linha de comandos.

7. Clone o repositório para a unidade local, introduzindo a cadeia de URL que copiou do repositório do GitHub. Se utilizar uma linha de comandos:

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

   Para obter detalhes sobre a clonagem de um repositório, consulte:

   • Clone o repositório de Demonstrações do Edge para a unidade em Código de exemplo para DevTools.
   • Clone o repositório WebView2Samples em Configurar o ambiente Dev para WebView2. Mostra um repositório de exemplo diferente, mas mostra os passos para várias ferramentas.
   • Clonar um repositório – documentos do GitHub.

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

Continue com a secção seguinte.

Iniciar um servidor localhost

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

2. Aceda ao diretório clonado /demo-to-do/ , como C:\Users\localAccount\GitHub\Demos\demo-to-do\.

   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.

3. Crie um ramo de trabalho com o nome "teste" e mude para o mesmo (para evitar alterar os ficheiros da demonstração no ramo "main"):

   git checkout -b test
   

   É equivalente 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 Instalar 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 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.

   A página Web Demonstração de Áreas de Trabalho de DevTools é aberta.

Veja também:

• Executar um servidor HTTP local simples em Como configurar um servidor de teste local? no MDN – mostra Python.

Continue com a secção seguinte.

Selecionar uma pasta local de ficheiros de origem como a Área de Trabalho

1. Continuando acima, clique com o botão direito do rato na página Web de demonstração e, em seguida, selecione Inspecionar.

   O DevTools é aberto.

2. Na Barra de Atividade na parte superior de DevTools, selecione a ferramenta Origens (), selecione o separador Área de Trabalho (agrupado com o separador Página ) e, em seguida, no separador Área de Trabalho , clique no botão Adicionar pasta .

   É aberta a caixa de diálogo Selecionar Pasta .

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

   Na parte superior do DevTools, uma mensagem lê DevTools requests full access to path (Pedidos de devTools de acesso total ao <caminho>).

4. Clique no botão Permitir .

   A árvore de demo-to-do ficheiros é apresentada no separador Área de Trabalho da ferramenta Origens . Os ficheiros HTML, JS e CSS têm um ponto verde "mapeado".

5. No separador Área de Trabalho , expanda a árvore de ficheiros e, em seguida, clique num ou mais ficheiros, como to-do.js.

   O ficheiro é aberto na ferramenta Origens :

   

Abra a Ferramenta de origem rápida e edite um ficheiro

Suponha que pretende continuar a visualizar a ferramenta Elementos , mas quer ver e editar simultaneamente os ficheiros de origem que foram abertos através da ferramenta Origens .

1. Continuando acima, na Barra de Atividade na parte superior de DevTools, selecione uma ferramenta diferente da ferramenta Origens (), como a ferramenta Elementos ().

2. Se a barra de ferramentas Vista Rápida não for apresentada na parte inferior de DevTools, prima Esc.

3. Na barra de ferramentas Vista Rápida na parte inferior de DevTools, clique no botão Mais ferramentas e, em seguida, selecione Origem rápida.

   A Ferramenta de origem rápida é aberta na Vista Rápida na parte inferior das DevTools:

   

   todo.js é apresentado porque esse ficheiro está aberto na ferramenta Origens .

4. Na página Web Demo To Do, elimine todas as tarefas.

5. Clique no painel Origem rápida e, em seguida, prima Ctrl+F.

   Na Ferramenta de origem rápida , é apresentada a IU de Localizar .

6. Não introduza tarefas e, em seguida, prima Enter.

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

   É apresentado um asterisco no separador nome de ficheiro.

8. Prima Ctrl+S.

   O asterisco é removido do separador nome de ficheiro.

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

10. Se a página Web composta não mudar de "Não" para "0" e já não existir um ponto verde "mapeado" no separador nome do ficheiro JS, clique com o botão longo ou clique com o botão direito do rato no botão Atualizar no Microsoft Edge e, em seguida, selecione Atualização fixa (Ctrl+Shift+R).

    A página Web composta muda de "Não" para "0" e existe um ponto verde "mapeado" no separador nome de ficheiro JS.

    

Agora, quando edita os ficheiros da pasta em DevTools, as edições são feitas não só para o ficheiro transitório que é devolvido pelo servidor, como também são guardadas nos ficheiros de origem na unidade local. Pode editar o ficheiro a partir da Ferramenta de origem rápida ao mesmo tempo que apresenta outra ferramenta (ou a partir da ferramenta Origens ).

Este é o fim dos passos do tutorial.

Veja também:

• Adicione uma pasta local à área de trabalho para utilizar o DevTools para editar ficheiros e guardar as alterações ao disco na descrição geral da ferramenta Origens.
• Editar e guardar ficheiros numa área de trabalho (separador Área de Trabalho da ferramenta Origens)
  • Passo 6: Guardar uma alteração de JavaScript no disco no tutorial da Área de Trabalho (separador Área de Trabalho da ferramenta Origens)

Abrir um ficheiro com o Menu de Comandos

Abrir um ficheiro utilizando o Menu de Comandos abre esse ficheiro na Ferramenta de origem rápida e na ferramenta Origens .

Para abrir o Menu de Comandos, efetue um dos seguintes procedimentos:

• Selecione Personalizar e controlar o comando Executar DevTools>.

• Prima Ctrl+Shift+P (Windows, Linux) ou Comando+Shift+P (macOS).

• Clique na ligação do comando Executar na ferramenta de origem rápida vazia (ou ferramenta Origens ).

Para abrir um ficheiro com a linha de comandos Abrir Ficheiro do Menu de Comandos, efetue um dos seguintes procedimentos:

• Selecione a ferramenta>Origens Mais opções (junto ao separador Página ) >Abrir ficheiro.

• Selecione Personalizar e controlar DevTools>Abrir ficheiro.

• Prima Ctrl+P (Windows, Linux) ou Comando+P (macOS).

• Quando a Ferramenta de origem rápida (ou ferramenta Origens ) estiver vazia, clique na ligação Abrir ficheiro nas instruções da ferramenta:

  

  É apresentada a linha de comandos Abrir Ficheiro do Menu de Comandos .

  Para apresentar a ligação Abrir ficheiro nas instruções no painel, poderá ter de deslocar para baixo ou arrastar o separador Vista Rápida para cima para tornar o painel vista rápida mais alto.

Atalhos de teclado na Ferramenta de origem rápida

A Ferramenta de origem rápida tem uma IU simplificada. Utilize estes atalhos de teclado.

• Ctrl+F - Localizar.

• Ctrl+S - Guardar. Se já não existir um ponto verde "mapeado" no nome de ficheiro HTML, JS ou CSS, clique com o botão direito do rato ou clique com o botão direito do rato no botão Atualizar no Microsoft Edge e, em seguida, selecione Atualização fixa (Ctrl+Shift+R).

• Ctrl+P - Abra um ficheiro com o Menu de Comandos. É o mesmo que aceder à ferramenta Origens e, em seguida, clicar num ficheiro no separador Área de Trabalho .

Fechar um ficheiro

Para fechar um ficheiro, clique no botão x no separador do ficheiro.

O ficheiro é fechado na Ferramenta de origem rápida e na ferramenta Origens .

Confira também

• Descrição geral da ferramenta Origens
  • Ferramenta de origem rápida para apresentar ficheiros de origem ao utilizar uma ferramenta diferente na descrição geral da ferramenta Origens
  • Registar alterações a ficheiros com a ferramenta Alterações