Recursos de depuração do JavaScript

Este artigo aborda como usar os recursos de depurador no Microsoft Edge DevTools, incluindo como definir um ponto de interrupção de linha de código.

Veja também:

• Introdução à depuração do JavaScript – passo a passo do tutorial.
• Pausar o código com pontos de interrupção – configurando vários tipos de pontos de interrupção.

Exibir e editar código JavaScript

Ao corrigir um bug, muitas vezes você deseja experimentar algumas alterações no código JavaScript. Você não precisa fazer as alterações em um editor externo ou IDE, carregar novamente o arquivo no servidor e atualizar a página; Em vez disso, para testar alterações, você pode editar seu código JavaScript diretamente em DevTools e ver o resultado imediatamente.

Para exibir e editar um arquivo JavaScript:

1. Abra a página da Web que você deseja depurar em uma nova janela ou guia. Você pode usar a página de demonstração Depuração de JavaScript de Introdução .

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). DevTools é aberto.

3. Em DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

4. No painel Navegador, selecione o arquivo que você deseja alterar para abri-lo no painel Editor. Se você estiver usando a página de demonstração, selecione get-started.js.

5. No painel Editor, edite o arquivo. Por exemplo, adicione alert("The add button was clicked"); a onClick função da página de demonstração.

6. Pressione Ctrl+S (Windows, Linux) ou Command+S (macOS) para salvar. O DevTools carrega o arquivo JavaScript no mecanismo JavaScript do Microsoft Edge e as alterações entram em vigor imediatamente.

   

7. Teste a alteração. Por exemplo, clique no botão Adicionar Número 1 e Número 2 na página de demonstração. O alerta é exibido.

A alteração feita no DevTools é útil para testar rapidamente uma correção de bug, mas é temporária. Para tornar a alteração permanente, você precisa fazer a alteração no código-fonte e, em seguida, recarregar o arquivo para o servidor.

Explicar o código-fonte usando Copilot no Edge

Ao inspecionar uma página da Web, talvez você queira mais informações sobre o código-fonte exibido na ferramenta Fontes . Ao usar o recurso Explicar essas linhas de código , você obtém mais informações sobre o código-fonte no Copilot no Edge:

Para saber mais sobre esse recurso, consulte Explicar o código-fonte usando Copilot no Edge.

Reformat um arquivo JavaScript minificado com uma impressão bonita

Para tornar um arquivo minificado legível pelo homem, clique no botão Formatar () na parte inferior do painel Editor.

Defina um ponto de interrupção para pausar o código

Para pausar o código no meio do runtime, defina um ponto de interrupção. O tipo mais básico e conhecido de ponto de interrupção é um ponto 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 na linha de código especificada antes de executá-lo.

Para definir um ponto de interrupção de linha de código:

1. Abra a página da Web que você deseja depurar em uma nova janela ou guia. Você pode usar a página de demonstração Depuração de JavaScript de Introdução .

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). DevTools é aberto.

3. Em DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

4. No painel Navegador , selecione o arquivo que contém a linha de código que você deseja depurar. Se você estiver usando a página de demonstração, selecione get-started.js.

5. Clique na área à esquerda do número da linha para a linha de código. Ou clique com o botão direito do mouse no número da linha e selecione Adicionar ponto de interrupção.

   Em seguida, um círculo vermelho aparece ao lado do número da linha, indicando um ponto de interrupção:

   

Os pontos de interrupção de linha de código às vezes podem ser ineficientes de definir, especialmente se você não sabe exatamente onde procurar ou se sua base de código é grande. Para economizar tempo ao depurar, saiba como e quando usar os outros tipos de pontos de interrupção. Consulte Pausar código com pontos de interrupção.

Passo a passo pelo código

Depois que o código for pausado em um ponto de interrupção, passe pelo código, uma linha por vez, investigando o fluxo de controle e os valores da propriedade ao longo do caminho. Para saber como pausar em um ponto de interrupção, consulte Definir um ponto de interrupção, para pausar o código, acima.

Passar por cima de 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 no botão Passo a passo para executar a função sem entrar nela.

Por exemplo, suponha que você esteja depurando o seguinte snippet de código:

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2(); // B
    var sum = addend1 + addend2; // C
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value;
}
function getNumber2() {
    return inputs[1].value;
}

Você está pausado em A. Depois de clicar em Passo a Passo, o DevTools executa todo o código na getNumber1() função e, em seguida, pausa em B. Se você clicar em Avançar novamente, o DevTools executará todo o código na getNumber2() função e fará uma pausa em C.

Entrar 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 no botão Entrar () para investigar ainda mais essa função:

