Referência da depuração do JavaScript

Kayce Basques

Sofia Emelianova

Descubra novos fluxos de trabalho de depuração com esta referência abrangente da depuração do Chrome DevTools atributos de machine learning.

Consulte Introdução à depuração de JavaScript no Chrome DevTools para aprender os conceitos básicos da depuração.

Pausar código com pontos de interrupção

Defina um ponto de interrupção para pausar o código no meio da execução. Para aprender a definir pontos de interrupção, consulte Pausar seu código com pontos de interrupção.

Verificar valores quando pausado

Enquanto a execução é pausada, o depurador avalia todas as variáveis, constantes e objetos na função atual até um ponto de interrupção. O depurador mostra os valores atuais inline ao lado das declarações correspondentes.

É possível usar o Console para consultar as variáveis, constantes e objetos avaliados.

Visualizar propriedades de classes/funções ao passar o cursor

Enquanto a execução estiver pausada, passe o cursor sobre o nome de uma classe ou função para visualizar as propriedades dela.

Percorrer o código

Depois que seu código estiver pausado, percorra-o, uma expressão por vez, investigando o fluxo de controle e os valores de propriedade ao longo do caminho.

Pular linha de código

Quando pausado em uma linha de código contendo uma função que não é relevante para o problema, você está depuração, clique em Step over para executar a função. sem tomar nenhuma medida.

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á caminhando, que são B e C. Em seguida, o DevTools é pausado em D.

Entrar na 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á depuração, clique em Entrar para investigar essa função mais adiante.

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 Entrar, o DevTools executa essa linha de código e pausa B

Sair da linha de código

Quando pausado dentro de uma função que não está relacionada ao problema que você está depurando, clique em Etapa usando para executar o restante no código da função.

Por exemplo, suponha que você esteja 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 em A. Ao pressionar Step out, o DevTools executa o restante do código getName(), que é apenas B neste exemplo e, em seguida, 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 esteja relacionado ao problema depuração.

Você poderia percorrer todas as linhas, mas isso pode ser entediante. Você poderia definir uma linha de código ponto de interrupção na linha em que você está interessado e depois pressione Resume Script Execution , mas existe um jeito mais rápido.

Clique com o botão direito do mouse na linha de código em que você tem interesse e selecione Continuar até aqui. DevTools executa todo o código até aquele ponto e pausa nessa linha.

Retomar a execução do script

Para continuar a execução do script após uma pausa, clique em Retomar execução do script. 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 o seu script a retomar a execução, clique e mantenha pressionado o botão Resume Script Execução e selecione Forçar execução do script. .

Mudar o contexto da conversa

Ao trabalhar com web workers ou service workers, clique em um contexto listado no painel Threads para mudar para esse contexto. O ícone de seta azul representa o contexto selecionado no momento.

O painel Threads na captura de tela acima está destacado em azul.

Por exemplo, suponha que você esteja pausado em um ponto de interrupção no script principal e no serviço script do worker. Você quer conferir as propriedades locais e globais do contexto do service worker, mas o painel Origens mostra o contexto do script principal. Ao clicar na entrada do service worker na no painel "Threads", alternar para esse contexto.

Percorrer expressões separadas por vírgulas

Percorrer expressões separadas por vírgulas permite depurar código minificado. Por exemplo, considere o seguinte código:

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

Quando reduzida, ela contém uma expressão foo(),foo(),42 separada por vírgulas:

function foo(){}function bar(){return foo(),foo(),42}bar();

O Debugger percorre essas expressões da mesma forma.

Portanto, o comportamento da etapa é idêntico:

• entre código minificado e criado;
• Ao usar mapas de origem para depurar o código reduzido em termos do código original. Em outras palavras, quando há pontos e vírgulas, é sempre possível passar por eles, mesmo que a fonte real que você está depurando esteja minificada.

Confira e edite propriedades locais, interdições e globais

Enquanto estiver 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, fechamento e global.

• Clique duas vezes em um valor de propriedade para mudá-lo.
• As propriedades não enumeráveis estão esmaecidas.

O painel Escopo na captura de tela acima está destacado em azul.

Ver a pilha de chamadas atual

Enquanto estiver pausado em uma linha de código, use o painel Call Stack para visualizar a pilha de chamadas que resultou em você. ponto

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

O painel Call Stack na captura de tela acima está destacado em azul.

Reiniciar uma função (frame) em uma pilha de chamadas

Para observar o comportamento de uma função e executá-la novamente sem precisar reiniciar todo o fluxo de depuração, você pode reiniciar a execução de uma única função quando ela estiver pausada. Em outras palavras, é possível reiniciar o frame da função na pilha de chamadas.

Para reiniciar um frame:

1. Pausar a execução da função em um ponto de interrupção. O painel Call Stack registra a ordem das chamadas de função.

2. No painel Call Stack, clique com o botão direito do mouse em uma função e selecione Restart frame no menu suspenso.

   

