[Dúvida] Depuração do código linha a linha

Olá, Rodrigo! Tudo joia?

Sim, é possível depurar e acompanhar a execução do código JavaScript linha por linha no Visual Studio Code (VS Code) e ver o andamento no index.html. Vou te explicar como fazer isso:

1. Instalação do Node.js: primeiro, certifique-se de que o Node.js está instalado no seu sistema. O VS Code usa o Node.js para depuração de JavaScript.

2. Configuração do Ambiente de Depuração:

   • Abra seu projeto no VS Code.
   • Vá para a aba de depuração clicando no ícone de um inseto na barra lateral esquerda ou pressione Ctrl+Shift+D.
   • Clique no ícone de engrenagem para abrir as configurações de depuração.
   • Escolha "Node.js" como o ambiente de depuração.

3. Configuração do Launch.json:

   • O VS Code criará um arquivo launch.json na pasta .vscode do seu projeto. Este arquivo contém as configurações de depuração.
   • Para depurar um arquivo HTML e JavaScript, você pode usar a seguinte configuração básica:

   {
       "version": "0.2.0",
       "configurations": [
           {
               "type": "chrome",
               "request": "launch",
               "name": "Launch Chrome against localhost",
               "url": "http://localhost:5500/index.html",
               "webRoot": "${workspaceFolder}"
           }
       ]
   }
   

   Certifique-se se o seu live server está rodando na porta 5500, às vezes ele pode estar rodando na 5501, logo será necessário alterar a configuração.

4. Adicionar Breakpoints:

   • No VS Code, abra o arquivo JavaScript que você deseja depurar (app.js).
   • Clique na margem esquerda ao lado do número da linha onde você deseja adicionar um breakpoint. Um ponto vermelho aparecerá indicando o breakpoint.

5. Iniciar a Depuração:

   • Clique no botão de play verde na aba de depuração para iniciar a depuração.
   • O navegador Chrome abrirá e você poderá ver o andamento do código no index.html.

6. Depurar o Código:

   • Quando o código atingir um breakpoint, a execução será pausada e você poderá ver o estado das variáveis, a pilha de chamadas e muito mais no VS Code.
   • Use as teclas de atalho ou os botões na interface de depuração para continuar, avançar linha a linha, ou sair da função.

Espero ter ajudado e bons estudos!