Por exemplo, suponha que você esteja depurando o seguinte código:

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2();
    var sum = addend1 + addend2;
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value; // B
}
function getNumber2() {
    return inputs[1].value;
}

Você está pausado em A. Depois de clicar em Entrar, o DevTools executa essa linha de código e, em seguida, pausa em B.

Sair de uma linha de código

Quando pausado dentro de uma função que não está relacionada ao problema que você está depurando, clique no botão Sair () para executar o restante do código da função.

Por exemplo, suponha que você esteja depurando o seguinte código:

function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = "Error: one or both inputs are empty."; // B
    return;
  }

  updateLabel(); // C
}
function inputsAreEmpty() {
  if (getNumber1() === "" || getNumber2() === "") { // A
    return true;
  } else {
    return false;
  }
}

Você está pausado em A. Depois de clicar em Sair, o DevTools executa o restante do código em e, em inputsAreEmpty()seguida, pausa B se inputsAreEmpty retornado trueou pausa em C caso contrário.

Executar todo o código até uma linha específica

Ao depurar uma função longa, pode haver um monte de código que não está relacionado ao problema que você está depurando.

• Você pode percorrer todas as linhas da função, uma a uma, clicando no botão Passo a passo () muitas vezes.

• Um pouco melhor, você pode definir um ponto de interrupção de linha de código na linha na qual você está interessado e, em seguida, clicar no botão Retomar execução de script ().

• Mas há uma maneira mais rápida: clique com o botão direito do mouse na linha de código e selecione Continuar até aqui:

  

  O DevTools executa todo o código até esse ponto e, em seguida, pausa nessa linha.

Reiniciar a função superior da pilha de chamadas

Para pausar na primeira linha da função superior na pilha de chamadas, enquanto pausado em uma linha de código, clique com o botão direito do mouse no painel Pilha de Chamadas e selecione Reiniciar quadro. A função superior é a última função que foi executada.

O código a seguir é um exemplo para você percorrer:

function updateLabel() {
  var addend1 = getNumber1(); // B
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + " + " + addend2 + " = " + sum; // A
}

Você está pausado em A. Depois de selecionar Reiniciar quadro, você será pausado em B, sem precisar definir um ponto de interrupção nessa linha e escolher Retomar execução de script.

Retomar a execução do script

Para continuar o runtime após uma pausa do script, clique no botão Retomar execução de script (). O DevTools executa o script até o próximo ponto de interrupção, se houver.

Forçar a execução do script

Para ignorar todos os pontos de interrupção e forçar seu script a continuar a ser executado, clique e segure o botão Retomar execução de script () e clique no botão Forçar execução de script (execução).

Alterar o contexto do thread

Ao trabalhar com trabalhadores da Web ou trabalhadores de serviço, clique em um contexto listado no painel Threads para alternar para esse contexto. O ícone de seta azul representa qual contexto está selecionado no momento:

Por exemplo, suponha que você esteja pausado em um ponto de interrupção no script main e no script do trabalho de serviço. Você deseja exibir as propriedades locais e globais para o contexto do trabalho de serviço, mas a ferramenta Sources está mostrando o contexto de script main. Para alternar para o contexto do trabalho de serviço, no painel Threads , clique na entrada do trabalho de serviço.

Exibir e editar propriedades e variáveis

Enquanto pausado em uma linha de código, use o painel Escopo para exibir e editar os valores de propriedades e variáveis nos escopos local, de fechamento e global.

• Clique duas vezes em um valor de propriedade para alterá-lo.
• As propriedades não enumeráveis são acinzentadas.

Assista aos valores das expressões JavaScript

Use o painel Relógio para watch os valores das expressões personalizadas. Você pode watch qualquer expressão JavaScript válida.

• Para criar uma nova expressão watch, clique no botão Adicionar expressão watch ().

• Para atualizar os valores de todas as expressões existentes, clique no botão Atualizar (). Os valores são atualizados automaticamente durante a passagem do código.

• Para excluir uma expressão watch, clique com o botão direito do mouse na expressão e selecione Excluir watch expressão.

Exibir a pilha de chamadas

Enquanto pausado em uma linha de código, use o painel Pilha de Chamadas para exibir a pilha de chamadas que o levou a este ponto.

Clique em uma entrada para pular para a linha de código em que essa função foi chamada. O ícone de seta azul representa qual função DevTools está realçando:

Observação

Quando não pausado em uma linha de código, o painel Pilha de Chamadas fica vazio.

Copiar um rastreamento de pilha

Para copiar a pilha de chamadas atual para a área de transferência, clique com o botão direito do mouse no painel Pilha de Chamadas e selecione Copiar rastreamento de pilha:

