Como utilizar breakpoints no DevTools do Chrome para depuração de JavaScript

Como utilizar breakpoints no DevTools do Chrome?

Breakpoints são uma das ferramentas mais poderosas oferecidas pelo DevTools do Chrome para depuração de código JavaScript. Eles permitem que você pause a execução do código em pontos específicos para inspecionar variáveis, objetos, e a pilha de execução. Isso é útil para entender o fluxo de execução e identificar erros que são difíceis de encontrar apenas olhando o código.

O que são breakpoints?

Os breakpoints são pontos de interrupção que você pode definir no código-fonte. Quando a execução do código atinge esse ponto, ela pausa, permitindo que você inspecione o estado atual do programa. Isso é especialmente útil quando você não consegue identificar o erro apenas examinando o código ou quando o código é executado muito rapidamente.

Como adicionar breakpoints no DevTools?

Adicionar um breakpoint no DevTools do Chrome é simples. Primeiro, abra as Ferramentas de Desenvolvedor pressionando Ctrl + Shift + I (Windows) ou Cmd + Option + I (Mac). Em seguida, vá até a aba Sources, onde você pode ver o código JavaScript da página.

• Clique na linha de código onde deseja adicionar o breakpoint.
• Um marcador azul aparecerá à esquerda da linha, indicando que o breakpoint foi definido.

Exemplo de adição de breakpoint:

No código abaixo, você pode adicionar um breakpoint na linha let x = 5; para pausar a execução no momento em que essa linha for atingida.

function exampleFunction() {
  let x = 5;
  console.log(x);
}
exampleFunction();

O que o código está fazendo: O código acima cria uma função simples e define a variável x. Se você adicionar um breakpoint na linha onde a variável é inicializada (let x = 5;), a execução do código será pausada nesse ponto, permitindo que você inspecione o valor de x.

Como inspecionar variáveis durante a execução?

Depois de adicionar o breakpoint, o código será pausado, e você poderá usar o painel de Scope no DevTools para inspecionar o valor das variáveis. Além disso, você pode passar o mouse sobre qualquer variável no código pausado para ver seu valor no momento da execução.

Como controlar a execução com breakpoints?

Quando o código está pausado em um breakpoint, você pode usar as opções de controle de execução no DevTools para retomar a execução do código. As opções incluem:

• Continue (F8): Retorna a execução até o próximo breakpoint ou até o fim do código.
• Step over (F10): Executa a linha atual, mas não entra em funções chamadas na linha.
• Step into (F11): Entra em qualquer função chamada na linha de código atual.
• Step out (Shift + F11): Sai da função atual e retorna para a função que a chamou.

Usando conditional breakpoints

Os conditional breakpoints são uma maneira poderosa de adicionar lógica ao seu breakpoint. Ao invés de simplesmente pausar a execução toda vez que o código atingir o breakpoint, você pode configurar uma condição para que a execução seja pausada somente quando a condição for verdadeira.

Exemplo de breakpoint condicional:

No código abaixo, você pode adicionar um breakpoint condicional para pausar a execução apenas quando o valor de x for maior que 10.

for (let i = 0; i < 20; i++) {
  let x = i * 2;
  console.log(x);
}

Para adicionar um breakpoint condicional, clique com o botão direito no marcador de breakpoint e selecione Add conditional breakpoint. Insira a condição, como x > 10, e a execução será pausada apenas quando x for maior que 10.

Usando breakpoints para depurar eventos DOM

Você também pode adicionar breakpoints em eventos DOM para pausar a execução quando um evento específico ocorrer, como um clique ou uma alteração no formulário.

Exemplo de breakpoint em evento DOM:

Para depurar um evento de clique em um botão, adicione um breakpoint em um event listener.

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  console.log('Botão clicado!');
});

No DevTools, vá até a aba Event Listener Breakpoints e marque o tipo de evento que deseja depurar, como Mouse > click. A execução será pausada toda vez que o evento de clique for disparado.

Conclusão

Os breakpoints no DevTools do Chrome são uma ferramenta fundamental para depuração de JavaScript. Eles permitem que você pause a execução do código em pontos estratégicos, inspecione variáveis e objetos, e entenda melhor o fluxo do programa. Com o uso de conditional breakpoints e a depuração de eventos DOM, você pode tornar a depuração ainda mais eficiente e precisa.

Como melhorar sua depuração com breakpoints no DevTools do Chrome

Os breakpoints são essenciais para depurar código JavaScript de forma interativa e eficiente. Ao dominar as ferramentas de breakpoint no DevTools do Chrome, você pode facilmente identificar erros e entender o comportamento do seu código, permitindo uma depuração mais rápida e precisa. Não deixe de utilizar breakpoints condicionais para refinar a depuração e trabalhar com eventos DOM para analisar interações do usuário.

Algumas aplicações:

• Use breakpoints para pausar o código e inspecionar variáveis e objetos em tempo real.
• Adicione conditional breakpoints para depurar de forma mais específica, pausando a execução apenas quando uma condição for atendida.
• Depure event listeners para entender a interação do usuário com seu site.

Dicas para quem está começando

• Comece com breakpoints simples antes de explorar breakpoints condicionais.
• Evite adicionar breakpoints em excesso, pois isso pode deixar o código mais difícil de entender.
• Use os step controls no DevTools para navegar de forma eficiente pelo código durante a depuração.

Compartilhe este tutorial