Para entender como Reiniciar frame funciona, considere o seguinte código:

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

A função foo() usa 0 como argumento, a registra e chama a função bar(). A função bar(), por sua vez, incrementa o argumento.

Tente reiniciar os frames das duas funções da seguinte maneira:

1. Copie o código acima em um novo snippet e execute-o. A execução é interrompida no ponto de interrupção de linha de código debugger.
2. O depurador mostra o valor atual ao lado da declaração da função: value = 1.
3. Reinicie o frame bar().
4. Percorra a instrução de incremento de valor pressionando F9. Observe que o valor atual aumenta: value = 2.
5. Opcionalmente, no painel Escopo, clique duas vezes no valor para editá-lo e definir uma opção.

6. Tente reiniciar o frame bar() e percorrer a instrução de incremento várias vezes. O valor continua aumentando.

A reinicialização do frame não redefine os argumentos. Em outras palavras, a reinicialização não restaura o estado inicial na chamada de função. Em vez disso, ele simplesmente move o ponteiro de execução para o início da função.

Portanto, o valor do argumento atual persiste na memória entre as reinicializações da mesma função.

1. Agora, reinicie o frame foo() na pilha de chamadas. Observe que o valor é 0 novamente.

Em JavaScript, as alterações em argumentos não são visíveis (refletidas) fora da função. As funções aninhadas recebem valores, não os locais na memória. 1. Retome a execução do script (F8) para concluir este tutorial.

Mostrar frames na lista de ignorados

Por padrão, o painel Call Stack mostra apenas os frames que são relevantes para seu código e omite os scripts adicionados a Settings >. Lista de ignorados.

Para acessar a pilha de chamadas completa, incluindo frames de terceiros, ative a opção Mostrar frames da lista de ignorados na seção Pilha de chamadas.

Confira nesta página de demonstração:

1. No painel Sources, abra src > app > app.component.ts.
2. Defina um ponto de interrupção na função increment().
3. Na seção Pilha de chamadas, marque ou desmarque a caixa de seleção Mostrar frames na lista de ignorados e observe a lista relevante ou completa de frames na pilha de chamadas.

Mostrar frames assíncronos

Se compatível com a biblioteca que você está usando, o DevTools pode rastrear as operações assíncronas vinculando as duas partes do código assíncrono.

Nesse caso, Call Stack mostra todo o histórico de chamadas, incluindo frames de chamadas assíncronas.

Copiar stack trace

Clique com o botão direito do mouse em qualquer lugar no painel Pilha de chamadas e selecione Copiar stack trace para copiar a chamada atual para a área de transferência.

Confira abaixo um exemplo da saída:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Navegar pela árvore de arquivos

Use o painel Page para navegar na árvore de arquivos.

Agrupar arquivos criados e implantados na árvore de arquivos

Ao desenvolver aplicativos da Web usando frameworks (por exemplo, React ou Angular), pode ser difícil navegar nas origens devido aos arquivos minificados gerados pelas ferramentas de build (por exemplo, webpack ou Vite).

Para ajudar você a navegar pelas fontes, em Fontes > O painel Page pode agrupar os arquivos em duas categorias:

• Criado. Semelhante aos arquivos de origem exibidos no ambiente de desenvolvimento integrado. O DevTools gera esses arquivos com base nos mapas de origem fornecidos pelas ferramentas de build.
• Implantado. Os arquivos que o navegador lê. Normalmente, esses arquivos são reduzidos.

Para ativar o agrupamento, ative > A opção Agrupar arquivos por Criado/implantado no menu de três pontos na parte de cima da árvore de arquivos.

Ocultar fontes da lista de ignorados da árvore de arquivos

Para ajudar você a se concentrar apenas no código criado, as guias Fontes > O painel Página esmaece todos os scripts ou diretórios adicionados a Configurações > Lista de ignorados por padrão.

Para ocultar esses scripts completamente, selecione Sources > Página > > Ocultar fontes na lista de ignorados .

Ignorar um script ou padrão de scripts

Ignorar um script para ignorá-lo durante a depuração. Quando ignorado, um script é ocultos no painel Pilha de chamadas, e você nunca entra nas funções do script quando passa pelo seu código.

Por exemplo, suponha que você esteja percorrendo este código:

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

A é uma biblioteca de terceiros confiável. Se você tem certeza de que o problema que está depurando não estiver relacionada à biblioteca de terceiros, faz sentido ignorar o script.

Ignorar um script ou diretório da árvore de arquivos

Para ignorar um script individual ou um diretório inteiro:

1. Em Fontes > Page, clique com o botão direito do mouse em um diretório ou arquivo de script.
2. Selecione Add directory/script to ignore list.

Se você não ocultou as origens na lista de ignorados, pode selecioná-las na árvore de arquivos e, no banner de aviso , clicar em Remover da lista de ignorados ou Configurar.

