PASSO A PASSO DEBUGGER

Este passo a passo demonstrará como debuggar um código Javascript, temos

3 formas de fazer esse debug, pelo dev tools do chorme, pelo próprio VsCode,
e de extensões como Coderunner.

 CÓDIGO PARA ESTUDO/TESTE

Este código básico demonstra uma mensagens de boas-vindas utilizando

variáveis do nome, e function para saber aonde irá ser mostrado essa
mensagem.
  EXTENSÃO PARA TRABALHO
Uma indicação minha é utilizar para este projeto uma extensão chamada ‘LIVE
SERVER’ que provavelmente você já deveria ter conhecido em algum
momento, ele dá uma porta de servidor para teste online e salva
automaticamente o código fonte, deixando mais prático o trabalho sem ctlr S ou
apache por exemplo.
está extensão se encontra no VsCode na área de extensão

Após a instalação no canto inferior direito terá um botão ‘go live’ e ao

clicar nele o documento será aberto no google.
  DEV TOOLS CHORME
Está ferramenta não passa de à área inspecionar no chorme, que possibilita
um meio de depuração pelo navegador. Dentro do inspecionar(F12), tem uma
aba chamada source e é lá que será trabalhado.
 E dentro do Sources você pode fazer um breakpoint em alguma linha onde o
programa irá acontecer e irá parar na linha escolhida, onde será possível ver o
caminho da informação, e o que está salvo na variável, e muito importante o
código não é lido depois desse breakpoints, somente executando oque está
antes e na funcition que essa linha está presente.

Essa é a visão geral, mas vamos ver detalhadamente:

Na área breakpoints você pode ver o documento a linha que você está e o
código que ele parou.

Na área scope você pode ver o as variáveis e como eles estão ela no
momento.

E o call Stack é o caminho que as informações ocorreram até chegar no scope

Outra função muito importante é a conditional breakpoints onde você pode
atribuir circunstancias e caso elas aconteçam, o breakpoint é ativo.

Insere um código de condicional que possa acontecer para o breakpoint

acontecer
O DEV TOOLS também tem um menu de navegação

Detalhadamente

Play é lógico executar(parando em breakpoints)

A setinha redonda é pular 1 linha mais executa o script inteiro novamente

A setinha para baixo é pular uma function até a próxima executando-a

A setinha para cima é voltar uma function até a anterior executando-a

não sei ao certo tio desculpa mas

A setinha para direita é avançar a próxima lógica ou arquivo executando-a

Este ícone desmarca todos os breakpoints

Pausa a execução

Eu estudei muito este por achar melhor por ter uma melhor qualidade visual
mas o VSCODE e o CODE RUNNER são as mesma coisa.
Este é primeira versão do documento que eu já vou enviando para você já ter
uma base e já ir trabalhando em quanto eu pesquiso e falo com colegas e
aprimoro esse documento.