Referência de como depurar JavaScript

By Kayce Basques

Technical Writer, Chrome DevTools & Lighthouse

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.

Figura 1. Step over, destacado em azul

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.

Figura 2. Step into, destacado em azul

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.

Figura 3. Step out, destacado em azul

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.

Figura 4. Seleção de Continue to here

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.

Figura 5. Seleção de Restart Frame

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.

Figura 6. Resume script execution, destacado em azul

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 .

Figure 7. Seleção de 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.

Figura 8. O painel Threads, destacado em azul

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.

Figura 9. O painel Scope, destacado em azul

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.

Figura 10. O painel Call Stack, destacado em azul

Nota: Quando não estiver em pausa numa linha de código, o painel Call Stack estará vazio.

Copiar o rastreamento de pilha