Já ficou quebrando a cabeça e enchendo o código de console.log() para achar o bug? Pare de perder tempo se perdendo no meio de um monte de console.log() e use o depurador do Google Chrome!
Onde posso usar o depurador do Google Chrome?
O depurador é uma das ferramentas disponíveis no canivete suíço do Google Chrome. Você pode usar em qualquer código JavaScript utilizado por qualquer página web.
Legal! Como começo?
Basta ter o Google Chrome instalado! Irei utilizar nesse tutorial o mesmo código que utilizei no tutorial sobre o depurador do Visual Studio Code.
Separando os ingredientes
Para começar, eu criei um HTML básico só para estar executando o JavaScript
<html>
<head>
<script type="text/javascript" src="index.js"></script>
</head>
</html>E esse é o código JavaScript que vou estar utilizando
function soma(a, b) {
return a + b;
}
let x = soma(10, 20);Mãos à massa
Vamos lá! Vá para a aba “Sources” das ferramentas de desenvolvedor e selecione o código JavaScript que deseja depurar no menu à esquerda, no meu caso é o “index.js”.
Para começar a depuração de fato, você precisa criar um breakpoint que irá dizer ao para o depurador pausar a execução quando for executado a linha que possuir breakpoint. Também pode colocar breakpoint para qualquer exceção que for lançada.
É preciso executar aquela linha de código para que o depurador pause a execução naquele breakpoint, isso irá variar de acordo com o seu código, pode ser clicando num botão que chama aquela função, pode ser chamando aquela função pelo console. No meu caso, eu vou atualizar a página já que a função é chamada quando carrega a página (isso pode ser feito direto da janela do DevTools, não tem necessidade de mudar a janela).
Na menu central do depurador podemos ver a linha em que o depurador pausou e no menu lateral direito podemos estar operando o depurador. Na primeira linha do menu lateral direito temos as ações que podemos estar realizando, da esquerda a direita, temos o botão para resumir a execução, avançar para a próxima linha no escopo atual (sem entrar nas funções sendo chamadas), avançar para a próxima linha a ser executada (podendo entrar na função a ser chamada), vai para a próxima linha após o return da função atual (próxima linha da função que chamou a função atual), avançar para a próxima linha, desativar breakpoints e pausar nas exceções (abre um checkbox ao ativar para selecionar entre todas exceções ou apenas as não tratadas)
Watch
Aqui pode adicionar expressões para serem monitoradas durando a execução do programa. Pode estar adicionando variáveis sozinha, operações com mais de uma variável (a + b), funções e o que mais você possa imaginar que tenha algum return.
É muito útil para monitorar loop e desvio condicional que a condição é uma expressão, por exemplo:
while ((a + b) > 10) {
//faz algo
}Call Stack
Aqui você pode ver a pilha de chamadas atual. É útil em códigos grandes para entender quando alguma função está sendo chamada e causando algum bug.
Scope
Aqui você pode ver e alterar o estado de todas as variáveis locais e globais. Recomendo que procure a causa de uma variável não ser o que deveria ao invés de ficar alterando no depurador.
Breakpoints
Aqui tem uma lista de todos os breakpoints criados, você pode estar ativando ou desativando algum breakpoint sem precisar ir até o breakpoint no código, é muito útil para os casos em que o código é grande e cria breakpoint em diferentes locais do código.
XHR/fetch Breakpoints
Aqui você pode criar breakpoints para requisições HTTP com URL contendo o que você quiser, por exemplo, supondo que eu tenha digitado blgo.lucianohanna.com.br ao invés de blog.lucianohanna.com.br em algum JavaScript desse site mas eu não sei onde, só vejo um 404 na aba de network e o erro de digitação, ao invés de perder tempo procurando onde que tá o erro de digitação no código, eu podia simplesmente criar um XHR/fetch Breakpoint com “blgo” e fazer que o 404 aconteça novamente porém agora o depurador irá pausar a execução onde está o erro de digitação e eu saberei onde corrigir.
DOM Breakpoints
Aqui são os breakpoints para DOM, você pode estar criando breakpoint DOM clicando com o botão direito em algum elemento na aba Elements. Pode ser pausado quando houver modificação na sub-árvore do elemento, quando houver modificação nos atributos do elemento ou na remoção de um nó.
Event Listener Breakpoints
Aqui você pode criar breakpoints para eventos. Esse breakpoint é muito útil para entender por que algum bug ocorre em eventos específicos como girar a tela do celular, colocar o cursor do mouse sobre a tela e clicar em algum lugar.
Pretty Print
Esse botão está no canto inferior esquerdo do menu central. Esse botão faz a mágica de deixar o código formatado direitinho. É muito útil quando o código está minificado.
Bônus: Coverage
O botão “Coverage” no canto inferior direito do menu central indica quais linhas estão sendo executadas. É muito útil para identificar possível código nunca utilizado e salvar alguns bytes do arquivo, afinal, sempre é bom o site ser o mais leve possível! Cuidado para não remover código que pode estar sendo utilizado em alguma outra página.
E estão todos apresentados ao depurador do Google Chrome! Diga nos comentários o que você achou do depurador. Acha que irá aumentar a sua produtividade?