O código a seguir é um exemplo da saída:

getNumber2 (get-started.js:40)
inputsAreEmpty (get-started.js:24)
onClick (get-started.js:16)

Ignorar um script ou um padrão de scripts

Para ignorar um script durante a depuração, adicione o script à Lista ignorar. Quando um script é incluído na Lista ignorar, o script é obscurecido no painel Pilha de Chamadas e você nunca entra nas funções do script ao passar pelo código.

Por exemplo, no snippet de código a seguir, a linha A usa lib, que é uma biblioteca de terceiros. Se você estiver confiante de que o problema que você está depurando não está relacionado a essa biblioteca de terceiros, então faz sentido adicionar o script à Lista de Ignorar:

function animate() {
    prepare();
    lib.doFancyStuff(); // A
    render();
}

Adicionar um script à Lista de Ignorar do painel Editor

Para adicionar um script à Lista ignorar do painel Editor:

1. Abra o arquivo.

2. Clique com o botão direito do mouse em qualquer lugar do arquivo e selecione Adicionar script para ignorar a lista:

   

Adicionar um script à Lista de Ignorar do painel Pilha de Chamadas

Para adicionar um script à Lista ignorar do painel Pilha de Chamadas :

• Pausar o código em um ponto de interrupção.

• Clique com o botão direito do mouse em uma função no painel Pilha de Chamadas e selecione Adicionar script para ignorar a lista:

  

Adicionar um script à Lista de Ignorar das Configurações

Para adicionar um único script ou um padrão de scripts à Lista Ignorar de Configurações:

1. Para abrir Configurações, em DevTools, clique no ícone Personalizar e controlar DevTools () e clique em Configurações (). Ou, enquanto DevTools tem foco, pressione F1.

2. Navegue até a página Ignorar Lista de Configurações.

   

3. Clique no botão Adicionar padrão . Um padrão sugerido é mostrado: /framework\.js$

4. Insira o nome do script ou um padrão regex de nomes de script para adicionar à Lista de Ignorar.

5. Clique no botão Adicionar.

Executar snippets do código de depuração de qualquer página

Se você se encontrar executando o mesmo código de depuração na ferramenta Console uma e outra vez, considere usar snippets. Snippets são scripts de runtime que você cria, armazena e executa no DevTools.

Consulte Executar snippets do JavaScript em qualquer página da Web.

Usar # sourceURL para nomear código avaliado e embutido em DevTools

Para criar um bloco de código que não seja um arquivo, tenha um nome de arquivo em todo o DevTools, inclusive na ferramenta Fontes , use o # sourceURL pragma em um comentário.

Os blocos de código que não são arquivos incluem:

• Código JavaScript que é executado usando a eval() função.
• Código JavaScript que está em uma <script> marca.
• Código CSS que está em uma <style> marca.

Quando o navegador executa os tipos de código acima, o DevTools não tem um nome de arquivo para exibir esses blocos de código e os blocos de código recebem nomes genéricos ou não aparecem.

Os nomes de arquivo são exibidos em toda a interface do usuário de DevTools, como nos seguintes locais:

• O painel Navegador da ferramenta Fontes .
• A Pilha de Chamadas no painel Depurador da ferramenta Fontes .
• A guia do arquivo no painel Editor da ferramenta Fontes.
• Mensagens de log, aviso e erro na ferramenta Console .
• O gráfico de chamas na ferramenta Desempenho .

O # sourceURL pragma, com sintaxe //# sourceURL=my-assigned-file-name.js ou /*# sourceURL=my-assigned-file-name.css*/, é um comentário especial que fornece ao código avaliado e embutido um nome de arquivo virtual em devTools.

Use o # sourceURL pragma para dar um nome de arquivo virtual a blocos de código que não são arquivos, para exibir esse nome de arquivo na ferramenta Fontes e em todo o DevTools. Por exemplo:

• Para JavaScript:

  function sum(a, b) {
    return a + b;
  }
  
  console.log(sum(1, 2));
  
  //# sourceURL=math-utilities.js
  

• Para CSS:

  .card {
    padding: 1rem;
    border-radius: 0.5rem;
  }
  
  /*# sourceURL=card-styles.css*/
  

Como resultado, o DevTools exibe esses blocos de código, juntamente com os nomes de arquivo virtual especificados para eles (math-utilities.js e card-styles.css):

Confira também

• Introdução à depuração do JavaScript – um tutorial simples e curto usando o código existente, com capturas de tela.
• Visão geral da ferramenta de fontes – A ferramenta Sources inclui o depurador e o editor javaScript.
• Desabilitar 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.