10

Recentemente, olhando uma pergunta aqui do Stackoverflow, observei o comentário de um usuário que dizia que o console.log e o alert não eram maneiras corretas para debugar códigos do JavaScript.

Essa questão me deixou pensativo, pois eu sempre utilizo o alert e o console.log para debugar códigos JavaScript e visualizá-los no navegador. (Também utilizo o echo, o var_dump e o print_r para o PHP).

Gostaria de saber se realmente essas essas opções, usadas por mim (no JS), são erradas, se existem outras mais indicadas ou se elas podem ser utilizadas normalmente. (Me refiro para utilização de debug no browser e que seja aplicado dentro do código JS, como acontece no caso do console.log).

5
  • Eu uso o Crome, pra mim atende muito bem! F12 -> Aba Network -> Control + P e pesquisa pelo arquivo!
    – Marconi
    Commented 11/11/2019 às 16:30
  • @Marconi , eu utilizo essa ferramenta da 'Aba Network' para PHP. Commented 11/11/2019 às 16:40
  • Sempre uso pra fazer debug do meu js
    – Marconi
    Commented 11/11/2019 às 16:41
  • Tem debugger em todos os navegadores
    – Peter
    Commented 11/11/2019 às 16:46
  • 1
    Eu uso vscode para codificar e próprio browser para depurar JS para depurar PHP uso o plugin XDebug no browser com PHP Debug no vscode. Commented 11/11/2019 às 22:29

2 Respostas 2

8

Olá, acho que uma boa forma de debugar seu script seja da seguinte maneira... Eu utilizo o google chrome, abrindo seu programa no browser, vá para a aba de desenvolvedor apertando F12 ou com o botão direito em inspecionar elemento... como nessa imagem :

inserir a descrição da imagem aqui

após isso na opção source você pode observar seu script e debugar colocando breakpoints da seguinte forma :

inserir a descrição da imagem aqui

3
  • Como assim "colocar breakpoints" ? Em que parte do código, que vc postou como resposta, mostra isso ? Commented 12/11/2019 às 0:59
  • breakpoints você coloca na parte que você quer debugar, descobrir o valor da sua variável ou o descobrir porque o código não esta funcionando, é aquela parte azul marcada na linha na segunda imagem. Commented 12/11/2019 às 10:33
  • 1
    Obrigado, brother! Commented 12/11/2019 às 12:46
5

Não tem problema usar o console.log() para debugar, mas é bem limitado. Eu por exemplo sempre usei (e uso quando bate a preguiça), mas pra alguma coisas fica mais fácil usar a aba Sources do Devtools do seu navegador.

Por exemplo, você pode usar breakpoints, em que seu código para no momento em que passar por ele e você tem acesso ao conteúdo das váriaveis, se entrou ou não em um if, quantas vezes passou por loop, etc. Fora muitas outras coisas que você vai aprendendo, que são muitas mesmo.

Também é possível usar o comando debbuger; no seu código, em que o mesmo para aonde foi colocando o debbuger.

Se você usa o Chrome, tem um tutorial de como debugar de vários jeitos: https://developers.google.com/web/tools/chrome-devtools/javascript

2
  • As duas respostas foram ótimas e parecidas, mas eu vou ficar com a do outro brother, leofalmeida. Somente por ele ter ilustrado com um exemplo. Mas dei um vote na sua também. Obrigado! Commented 12/11/2019 às 12:08
  • 1
    Sem problema, o importante é ter ajudado! :D Commented 13/11/2019 às 20:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .