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 seu código com pontos de interrupção , definindo vários tipos de pontos de interrupção.

Exibir e editar o código JavaScript

Ao corrigir um bug, muitas vezes você deseja experimentar algumas alterações em seu código JavaScript. Você não precisa fazer as alterações em um editor externo ou IDE, recarregar o arquivo no servidor e atualizar a página; em vez disso, para testar as alterações, você pode editar seu código JavaScript diretamente no 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 Introdução à Depuração do JavaScript .

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). O DevTools é aberto.

3. No 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. Em seguida, 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 recarregar o arquivo no servidor.

Explique o código-fonte usando o Copilot no Edge

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

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

Reformatar um arquivo JavaScript minificado com pretty-print

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

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

Para pausar seu 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 de código que precisa investigar. O DevTools sempre 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 Introdução à Depuração do JavaScript .

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). O DevTools é aberto.

3. No 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 de código. Ou clique com o botão direito do mouse no número da linha e selecione Adicionar ponto de interrupção.

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

   

Às vezes, os pontos de interrupção de linha de código podem ser ineficientes de definir, especialmente se você não souber exatamente onde procurar ou se sua base de código for grande. Para economizar tempo durante a depuração, 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 no código

Depois que o código for pausado em um ponto de interrupção, percorra o código, uma linha de cada vez, investigando o fluxo de controle e os valores de 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 Depurar () para executar a função sem depurá-la.

Por exemplo, suponha que você esteja depurando o seguinte trecho 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 Depuração, o getNumber1() DevTools executa todo o código na função e, em seguida, pausa em B. Se você clicar em Depuração novamente , o DevTools executará todo o getNumber2() código na função e, em seguida, pausará 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 Depuração total 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 Depuração, o DevTools executa essa linha de código e faz uma 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 faz uma pausa se BinputsAreEmpty()inputsAreEmpty retornado trueou pausa caso C contrário.

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

Ao depurar uma função longa, pode haver muito 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 várias vezes no botão Passar por .

• Um pouco melhor, você pode definir um ponto de interrupção de linha de código na linha em que está interessado e 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 aqui:

  

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

Reiniciar a função superior da pilha de chamadas

Para pausar na primeira linha da função superior da pilha de chamadas, enquanto estiver em pausa 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 top é a última função executada.

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

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 do script.

Retomar execução do script

Para continuar o tempo de execução após uma pausa do script, clique no botão Retomar execução do 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 a continuação da execução do script, clique e segure o botão Retomar execução do script () e, em seguida, clique no botão Forçar execução do script ().

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 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 principal e no script de trabalho de serviço. Você deseja exibir as propriedades locais e globais para o contexto de trabalho de serviço, mas a ferramenta Fontes está mostrando o contexto principal do script. Para alternar para o contexto de trabalho de serviço, no painel Threads , clique na entrada de trabalho de serviço.

Exibir e editar propriedades e variáveis

Enquanto estiver em pausa em uma linha de código, use o painel Escopo para visualizar 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 ficam esmaecidas.

Observe os valores das expressões JavaScript

Use o painel Inspeção para observar os valores de expressões personalizadas. Você pode observar qualquer expressão JavaScript válida.

• Para criar uma nova expressão de relógio, clique no botão Adicionar expressão de relógio ().

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

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

Exibir a pilha de chamadas

Enquanto estiver em pausa em uma linha de código, use o painel Pilha de Chamadas para exibir a pilha de chamadas que o levou até aqui.

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

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 padrão de scripts

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

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

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

Adicionar um script à Lista de Ignorados no painel Editor

Para adicionar um script à Lista de Ignorados no painel Editor :

1. Abra o arquivo.

2. Clique com o botão direito do mouse em qualquer lugar do arquivo e selecione Adicionar script à lista de ignoros:

   

Adicionar um script à Lista de Ignorados no painel Pilha de Chamadas

Para adicionar um script à Lista de Ignorados no painel Pilha de Chamadas :

• Pausar 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 à lista de ignorados:

  

Adicionar um script à Lista de Ignorados nas Configurações

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

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

2. Navegue até a página de configurações da lista de ignorados.

   

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

5. Clique no botão Adicionar.

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

Se você estiver executando o mesmo código de depuração na ferramenta Console várias vezes, considere o uso de trechos. Snippets são scripts de tempo de execução que você cria, armazena e executa no DevTools.

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

Use # sourceURL para nomear código avaliado e embutido no DevTools

Para fazer com que 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 pragma # sourceURL 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 do 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 .
• Registrar mensagens de aviso e de erro na ferramenta Console .
• O gráfico de degradê 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 todo o DevTools.

Use o pragma # sourceURL para fornecer um nome de arquivo virtual para 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 breve usando código existente, com capturas de tela.
• Visão geral da ferramenta Fontes – A ferramenta Fontes inclui o depurador e editor JavaScript.
• Desabilite o JavaScript.

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.