Como ativar o debugger de JavaScript no Chrome?

Neste artigo você vai aprender a como ativar o debugger de JavaScript no Chrome, com uma simples instrução de JavaScript!

Fala programador(a), beleza? Bora aprender mais sobre debug e JavaScript!

Em JavaScritp temos algumas alternativas para depuração de código

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Uma delas é o console.log, porém em alguns casos pode ser custoso de fazer o debug com diversos logs no projeto

Então há a alternativa do debugger no navegador

Mas como é possível ativar a opção? Para que possamos parar o código linha a linha, caso necessário

É simples! Basta aplicar a instrução debugger em algum lugar do seu código

Ela vai agir como um breakpoint, fazendo o código parar naquele momento

Onde é possível observar o valor de cada uma das variáveis, e depois mandar o navegador avançar no programa

Que será parado novamente quando encontrar uma outra instrução debugger

Exemplo:

let a = 10

a = 11

debugger

a = 12

debugger

Aqui teremos duas pausas, uma em cada instrução de debugger

Conclusão

Neste artigo você aprendeu a como ativar o debugger de JavaScript no Chrome

Apenas precisamos colocar a instrução debugger em uma parte do nosso código

Então cada vez que o navegador encontrar esta instrução, o código é impedido de executar, ou seja, criamos um breakpoint

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!