Pausar o código com pontos de interrupção

Technical Writer, Chrome DevTools & Lighthouse

Use pontos de interrupção para pausar o código JavaScript. Este guia explica cada tipo de ponto de interrupção disponível no DevTools, bem como quando usar e como definir cada um deles. Para um tutorial prático sobre o processo de depuração, veja Primeiros passos com a depuração do JavaScript no Chrome DevTools.

Visão geral de quando usar cada tipo de ponto de interrupção

O tipo de ponto de interrupção mais conhecido é a linha de código. Mas os pontos de interrupção de linha de código podem ser ineficientes, especialmente se você não souber exatamente o que observar ou se estiver trabalhando com uma grande base de códigos. É possível economizar tempo durante a depuração sabendo como e quando usar os outros tipos de pontos de interrupção.

Tipo de ponto de interrupção	Use este quando quiser pausar...
Linha de código	em uma região exata do código.
Linha de código condicional	em uma região exata do código, mas apenas quando outra condição for verdadeira.
DOM	no código que altera ou remove um nó DOM específico ou seus filhos.
XHR	quando um URL XHR contém um padrão de string.
Listener de eventos	no código executado depois que um evento, como `click`, é acionado.
Exceção	na linha de código que está lançando uma exceção capturada ou não capturada.
Função	sempre que uma função específica é chamada.

Pontos de interrupção da linha de código

Use um ponto de interrupção da linha de código quando souber a região exata do código que você precisa investigar. O DevTools sempre faz uma pausa antes que essa linha de código seja executada.

Para definir um ponto de interrupção da linha de código no DevTools:

Clique na guia Sources.
Abra o arquivo que contém a linha de código que você deseja interromper.
Vá até a linha de código.
À esquerda da linha de código, está a coluna do número da linha. Clique nele. O ícone do número da linha ficará azul.

Pontos de interrupção da linha de código no código

Chame o debugger do código para pausar nessa linha. Isso é equivalente a um ponto de interrupção de linha de código, exceto que o ponto de interrupção é definido no código, não na IU do DevTools.

console.log('a');
console.log('b');
debugger;
console.log('c');

Pontos de interrupção de linha de código condicional

Use um ponto de interrupção de linha de código condicional quando souber a região exata do código que você precisa investigar. No entanto, pause apenas quando outra condição for verdadeira.

Para definir um ponto de interrupção de linha de código condicional:

Clique na guia Sources.
Abra o arquivo que contém a linha de código que você deseja interromper.
Vá até a linha de código.
À esquerda da linha de código, está a coluna do número da linha. Clique no número com o botão direito.
Selecione Add conditional breakpoint. Uma caixa de diálogo é exibida abaixo da linha de código.
Insira sua condição na caixa de diálogo.
Pressione Enter para ativar o ponto de interrupção. O ícone do número fica da cor laranja.

Gerenciar pontos de interrupção de linha de código

Use o painel Breakpoints para desativar ou remover pontos de interrupção de linha de código de um único local.

Marque a caixa de seleção ao lado de uma entrada para desativar esse ponto de interrupção.
Clique com o botão direito do mouse em uma entrada para remover esse ponto de interrupção.
Clique com o botão direito do mouse em qualquer lugar no painel Breakpoints para desativar, desabilitar ou remover todos os pontos de interrupção. Desabilitar todos os pontos de interrupção é equivalente a desmarcar cada um deles. A desativação de todos os pontos de interrupção instrui o DevTools a ignorar todos os pontos de interrupção da linha de código, mas também mantém o estado ativado deles para que estejam no mesmo estado de antes de você reativá-los.

Pontos de interrupção desativados no painel Breakpoints.

Pontos de interrupção de mudança DOM

Use um ponto de interrupção de mudança DOM quando quiser pausar o código que altera um nó DOM ou os respectivos filhos.

Para definir um ponto de interrupção de mudança DOM:

Clique na guia Elements.
Vá até o elemento no qual você deseja definir o ponto de interrupção.
Clique com o botão direito no elemento.
Passe o cursor sobre Break on e, em seguida, selecione Subtree modifications, Attribute modifications ou Node removal.

O menu de contexto para criar um ponto de interrupção de mudança DOM.

Tipos de pontos de interrupção de mudança DOM

Subtree modifications. Acionado quando um filho do nó atualmente selecionado é removido ou adicionado ou o conteúdo de um filho é alterado. Não acionadas em mudanças de atributo do nó filho nem em mudanças do nó atualmente selecionado.
Attributes modifications: Acionado quando um atributo é adicionado ou removido no nó atualmente selecionado ou quando o valor de um atributo muda.
Node Removal: Acionado quando o nó atualmente selecionado é removido.

Pontos de interrupção XHR/Fetch

Use um ponto de interrupção XHR quando quiser adicionar uma interrupção quando o URL de solicitação de um XHR tiver uma string especificada. O DevTools faz uma pausa na linha de código onde o XHR chama send().

Isso é útil, por exemplo, quando você vê que sua página está solicitando um URL incorreto e deseja localizar rapidamente o código-fonte AJAX ou Fetch que está causando a solicitação incorreta.

Para definir um ponto de interrupção XHR:

Clique na guia Sources.
Expanda o painel XHR Breakpoints.
Clique em Add breakpoint.
Insira a string que deseja interromper. O DevTools pausa quando esta string está presente em algum lugar no URL da solicitação XHR.
Pressione Enter para confirmar.

Pontos de interrupção de listener de eventos

Use pontos de interrupção de listener de eventos quando quiser pausar no código do listener de eventos que é executado após um evento ser acionado. Você pode selecionar eventos específicos, como click ou categorias de evento, como todos os eventos de mouse.

Clique na guia Sources.
Expanda o painel Event Listener Breakpoints. O DevTools mostra uma lista de categorias de eventos, como Animation.
Marque uma dessas categorias para pausar sempre que um evento da categoria for acionado ou expandir a categoria e verificar um evento específico.

Criação de um ponto de interrupção de listener de eventos.

Pontos de interrupção de exceção

Use pontos de interrupção de exceção quando quiser pausar na linha de código que está gerando uma exceção capturada ou não capturada.

Clique na guia Sources.
Clique em Pause on exceptions . Ele fica azul quando ativado.
(Opcional) Marque a caixa de seleção Pause On Caught Exceptions se você também deseja pausar as exceções capturadas, além das não capturadas.

Pontos de interrupção de função

Chame debug(functionName), onde functionName é a função que você deseja depurar, quando quiser pausar sempre que uma função específica é chamada. Você pode inserir debug() no código (como uma declaração de console.log()) ou chamá-la no Console do DevTools. debug() é equivalente a definir um ponto de interrupção de linha de código na primeira linha da função.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Verificar se a função de destino está no escopo

O DevTools lança um ReferenceError se a função que você deseja depurar não estiver no escopo.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

Garantir que a função de destino esteja no escopo pode ser complicado se você estiver chamando debug() do Console do DevTools. Veja esta estratégia:

Defina um ponto de interrupção de linha de código em algum lugar onde a função esteja no escopo.
Acione o ponto de interrupção.
Chame debug() no Console do DevTools enquanto o código ainda estiver pausado no seu ponto de interrupção de linha de código.

Feedback

Was this page helpful?

Yes

What was the best thing about this page?

It helped me complete my goal(s)