Descubra novas formas de depuração, nesta abrangente referência dos recursos de depuração do Chrome DevTools.
Consulte Primeiros passos com a depuração do JavaScript no Chrome DevTools para aprender o básico de depuração.
Pause o código com breakpoints
Defina um breakpoint para que você possa pausar seu código no meio de sua execução.
Consulte Pausar o código com pontos de interrupção para aprender como definir breakpoints.
Percorrer o código
Depois que seu código for pausado, passe por ele, uma linha por vez, investigando a estrutura de controle e os valores das propriedades ao longo do caminho.
Passe por uma linha de código
Quando pausado em uma linha de código que contém uma função que não é relevante
para o problema que você está depurando, clique em Step over
para executar a função sem entrar nela.
Por exemplo, suponha que você esteja depurando o seguinte código:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name); // D
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name; // C
}
Você está pausado em A
. Ao pressionar Step over, o DevTools executa todo o
código na função que você está passando, que é B
e C
. O DevTools faz então
uma pausa em D
.
Entre em uma linha de código
Quando pausado em uma linha de código que contém uma chamada de função
relacionada ao problema que você está depurando, clique em Step into
para investigar mais essa função.
Por exemplo, suponha que você esteja depurando o seguinte código:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name);
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name;
}
Você está pausado em A
. Ao pressionar Step into, o DevTools executa essa
linha de código, em seguida, faz uma pausa em B
.
Saia de uma linha de código
Quando estiver pausado em uma função que não está relacionada ao problema que
você está depurando, clique em Step out
para executar o restante do código da função.
Por exemplo, suponha que você está depurando o seguinte código:
function updateHeader() {
var day = new Date().getDay();
var name = getName();
updateName(name); // C
}
function getName() {
var name = app.first + ' ' + app.last; // A
return name; // B
}
Você está pausado A
. Pressionando Step out, o DevTools executa o restante
do código em getName()
, que neste exemplo é apenas B
, em seguida, faz uma
pausa em C
.
Executar todo o código até uma determinada linha
Ao depurar uma função longa, pode haver muito código que não está relacionado ao problema que você está depurando.
Você poderia percorrer todas as linhas, mas isso pode ser entediante. Você pode definir um breakpoint na linha em que está interessado e, em seguida, pressionar Resume Script Execution ![Resume Script Execution][resume]{:.devtools-inline}, porém há um caminho mais rápido.
Clique com o botão direito na linha de código em que você está interessado e selecione Continue to here. O DevTools executa todo o código até esse ponto e, em seguida, faz uma pausa nessa linha.

Reinicie a função principal na pilha de chamadas
Enquanto estiver em pausa numa linha de código, clique com o botão direito do mouse em qualquer lugar no painel Call Stack e selecione Restart Frame para pausar na primeira linha da função principal em sua pilha de chamadas. A função que estiver acima é a última função que foi chamada.
Por exemplo, suponha que você esteja percorrendo o seguinte código:
function factorial(n) {
var product = 0; // B
for (var i = 1; i <= n; i++) {
product += i;
}
return product; // A
}
Você está pausado em A
. Depois de clicar em Restart Frame, você seria
pausado em B
, sem precisar definir um breakpoint ou pressionar Resume script
execution.

Retomar a execução do script
Para continuar a execução de seu script após uma pausa, clique em Resume Script Execution ![Resume Script Execution][resume]{:.devtools-inline}. O DevTools executa o script até o próximo breakpoint, se houver.
Forçar a execução de um script
Para ignorar todos os breakpoints e forçar o seu script a retomar a execução,
clique e mantenha em Resume Script Execution ![Resume Script
Execution][resume]{:.devtools-inline} e selecione Force script execution .

Alterar o contexto de thread
Ao trabalhar com web workers ou service workers, clique em um contexto listado no painel Threads para alternar para esse contexto. O ícone da seta azul representa qual contexto está selecionado no momento.
Por exemplo, suponha que você está pausado em um breakpoint no script principal e em um script do service worker. Você deseja visualizar as propriedades locais e globais para o contexto do service worker, mas o painel Sources está mostrando o contexto do script principal. Ao clicar em service worker no painel Threads, você poderá alternar para esse contexto.
Visualize e edite propriedades locais, globais e closures
Enquanto pausado em uma linha de código, use o painel Scope para visualizar e editar os valores de propriedades e variáveis nos escopos local, global e closures.
- Clique duas vezes em um valor de propriedade para alterá-lo.
- Propriedades não enumeráveis são ignoradas.
Veja a atual pilha de chamadas
Enquanto pausado em uma linha de código, use o painel Call Stack para visualizar a pilha de chamadas que o levou até este ponto.
Se você estiver trabalhando com código assíncrono, marque o parâmetro Async para habilitar as pilhas de chamadas assíncronas.
Clique em uma linha da pilha para ir a linha de código da qual essa função foi chamada. O ícone da seta azul representa qual função que o DevTools está destacando no momento.
Nota: Quando não estiver em pausa numa linha de código, o painel Call Stack estará vazio.