Comece clicando com o botão direito do mouse em um arquivo HTML

Use este tutorial para saber como abrir e fechar o DevTools clicando com o botão direito do mouse em um .html arquivo para Demo To Do no Explorer do Visual Studio Code, sem precisar executar um servidor Web.

Etapa 1: Instalar o DevTools e pré-requisitos

  1. Se você ainda não fez isso, siga as etapas em Instalando a extensão DevTools para Visual Studio Code e continue abaixo. Você não precisa instalar e iniciar um servidor Web para o presente tutorial, mas é recomendável.

Etapa 2: Inicie o DevTools clicando com o botão direito do mouse em um arquivo HTML

Clicar com o botão direito em um .html arquivo no Explorer do Visual Studio Code é a principal maneira de abrir o DevTools quando sua página da Web não requer execução em um servidor Web.

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

  • Ao contrário do botão Iniciar Projeto que usaremos posteriormente, essa abordagem não exige que você gere um launch.json arquivo.

Vamos demonstrar abrindo o aplicativo Web de demonstração de tarefas :

  1. No Visual Studio Code, selecione Arquivo>,Abrir Pasta.

  2. Vá para o diretório onde você clonou o repositório Demos, abra o diretório específico para o aplicativo demo-to-do , como C:\Users\username\Documents\GitHub\Demos\demo-to-do\, e clique no botão Select Folder :

    Abrir Pasta: demo-to-do

  3. Selecione Barra de> Atividades Explorer (ícone Explorer), > clique com o botão direito do mouse index.html e selecione Abrir com o Edge>Abra o navegador com o DevTools:

    Clique com o botão direito do mouse > em Abrir Navegador com o DevTools

    • A guia DevTools do Edge é aberta.

    • O Edge DevTools: a guia Navegador é aberta, exibindo a página da Web que você clicou com o botão direito do mouse.

    • A barra de ferramentas Depurar do Visual Studio Code é aberta, o Console de Depuração é aberto na parte inferior e o painel Executar é aberto. Esses recursos indicam que o Visual Studio Code está no modo de depuração:

    As duas guias do DevTools do Edge e a barra de ferramentas Depurar

Etapa 3: organizar as guias

Para economizar espaço, use o botão Fechar DevTools ou Abrir DevTools e o botão Alternar screencast para alternar (abrir ou fechar) as guias do DevTools.

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

    O botão 'Alternar screencast' na guia 'Edge DevTools'

    O Edge DevTools: a guia Navegador é fechada.

  2. Na guia Edge DevTools , clique no botão Alternar screencast novamente.

    O Edge DevTools: a guia Navegador é aberta.

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

    O botão 'Fechar DevTools' na guia 'Edge DevTools: navegador'

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

  5. Arraste o Edge DevTools: guia Navegador para encaixá-lo em qualquer lugar do Visual Studio Code, como agrupá-lo com o editor de código-fonte.

Etapa 4: Editar CSS no DevTools, atualizando o arquivo .css automaticamente

Na guia DevTools do Edge , na guia Estilos da ferramenta >Elementos , você pode editar seletores, regras e valores CSS. A caixa de seleção de edição de espelho CSS está marcada por padrão, então o arquivo é editado .css automaticamente, mas as edições não são salvas, para que você possa decidir se deseja salvar as alterações.

  1. Na ferramenta Elementos , na guia Estilos , clique em um valor CSS, como o tamanho da fonte do corpo.

  2. Altere o valor CSS, como usar a roda do mouse ou pressionar as setas para cima e seta para baixo. O arquivo associado .css é aberto, como to-do-styles.css e rola até a linha que define o valor CSS e edita automaticamente o arquivo, mas não salva as .css alterações:

    Edição de espelho CSS

  3. Feche o .css arquivo. O Visual Studio Code pergunta se as alterações devem ser salvas.

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

Etapa 5: Percorra o código JavaScript no Depurador

  1. Selecione Activity Bar> Explorer (ícone do Explorer na Barra de Atividades).

  2. No diretório demo-to-do , clique em to-do.js para abri-lo. Role para baixo até a changeTask função e clique à esquerda de um número de linha para definir um ponto de interrupção:

    Depurando o aplicativo de demonstração

  3. Se a Barra Lateral Executar e Depurar não for exibida, selecione Exibir>Execução. A Barra Lateral Executar e Depurar inclui o painel Inspeção e outros painéis do depurador.

  4. No aplicativo de demonstração renderizado no Edge DevTools: guia Navegador , insira uma tarefa, como teste. O depurador do Visual Studio Code pausa no ponto de interrupção do to-do.js arquivo:

    Passo a passo do JavaScript no aplicativo de demonstração

  5. Na barra de ferramentas Depurar, usando o menu Executar ou pressionando as teclas, percorra algumas linhas de código no to-do.jsformato .

  6. No aplicativo de demonstração renderizado no Edge DevTools: guia Navegador , clique no círculo "concluído" ao lado da tarefa de teste. O depurador do Visual Studio Code pausa no ponto de interrupção do to-do.js arquivo.

Etapa 6: fechar o DevTools

Para encerrar a depuração e fechar as guias do DevTools do Edge :

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

    O botão Parar na barra de ferramentas Depurar

    A guia DevTools do Edge é fechada e a guia DevTools do Edge: Navegador é fechada.

Veja também:

Você concluiu o tutorial "Comece clicando com o botão direito do mouse em um arquivo HTML". É recomendável que você também faça os outros tutoriais; consulte Introdução ao uso da extensão DevTools para o Visual Studio Code.

Confira também

GitHub:

  • Last updated on