Descubra novos fluxos de trabalho de depuração com esta referência abrangente dos recursos de depuração do Chrome DevTools.
Consulte Primeiras etapas com a depuração do JavaScript no Chrome DevTools para aprender os princípios básicos da depuração.
Pausar código com pontos de interrupção
Defina um ponto de interrupção para que você possa pausar seu código no meio da execução. Para saber como definir pontos de interrupção, consulte Pausar seu código com pontos de interrupção.
Verificar os 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.
Use o Console para consultar as variáveis, as constantes e os objetos avaliados.
Visualizar propriedades de classe/função 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, passe por ele, uma expressão de cada vez, investigando o fluxo de controle e os valores das propriedades ao longo do caminho.
Percorrer a linha de código
Quando estiver pausado em uma linha de código contendo uma função 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á substituindo, que é B
e C
. O DevTools pausa em D
.
Entrar na linha de código
Quando estiver pausada em uma linha de código que contém uma chamada de função relacionada ao problema que você está depurando, clique em Entrar 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 e faz uma pausa em
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 Step out para executar o restante do 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 em
getName()
, que é apenas B
neste exemplo, e depois 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 não relacionado ao problema que você está depurando.
Você poderia percorrer todas as linhas, mas isso pode ser tedioso. É possível definir um ponto de interrupção de linha de código na linha em que você tem interesse e pressionar Resume Script Execution , mas há uma maneira mais rápida.
Clique com o botão direito do mouse na linha de código em que você tem interesse e selecione Continuar aqui. O DevTools executa todo o código até esse ponto e faz uma pausa nessa linha.
Retomar a execução do script
Para continuar a execução do script após uma pausa, clique em Retomar a 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 o script a retomar a execução, clique e mantenha pressionado Resume Script Execution e selecione Forçar execução de script .
Mudar o contexto da conversa
Ao trabalhar com Web workers ou service workers, clique em um contexto listado no painel Threads para alternar para ele. 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 script do service worker. Você quer visualizar as propriedades locais e globais do contexto do service worker, mas o painel "Origens" está mostrando o contexto do script principal. Ao clicar na entrada do service worker no painel "Threads", você poderá alternar para esse contexto.
Percorrer expressões separadas por vírgula
Percorrer expressões separadas por vírgulas permite depurar o código minificado. Por exemplo, considere este 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 de passos é idêntico:
- Entre o código minificado e criado.
- Ao usar mapas de origem para depurar o código minimizado em termos do código original. Em outras palavras, quando você vê ponto e vírgula, pode esperar percorrê-los mesmo que a fonte real que você está depurando seja reduzida.
Consultar e editar propriedades locais, interditadas e globais
Enquanto estiver pausado 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 fazer mudanças.
- As propriedades não enumeráveis estão esmaecidas.
O painel Escopo na captura de tela acima está destacado em azul.
Conferir a pilha de chamadas atual
Enquanto estiver pausado em uma linha de código, use o painel Call Stack para conferir a pilha de chamadas que levou você a esse ponto.
Clique em uma entrada para pular 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 no momento.
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, reinicie a execução de uma única função quando ela estiver pausada. Em outras palavras, você pode reiniciar o frame da função na pilha de chamadas.
Para reiniciar um frame:
- Pausar a execução da função em um ponto de interrupção. O painel Pilha de chamadas registra a ordem das chamadas de função.
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 a opção Reiniciar frame funciona, considere este 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, registra e chama a função bar()
. A função bar()
, por sua vez, incrementa o argumento.
Tente reiniciar os frames de ambas as funções da seguinte maneira:
- Copie o código acima em um novo snippet e execute-o. A execução é interrompida no ponto de interrupção da linha de código
debugger
. - O depurador mostra o valor atual ao lado da declaração da função:
value = 1
. - Reinicie o frame
bar()
. - Percorra a instrução de incremento de valor pressionando
F9
. O valor atual aumenta:value = 2
. - Se quiser, no painel Escopo, clique duas vezes no valor para editá-lo e definir o valor desejado.
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, ela simplesmente move o ponteiro de execução para o início da função.
Portanto, o valor do argumento atual persiste na memória durante as reinicializações da mesma função.
- Agora, reinicie o frame
foo()
na Call Stack. Observe que o valor é0
novamente.
Em JavaScript, as mudanças nos argumentos não são visíveis (refletidas) fora da função. As funções aninhadas recebem valores, não as localizações 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 relevantes para seu código e omite os scripts adicionados a Settings > Ignore List.
Para conferir a pilha de chamadas completa, incluindo frames de terceiros, ative Mostrar frames na lista de ignorados na seção Pilha de chamadas.
Teste nesta página de demonstração:
- No painel Sources, abra o arquivo
src
>app
>app.component.ts
. - Defina um ponto de interrupção na função
increment()
. - Na seção Pilha de chamadas, marque ou desmarque a caixa de seleção Mostrar frames na lista de ignorados e observe a lista de frames relevante ou completa na pilha de chamadas.
Conferir frames assíncronos
Se o framework que você está usando for compatível, o DevTools poderá rastrear operações assíncronas vinculando as duas partes do código assíncrono.
Nesse caso, a pilha de chamadas mostra todo o histórico de chamadas, incluindo os frames de chamadas assíncronas.
Copiar stack trace
Clique com o botão direito do mouse em qualquer lugar no painel Call Stack e selecione Copy stack trace para copiar a pilha de chamadas 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 Página para navegar pela á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 minimizados gerados pelas ferramentas de build (por exemplo, webpack ou Vite).
Para ajudar você a navegar pelas fontes, o painel Origens > Página agrupa os arquivos em duas categorias:
- Criado. Semelhantes 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 compilação.
- Implantado. Os arquivos reais que o navegador lê. Normalmente, esses arquivos são minimizados.
Para ativar o agrupamento, ative a opção > Agrupar arquivos por autor/implantado no menu de três pontos na parte de cima da árvore de arquivos.
Ocultar origens da lista de ignorados da árvore de arquivos
Para ajudar você a se concentrar apenas no código criado, o painel Fontes > 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 Fontes > Página > > Ocultar fontes da lista de ignorados .
Ignorar um script ou padrão de scripts
Ignore um script para pulá-lo durante a depuração. Quando ignorado, um script fica oculto no painel Call Stack, e você nunca entra nas funções do script quando passa pelo 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ê tiver certeza de que o problema que está depurando
não está relacionado à biblioteca de terceiros, faz sentido ignorar o script.
Ignorar um script ou um diretório da árvore de arquivos
Para ignorar um script específico ou um diretório inteiro:
- Em Origens > Página, clique com o botão direito do mouse em um diretório ou arquivo de script.
- Selecione Adicionar diretório/script para ignorar a lista.
Se você não ocultou fontes ignoradas, é possível selecioná-las na árvore de arquivos e, no banner de aviso , clicar em Remover da lista de ignorados ou em Configurar.
Caso contrário, é possível remover diretórios e scripts ocultos e ignorados da lista em Configurações > Lista de ignorados.
Ignorar um script no painel do Editor
Para ignorar um script no painel Editor, siga estas etapas:
- Abra o arquivo.
- Clique com o botão direito do mouse em qualquer lugar.
- Selecione Adicionar um script para ignorar a lista.
É possível remover um script da lista de ignorados em Configurações > Lista de ignorados.
Ignorar um script no painel "Pilha de chamadas"
Para ignorar um script no painel Pilha de chamadas:
- Clique com o botão direito do mouse em uma função do script.
- Selecione Adicionar um script para ignorar a lista.
É possível remover um script da lista de ignorados em Configurações > Lista de ignorados.
Ignorar um script nas Configurações
Consulte Configurações > Lista de ignorados.
Executar snippets de código de depuração em qualquer página
Se você executar o mesmo código de depuração no Console várias vezes, considere usar 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.
Observar os valores das expressões JavaScript personalizadas
Use o painel "Assistir" para observar os valores das expressões personalizadas. É possível observar qualquer expressão JavaScript válida.
- Clique em Add Expression para criar uma nova expressão de observação.
- Clique em Refresh 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í-la.
Inspecionar e editar scripts
Quando você abre um script no painel Page, o DevTools mostra o conteúdo no painel Editor. No painel Editor, é possível procurar e editar o código.
Além disso, é possível substituir o conteúdo localmente ou criar um espaço de trabalho e salvar as mudanças feitas no DevTools diretamente nas fontes locais.
Tornar um arquivo reduzido legível
Por padrão, o painel Origens filtra os arquivos reduzidos. No estilo de formatação, 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 ver o arquivo minificado conforme ele 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 em {...}
ao lado dele.
Para configurar esse comportamento, consulte Configurações > Preferências > Fontes.
Editar um script
Ao corrigir um bug, é recomendável testar algumas alterações no seu código JavaScript. Não é necessário fazer as alterações em um navegador externo e atualizar a página. É possível editar o script no DevTools.
Para editar um script:
- Abra o arquivo no painel Editor do painel Sources.
- Faça as mudanças no painel Editor.
Pressione Command+S (Mac) ou Ctrl+S (Windows e Linux) para salvar. O DevTools corrige 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 em tempo real
Enquanto a execução está pausada, é possível editar a função atual e aplicar as alterações em tempo real com as seguintes limitações:
- Você só pode editar a função de nível mais alto 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:
- Pause a execução com um ponto de interrupção.
- Edite a função pausada.
- Pressione Command / Control + S para aplicar as mudanças. O depurador reinicia a função automaticamente.
- Continuar a execução.
Assista o vídeo abaixo para conhecer esse fluxo de trabalho.
Neste exemplo, as variáveis addend1
e addend2
inicialmente têm um tipo string
incorreto. Portanto, em vez de adicionar números, as strings são concatenadas. Para corrigir o problema, 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:
- Abra o arquivo no painel Editor do painel Sources.
- Para abrir uma barra de pesquisa integrada, pressione Command+F (Mac) ou Ctrl+F (Windows e Linux).
- Na barra, digite sua consulta.
Você também pode 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 usando uma expressão RegEx.
- Pressione Enter. Para voltar ao resultado anterior ou ao próximo, pressione o botão para cima ou para baixo.
Para substituir o texto encontrado:
- Na barra de pesquisa, clique no botão Substituir.
- Digite o texto e clique em Substituir ou Substituir tudo.