Pausar código com pontos de interrupção

Use pontos de interrupção para pausar o 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 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 sabe exatamente onde procurar ou se está trabalhando com uma base de código grande. Você pode economizar tempo ao depurar sabendo como e quando usar os outros tipos de pontos de interrupção.

Tipo de ponto de interrupção	Use isso 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 somente quando alguma outra condição for verdadeira.
DOM	No código que altera ou remove um nó DOM específico ou as crianças.
XHR	Quando uma URL XHR contém um padrão de cadeia de caracteres.
Ouvinte de eventos	No código que é executado após um evento, como click, é executado.
Exception	Na linha de código que está lançando uma exceção capturada ou não desativada.
Function	Sempre que um comando, função ou método específico é executado.
Logpoints	Uma variante que não "quebra" no depurador, mas registra uma mensagem no console.

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 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 de linha de código em 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 número de linha. Clique nele. Um ícone vermelho aparece ao lado da coluna número de linha:

   

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

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

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

Quando o snippet 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 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, mas deseja 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 interromper.

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

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

5. Selecione Adicionar ponto de interrupção condicional. Uma caixa de diálogo é exibida sob a 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 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.

• Selecione 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 no painel Pontos de Interrupção para remover todos os pontos de interrupção.

Para desabilitar 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ó DOM ou as crianças.

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

1. Selecione a ferramenta Elementos .

2. Vá 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 Interromper e 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. Disparado quando um filho do nó selecionado atualmente é removido ou adicionado, ou o conteúdo de uma criança é alterado. Não disparado em alterações de atributo de nó filho ou em quaisquer alterações no nó selecionado no momento.

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

• Remoção de nó: disparado quando o nó selecionado atualmente é removido.

Pontos de interrupção XHR/fetch

Use um ponto de interrupção XHR/fetch quando quiser interromper quando ocorrer uma solicitação XmlHttpRequest (XHR) ou Fetch . DevTools faz uma 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 localizar 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. Insira tudo ou parte da URL que você deseja interromper. 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 do ouvinte de eventos

Use pontos de interrupção do ouvinte de eventos quando quiser pausar o código do ouvinte de eventos que é executado após a ação de um evento. 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 . 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á gerando uma exceção capturada ou não executada.

1. Selecione a ferramenta Fontes .

2. Para pausar quando o código gerar uma exceção JavaScript, no painel Pontos de Interrupção , selecione a caixa de seleção Pausar em exceções não executadas .

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

   

Pontos de interrupção de função

Execute o debug(function) método, em function que é 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 (como ao usar uma console.log() instrução) ou executar o método na ferramenta Console de 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

DevTools lança um ReferenceError 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);

Quando você está chamando debug() da ferramenta Console , aqui está 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. Disparar 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() no Console de DevTools, enquanto o código ainda está pausado em seu ponto de interrupção de linha de código.

Logpoints

Um Logpoint é uma variante de ponto de interrupção que não "quebra" no depurador, mas registra uma mensagem diretamente no console. Você insere um logpoint por meio de DevTools da mesma maneira que 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 número de linha.

4. Selecione Adicionar logpoint. Uma caixa de diálogo é exibida sob a linha de código.

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

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

Para obter mais informações, confira Registrar mensagens na ferramenta Console.

Confira também

• Recursos de depuração 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 de origem – O depurador faz parte da ferramenta Sources , que inclui um editor javaScript.

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.