Caso contrário, remova diretórios e scripts ocultos e ignorados da lista em Configurações > Lista de ignorados.

Ignorar um script do painel Editor

Para ignorar um script do painel Editor:

1. Abra o arquivo.
2. Clique com o botão direito do mouse em qualquer lugar.
3. Selecione Adicionar script à lista de ignorados.

É possível remover um script da lista de ignorados de Configurações > Lista de ignorados.

Ignorar um script do painel "Pilha de chamadas"

Para ignorar um script do painel Pilha de chamadas:

1. Clique com o botão direito do mouse em uma função do script.
2. Selecione Adicionar script à lista de ignorados.

É possível remover um script da lista de ignorados de Configurações > Lista de ignorados.

Ignorar um script nas Configurações

Consulte as Configurações > Lista de ignorados.

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

Se você está executando o mesmo código de depuração no console repetidamente, use os snippets. Snippets são scripts executáveis que você cria, armazena e executa no DevTools.

Consulte Executar snippets de código em qualquer página para saber mais.

Observe os valores de expressões JavaScript personalizadas

Use o painel Watch para monitorar os valores das expressões personalizadas. É possível assistir a qualquer JavaScript válido expressão.

• Clique em Adicionar expressão. para criar uma nova expressão de observação.
• Clique em Atualizar para atualizar. os valores de todas as expressões existentes. Os valores são atualizados automaticamente ao percorrer o código.
• Passe o cursor sobre uma expressão e clique em Excluir expressão. para excluí-lo.

Inspecionar e editar scripts

Ao abrir um script no painel Página, o DevTools mostra o conteúdo dele no painel Editor. No painel Editor, procure e edite seu código.

Além disso, é possível substituir o conteúdo localmente ou criar um espaço de trabalho e salvar as alterações feitas no DevTools diretamente nas fontes locais.

Tornar um arquivo reduzido legível

Por padrão, o painel Origens mostra os arquivos minificados. Quando bem impresso, o Editor pode mostrar uma única linha de código longa em várias linhas, com - para indicar que é a continuação da linha.

Para conferir o arquivo minificado como foi carregado, clique em { } no canto inferior esquerdo do Editor.

Dobrar blocos de código

Para dobrar um bloco de código, passe o cursor sobre o número da linha na coluna à esquerda e clique em Recolher.

Para desdobrar o bloco de código, clique no {...} ao lado dele.

Para configurar esse comportamento, consulte Configurações > Preferências > Fontes.

Editar um script

Ao corrigir um bug, é comum querer testar algumas alterações no seu código JavaScript. Você não precisa para fazer as alterações em um navegador externo e depois atualize a página. Você pode editar seu script no do DevTools.

Para editar um script:

1. Abra o arquivo no painel Editor do painel Sources.
2. Faça as mudanças no painel Editor.

3. Pressione Command+S (Mac) ou Ctrl+S (Windows e Linux) para salvar. O DevTools aplica patches a todo o arquivo JS no mecanismo JavaScript do Chrome.

   

   O painel Editor na captura de tela acima está destacado em azul.

Editar uma função pausada ativa

Enquanto a execução estiver pausada, você pode editar a função atual e aplicar as alterações em tempo real com as seguintes limitações:

• Você pode editar apenas a função superior na pilha de chamadas.
• Não pode haver chamadas recursivas para a mesma função mais abaixo na pilha.

Para editar uma função em tempo real:

1. Pausar a execução com um ponto de interrupção.
2. Edite a função pausada.
3. Pressione Command / Control + S para aplicar as mudanças. O depurador reinicia a função automaticamente.
4. Continue a execução.

Assista ao vídeo abaixo para saber mais sobre esse fluxo de trabalho.

Neste exemplo, inicialmente as variáveis addend1 e addend2 têm um tipo string incorreto. Portanto, em vez de adicionar números, as strings são concatenadas. Para corrigir isso, as funções parseInt() são adicionadas durante a edição em tempo real.

Pesquisar e substituir texto em um script

Para pesquisar texto em um script:

1. Abra o arquivo no painel Editor do painel Sources.
2. Para abrir uma barra de pesquisa integrada, pressione Command+F (Mac) ou Ctrl+F (Windows e Linux).
3. Na barra, digite sua consulta. Também é possível fazer o seguinte:
   • Clique em Diferenciar maiúsculas de minúsculas para que sua consulta diferencie maiúsculas de minúsculas.
   • Clique em Usar expressão regular para pesquisar com uma expressão RegEx.
4. Pressione Enter. Para ir para o resultado da pesquisa anterior ou seguinte, pressione o botão para cima ou para baixo.

Para substituir o texto encontrado:

1. Na barra de pesquisa, clique no botão Substituir.
2. Digite o texto a ser substituído e clique em Substituir ou Substituir tudo.

Desativar JavaScript

Consulte Desativar o JavaScript com o Chrome DevTools.