Introdução ao clicar com o botão direito do rato num ficheiro HTML

Utilize este tutorial para saber como abrir e fechar DevTools ao clicar com o botão direito do rato num ficheiro de Demonstração.html a Fazer na Explorer de Visual Studio Code, sem ter de executar um servidor Web.

Passo 1: Instalar DevTools e pré-requisitos

1. Se ainda não o fez, siga os passos em Instalar a extensão DevTools para Visual Studio Code e, em seguida, continue abaixo. Não precisa de instalar e iniciar um servidor Web para o tutorial atual, mas é recomendado.

Passo 2: Iniciar DevTools ao clicar com o botão direito do rato num ficheiro HTML

Clicar com o botão direito do rato num .html ficheiro no Explorer do Visual Studio Code é a principal forma de abrir DevTools quando a sua página Web não necessita de ser executada num servidor Web.

• Ao contrário do botão Iniciar Instância , esta abordagem abre DevTools no modo de Depuração.

• Ao contrário do botão Iniciar Projeto que iremos utilizar mais tarde, esta abordagem não requer que gere um launch.json ficheiro.

Vamos demonstrar ao abrir a aplicação Web demo-to-do :

1. No Visual Studio Code, selecioneAbrir Pasta de Ficheiros>.

2. Aceda ao diretório onde clonou o repositório Demos, abra o diretório específico da aplicação de demonstração a fazer , como C:\Users\username\Documents\GitHub\Demos\demo-to-do\, e, em seguida, clique no botão Selecionar Pasta :

   

3. Selecione Barra de Atividade>Explorer () > clique com o botão direito do rato e, em index.html seguida, selecione Abrir com o Edge>Open Browser com DevTools:

   

   • O separador DevTools do Edge é aberto.

   • O separador DevTools do Edge: Browser é aberto e apresenta a página Web em que clicou com o botão direito do rato.

   • A barra de ferramentas de Depuração de Visual Studio Code é aberta, a Consola de Depuração é aberta na parte inferior e o painel Executar é aberto. Estas funcionalidades indicam que Visual Studio Code está no modo de Depuração:

   

Passo 3: Dispor separadores

Para poupar espaço, utilize o botão Fechar DevTools ou Abrir DevTools e o botão Alternar screencast para alternar (abrir ou fechar) os separadores DevTools.

1. No canto superior esquerdo do separador DevTools do Edge , clique no botão Alternar screencast :

   

   O separador Edge DevTools: Browser é fechado.

2. No separador DevTools do Edge , clique novamente no botão Alternar screencast .

   É aberto o separador DevTools: Browser do Edge .

3. No canto superior direito do separador DevTools do Edge: Browser , clique no botão Fechar DevTools :

   

4. No canto superior direito do separador DevTools: Browser do Edge , clique no botão Abrir DevTools .

5. Arraste o separador DevTools do Edge: browser para ancorá-lo em qualquer parte do Visual Studio Code, como agrupá-lo com o editor de código fonte.

Passo 4: Editar o CSS no DevTools, atualizar automaticamente o ficheiro de .css

No separador DevTools do Edge, no separador Estilos da ferramenta >Elementos, pode editar seletores, regras e valores CSS. A caixa de verificação de edição do CSS espelho está selecionada por predefinição, pelo que o .css ficheiro é editado automaticamente, mas as edições não são guardadas, para que possa decidir se pretende guardar as alterações.

1. Na ferramenta Elementos , no separador Estilos , clique num valor CSS, como o tamanho do tipo de letra do corpo.

2. Altere o valor CSS, como utilizar a roda do rato ou premir Seta Para Cima e Seta Para Baixo. O ficheiro associado .css é aberto, tal como to-do-styles.css e desloca-se para a linha que define o valor CSS e edita automaticamente o .css ficheiro, mas não guarda as alterações:

   

3. Feche o .css ficheiro. Visual Studio Code indica se pretende guardar as alterações.

4. Clique no botão Não Guardar .

Passo 5: percorrer o código JavaScript no Depurador

1. Selecione Barra de> Atividade Explorer ().

2. No diretório de demonstração de tarefas , clique emto-do.js para abri-lo. Desloque-se para baixo até à changeTask função e, em seguida, clique à esquerda de um número de linha para definir um ponto de interrupção:

   

3. Se a Barra Lateral Executar e Depurar não for apresentada, selecione Ver Execução>. A Barra Lateral Executar e Depurar inclui o painel Monitorização e outros painéis de depurador.

4. Na aplicação de demonstração composta no separador Edge DevTools: Browser , introduza uma tarefa, como testar. O depurador de Visual Studio Code é colocado em pausa no ponto de interrupção no to-do.js ficheiro:

   

5. Na barra de ferramentas Depurar, ou através do menu Executar ou ao premir as teclas, percorra algumas linhas de código no to-do.js.

6. Na aplicação de demonstração composta no separador Edge DevTools: Browser , clique no círculo "concluído" junto à tarefa de teste. O depurador de Visual Studio Code é colocado em pausa no ponto de interrupção no to-do.js ficheiro.

Passo 6: Fechar DevTools

Para terminar a depuração e fechar os separadores DevTools do Edge :

1. Na barra de ferramentas Depurar, clique no botão Parar (Shift+F5). Em alternativa, no menu Executar , selecione Parar Depuração:

   

   O separador DevTools do Edge é fechado e o separador DevTools do Edge: Browser é fechado.

Veja também:

• Fechar As DevTools na Abertura de DevTools e no browser DevTools.

Concluiu o tutorial "Introdução ao clicar com o botão direito do rato num ficheiro HTML". Recomenda-se que também faça os outros tutoriais; veja Começar a utilizar a extensão DevTools para Visual Studio Code.

Confira também

• Abrir DevTools e o browser DevTools
• Extensão DevTools do Microsoft Edge para Visual Studio Code

GitHub:

• demo-to-do - a aplicação Web de demonstração em execução no github.io servidor.
• Código fonte para demonstração de tarefas
• Repositório MicrosoftEdge/Demos