Compartilhar via

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

  • Artigo

Use este tutorial para saber como abrir e fechar o DevTools clicando com o botão direito do mouse em um .html arquivo para Demonstração a Fazer no Explorer de Visual Studio Code, sem a necessidade de executar um servidor Web.

Etapa 1: Instalar DevTools e pré-requisitos

  1. Se ainda não tiver feito isso, execute as etapas em Instalar a extensão DevTools para Visual Studio Code e continue abaixo. Você não precisa instalar e iniciar um servidor Web para o tutorial atual, mas é recomendável.

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

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

  • Ao contrário do botão Instância de Inicialização , essa abordagem abre DevTools no modo 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.

Demonstraremos abrindo o aplicativo Web de demonstração a fazer :

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

  2. Acesse o diretório em que você clonou o repositório Demos, abra o diretório específico para o aplicativo de demonstração a fazer , como C:\Users\username\Documents\GitHub\Demos\demo-to-do\, e clique no botão Selecionar Pasta :

    Abrir Pasta: demonstração a fazer

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

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

    • A guia DevTools do Edge é aberta.

    • A guia Edge DevTools: Browser é aberta, exibindo a página da Web clicada com o botão direito do mouse.

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

    As duas guias DevTools do Edge e a barra de ferramentas Depuração

Etapa 3: Organizar 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 DevTools.

  1. Em direção ao canto superior esquerdo da guia DevTools do Edge , clique no botão Alternar screencast :

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

    A guia DevTools do Edge: Navegador é fechada.

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

    A guia Edge DevTools: Browser é aberta.

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

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

  4. Na parte superior direita da guia Edge DevTools: Navegador , clique no botão Abrir DevTools .

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

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

Na guia DevTools do Edge , na guia Estilos da ferramenta >Elementos , você pode editar seletores, regras e valores do CSS. A caixa de seleção CSS espelho edição é selecionada por padrão, portanto, o .css arquivo é editado automaticamente, mas as edições não são salvas, para que você possa decidir se deve 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 do CSS, como usar a roda do mouse ou pressionar Seta 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 .css arquivo, mas não salva alterações:

    Edição de espelho do CSS

  3. Feche o .css arquivo. Visual Studio Code solicita se você deve salvar alterações.

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

Etapa 5: passo a passo pelo código JavaScript no Depurador

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

  2. No diretório de demonstração a fazer , clique emto-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 Watch e outros painéis de depurador.

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

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

  5. Na barra de ferramentas Depuração ou usando o menu Executar ou pressionando chaves, passe por algumas linhas de código no to-do.js.

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

Etapa 6: Fechar DevTools

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

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

    O botão Parar na barra de ferramentas Depuração

    A guia DevTools do Edge fecha e a guia Edge DevTools: Browser é fechada.

Veja também:

Você terminou o tutorial "Introdução 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 usando a extensão DevTools para Visual Studio Code.

Confira também

Github: