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:
Selecione a ferramenta Fontes .
Abra o arquivo que contém a linha de código que você deseja interromper.
Vá para a linha de código.
À 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:
Selecione a ferramenta Fontes .
Abra o arquivo que contém a linha de código que você deseja interromper.
Vá para a linha de código.
À esquerda da linha de código está a coluna número de linha. Clique com o botão direito do mouse.
Selecione Adicionar ponto de interrupção condicional. Uma caixa de diálogo é exibida sob a linha de código.
Insira sua condição na caixa de diálogo.
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:
Selecione a ferramenta Elementos .
Vá o elemento no qual você deseja definir o ponto de interrupção.
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:
Selecione a ferramenta Fontes .
Expanda o painel pontos de interrupção XHR/fetch .
Clique em Adicionar ponto de interrupção.
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.
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.
Selecione a ferramenta Fontes .
Expanda o painel Pontos de Interrupção do Ouvinte de Eventos . DevTools mostra uma lista de categorias de eventos, como Animação.
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.
Selecione a ferramenta Fontes .
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 .
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:
Defina um ponto de interrupção de linha de código em algum lugar onde a função esteja no escopo.
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.
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:
Selecione a ferramenta Fontes.
Abra o arquivo que contém a linha de código em que você deseja inserir um ponto de log.
Clique com o botão direito do mouse à esquerda da linha de código, na coluna número de linha.
Selecione Adicionar logpoint. Uma caixa de diálogo é exibida sob a linha de código.
Insira uma mensagem ou uma expressão JavaScript que será avaliada quando o ponto de log for atingido.
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.