Pausar código com pontos de interrupção

Use pontos de interrupção para pausar seu código JavaScript. Este artigo explica cada tipo de ponto de interrupção disponível no DevTools, bem como quando usar e como definir cada tipo.

Para obter um tutorial introdutório usando uma página da Web existente, consulte Introdução à depuração do JavaScript.

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

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

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

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

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

1. Selecione a ferramenta Fontes .

2. Abra o arquivo que contém a linha de código que você deseja interromper.

3. Vá para a linha de código.

4. À esquerda da linha de código está a coluna do número da linha. Clique nele. Um ícone vermelho aparece ao lado da coluna de número de linha:

   

Pontos de interrupção de linha de código em seu código

Use a debugger instrução do seu 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 em seu código, não na interface do usuário do DevTools.

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

Quando o trecho de código acima é executado no Microsoft Edge, o DevTools pausa na linha que contém a debugger instrução, pouco antes de executar a console.log('c'); linha.

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

Use um ponto de interrupção de linha de código condicional quando souber a região exata de código que precisa investigar, mas quiser pausar somente quando alguma outra condição for verdadeira.

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

1. Selecione a ferramenta Fontes .

2. Abra o arquivo que contém a linha de código que você deseja quebrar.

3. Vá para a linha de código.

4. À esquerda da linha de código está a coluna do número da linha. Clique com o botão direito do mouse.

5. Selecione Adicionar ponto de interrupção condicional. Uma caixa de diálogo é exibida abaixo da linha de código.

   

6. Insira sua condição na caixa de diálogo.

7. Pressione Enter para ativar o ponto de interrupção. Um ícone vermelho aparece ao lado da coluna de número de linha:

   

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

Use o painel Pontos de interrupção para desabilitar 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 desabilitar 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 do painel Pontos de interrupção para remover todos os pontos de interrupção.

Para desativar todos os pontos de interrupção, clique no botão Desativar pontos de interrupção ():

Pontos de interrupção de alteração do DOM

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

Para definir um ponto de interrupção de alteração do DOM:

1. Selecione a ferramenta Elementos .

2. Vá para o elemento no qual você deseja definir o ponto de interrupção.

3. Clique com o botão direito do mouse no elemento, clique em Quebrar em e, em seguida, clique em modificações de subárvore, modificações de atributo ou remoção de nó:

   

Tipos de pontos de interrupção de alteração do DOM

• Modificações de subárvore. Acionada quando um filho do nó selecionado no momento é removido ou adicionado, ou o conteúdo de um filho é alterado. Não disparado em alterações de atributos do nó secundário ou em alterações no nó selecionado no momento.

• Modificações de atributos: acionado quando um atributo é adicionado ou removido no nó selecionado no momento ou quando um valor de atributo é alterado.

• Remoção de Nó: Acionada quando o nó selecionado no momento é removido.

Pontos de interrupção do XHR/fetch

Use um ponto de interrupção XHR/fetch quando quiser interromper quando ocorrer uma solicitação XmlHttpRequest (XHR) ou Fetch . O DevTools pausa na linha de código em que ocorre a solicitação XHR ou Fetch.

Um exemplo de quando isso é útil é quando sua página da Web está solicitando uma URL incorreta e você deseja encontrar rapidamente o código-fonte XHR ou Fetch que está causando a solicitação incorreta.

Para definir um ponto de interrupção XHR:

1. Selecione a ferramenta Fontes .

2. Expanda o painel Pontos de interrupção XHR/fetch .

3. Clique em Adicionar ponto de interrupção.

4. Digite toda ou parte da URL que você deseja quebrar. O DevTools pausa quando o valor inserido está presente em qualquer lugar em uma URL de solicitação XHR ou Fetch.

5. Pressione Enter para confirmar.

   

Pontos de interrupção de ouvintes de eventos

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

1. Selecione a ferramenta Fontes .

2. Expanda o painel Pontos de interrupção do ouvinte de eventos . O DevTools mostra uma lista de categorias de eventos, como Animação.

3. Selecione uma categoria para pausar sempre que qualquer evento dessa categoria for disparado. Ou expanda a categoria e selecione um evento específico:

   

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á lançando uma exceção capturada ou não capturada.

1. Selecione a ferramenta Fontes .

2. Para pausar quando o código lançar uma exceção JavaScript, no painel Pontos de interrupção , marque a caixa de seleção Pausar em exceções não capturadas .

3. Para pausar em exceções capturadas, como quando uma exceção é capturada por um try/catch bloco, marque a caixa de seleção Pausar em exceções capturadas :

   

Pontos de interrupção de função

Execute o debug(function) método, onde function está a função JavaScript que você deseja depurar, quando quiser pausar sempre que uma função específica for executada. Você pode inserir debug() em seu código (por exemplo, ao usar uma console.log() instrução) ou executar o método na ferramenta 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 will pause before running this line.
  return result;
}

// Call the debug method by passing a reference to the function object,
// not its name as a string.
debug(sum);

sum();

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

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

(function () {
  function foo() {
    console.log('foo');
  }

  function bar() {
    console.log('bar');
  }

  // Here, calling debug(bar) works because
  // bar is defined in the current scope.
  debug(bar);

  bar();
})();

// Here, calling debug(foo) won't work, because foo
// isn't defined in the current scope.
debug(foo);

Ao ligar debug() da ferramenta Console , veja uma técnica para garantir que a função de destino esteja no escopo:

1. Defina um ponto de interrupção de linha de código em algum lugar onde a função esteja no escopo.

2. Dispare o ponto de interrupção. Seu código é pausado no ponto de interrupção e as variáveis para a função atual estão no escopo.

3. Chame debug() o Console do DevTools, enquanto o código ainda estiver pausado no ponto de interrupção da linha de código.

Pontos de log

Um Logpoint é uma variante de ponto de interrupção que não é "interrompida" no depurador, mas registra uma mensagem diretamente no console. Você insere um ponto de log por meio do DevTools da mesma maneira que faria com qualquer outro ponto de interrupção.

Para definir um ponto de log:

1. Selecione a ferramenta Fontes.

2. Abra o arquivo que contém a linha de código em que você deseja inserir um ponto de log.

3. Clique com o botão direito do mouse à esquerda da linha de código, na coluna do número da linha.

4. Selecione Adicionar ponto de log. Uma caixa de diálogo é exibida abaixo da linha de código.

5. Insira uma mensagem ou uma expressão JavaScript que será avaliada quando o logpoint for atingido.

6. Pressione Enter para ativar o ponto de log. Um ícone vermelho aparece ao lado do número da linha.

Veja também:

• Registrar mensagens na ferramenta Console

Confira também

• Recursos de depuração do JavaScript – Usando a interface do usuário do depurador na ferramenta Fontes .
• Introdução à depuração do JavaScript – Um tutorial introdutório usando uma página da Web existente.
• Visão geral da ferramenta Fontes – O depurador faz parte da ferramenta Fontes , que inclui um editor de JavaScript.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.