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.

get-started.js
e outro na
linha 32
- 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 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.

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.

org
no URL
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.

deviceorientation
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.