Como depurar JavaScript no Visual Studio Code

Editado 6 meses atrás por ExtremeHow Equipe Editorial

Visual Studio CodeDepuraçãoJavaScriptExtensõesConfiguraçãoFerramentasPontos de interrupçãoConsoleIntegraçãoConfiguraçãoCódigo-fonteDesenvolvimentoDesenvolvimento WebSolução de problemasErrosProgramaçãoNode.jsFluxo de TrabalhoEficiênciaTeste

Depurar é uma parte essencial do processo de desenvolvimento de software. O Visual Studio Code, também conhecido como VS Code, oferece um forte suporte para depuração de JavaScript. Sua ferramenta de depuração oferece aos desenvolvedores uma série de recursos que facilitam a identificação e correção de erros em seu código. Neste documento, explicaremos de forma muito simples como você pode depurar JavaScript de forma eficaz usando o Visual Studio Code. Discutiremos configuração, pontos de interrupção, passagem pelo código e como visualizar variáveis. Forneceremos exemplos para facilitar seu início.

Configurando seu ambiente

Primeiro, certifique-se de ter o Visual Studio Code instalado em sua máquina. Você pode baixá-lo no site oficial do Visual Studio Code. Uma vez instalado, certifique-se de ter o ambiente de execução Node.js mais recente instalado, pois ele é necessário para executar JavaScript fora do navegador. Você pode baixar o Node.js no site oficial.

Instalando as extensões necessárias

O Visual Studio Code depende muito de extensões para funcionalidades adicionais. Para depurar JavaScript de forma eficaz, considere instalar as seguintes extensões:

• Debugger for Chrome: Esta extensão permite depurar JavaScript do lado do cliente executado no Google Chrome.
• Node.js Extension Pack: Este pacote de extensões é útil se você estiver trabalhando com aplicativos Node.js.

Para instalar essas extensões, abra o VS Code, clique no ícone de extensão na barra de atividades ao lado da janela e pesquise cada extensão pelo nome.

Iniciando uma sessão de depuração

Depois que seu ambiente estiver configurado, você pode iniciar uma sessão de depuração. Siga estas etapas:

1. Abra seu arquivo JavaScript: No VS Code, abra a pasta que contém seu projeto JavaScript e localize o arquivo que deseja depurar.
2. Defina um ponto de interrupção: Um ponto de interrupção é um marcador que informa ao depurador para parar a execução do seu código em um ponto específico. Para definir um ponto de interrupção, clique na margem esquerda do editor ao lado do número da linha onde seu código JavaScript está localizado. Um ponto vermelho aparecerá para indicar que o ponto de interrupção está definido.
3. Inicie a depuração: Clique no ícone de Depuração na barra de atividades ao lado da janela. Clique no botão verde Play (ou pressione F5) para iniciar uma sessão de depuração. Se for solicitado a selecionar um ambiente, escolha "Node.js" ou "Chrome", dependendo de onde você deseja que seu código seja executado.

Usando pontos de interrupção

Pontos de interrupção são ferramentas poderosas na depuração que permitem pausar a execução do código para inspecionar seu estado. Ao inspecionar variáveis e seus valores, você pode obter informações sobre como seu código está funcionando.

Para gerenciar pontos de interrupção:

• Desabilitar/Ativar pontos de interrupção: Desative ou ative um ponto de interrupção existente clicando com o botão direito sobre ele. Desativar um ponto de interrupção significa que o depurador irá ignorá-lo durante a execução.
• Excluir um ponto de interrupção: Clique no ponto vermelho no editor para excluir um ponto de interrupção.
• Ponto de interrupção condicional: Clique com o botão direito do mouse no ponto de interrupção e selecione "Adicionar ponto de interrupção condicional". Isso permite que a execução do código pare apenas quando a condição especificada for atendida.

Avançando no código

Quando um ponto de interrupção é atingido, você tem várias opções disponíveis para continuar no seu código:

• Continuar >| : Continua a execução até que o próximo ponto de interrupção seja encontrado.
• Passar por cima >| : Isso avança para a próxima linha na função atual, sem entrar nas funções ou métodos encontrados nessa linha.
• >> ENTRAR: Isso leva você através das funções ou métodos usados na linha e para no primeiro ponto possível dentro dessa função.
• Sair |< : Se você entrou em uma função e deseja completá-la e voltar à função principal de chamada, use esta opção para sair da função atual.

Inspecionando variáveis

Durante uma sessão de depuração, muitas vezes é necessário inspecionar os valores das variáveis para determinar se elas contêm os dados esperados. O Visual Studio Code fornece várias maneiras de inspecionar variáveis:

• Painel de Variáveis: Enquanto estiver depurando, olhe para o painel de Variáveis na seção de Depuração. Ele mostra todas as variáveis atualmente no escopo junto com seus valores.
• Janela de Observação: Adicione variáveis à Janela de Observação para que seus valores possam ser monitorados continuamente. Para adicionar uma variável, clique com o botão direito sobre ela no editor e selecione "Adicionar à Observação".
• Passe o mouse: Passe o mouse sobre uma variável no seu código para ver seu valor atual.

Console e Console de Depuração

O Console de Depuração no Visual Studio Code atua como um console interativo, permitindo que você execute código arbitrário e avalie expressões. Isso pode ser especialmente útil para fazer alterações rápidas ou verificar hipóteses sobre o comportamento do código em tempo real.

O console padrão ainda está disponível para seu uso regular por meio da programação, geralmente integrado com instruções console.log() em JavaScript. Esta é outra maneira simples, mas eficaz, de rastrear alterações nos dados durante a execução.

Exemplo

Vamos considerar um programa simples para entender o processo de depuração:

function add(a, b) { return a + b; } function subtract(a, b) { return a - b; } const result1 = add(10, 5); console.log('Resultado da adição: ', result1); const result2 = subtract(10, 5); console.log('Resultado da subtração: ', result2);

Para depurar este programa JavaScript:

• Abra o arquivo no Visual Studio Code.
• Defina pontos de interrupção nas funções add() e subtract().
• Inicie a depuração usando o depurador do VS Code pressionando F5.
• À medida que a execução do código atinge seu ponto de interrupção, inspecione os valores de a e b.

Conclusão

Aprender a depurar no Visual Studio Code pode parecer assustador no começo, mas com a prática, torna-se uma experiência muito gratificante. Identificar erros no código, passar pela lógica e validar suposições sobre como seu código deve funcionar se tornam algo natural. Equipado com esta poderosa ferramenta, sua eficiência e eficácia como desenvolvedor melhorará significativamente. Lembre-se de usar pontos de interrupção regularmente, inspecionar variáveis e fazer bom uso do console de depuração para testar a lógica do código instantaneamente.

Depurar é uma atividade fundamental e ter fortes habilidades no uso de ferramentas robustas como o Visual Studio Code melhora ainda mais a sua capacidade de entregar código de alta qualidade. Feliz depuração!

  Compartilhe Este Artigo

Se você encontrar algo errado com o conteúdo do artigo, você pode solicitar uma atualização