Antes de escrever um código mais complexo, vamos falar sobre depuração.
A depuração é o processo de localização e correção de erros em um script. Todos os navegadores modernos e a maioria dos outros ambientes suportam ferramentas de depuração – uma UI especial em ferramentas de desenvolvedor que torna a depuração muito mais fácil. Também permite rastrear o código passo a passo para ver exatamente o que está acontecendo.
Estaremos usando o Chrome aqui, porque tem recursos suficientes, a maioria dos outros navegadores tem um processo semelhante.
Sua versão do Chrome pode parecer um pouco diferente, mas ainda assim deve ser óbvio o que está lá.
Abra a página de exemplo no Chrome.
Ative as ferramentas do desenvolvedor com F12 (Mac: Cmd + Opt + I ).
Selecione o painel Sources .
Aqui está o que você deve ver se estiver fazendo isso pela primeira vez:
O botão de alternância abre a guia com arquivos.
Vamos clicar nele e selecionar hello.js na visualização em árvore. Aqui está o que deve aparecer:
O painel Fontes tem 3 partes:
O painel File Navigator lista HTML, JavaScript, CSS e outros arquivos, incluindo imagens anexadas à página. As extensões do Chrome também podem aparecer aqui.
O painel Editor de código mostra o código-fonte.
O painel Depuração de JavaScript é para depuração, iremos explorá-lo em breve.
Agora você pode clicar no mesmo botão novamente para ocultar a lista de recursos e dar algum espaço ao código.
Se pressionarmos Esc , um console será aberto abaixo. Podemos digitar comandos lá e pressionar Enter para executar.
Depois que uma instrução é executada, seu resultado é mostrado abaixo.
Por exemplo, aqui 1+2 resulta em 3 , enquanto a chamada de função hello("debugger") não retorna nada, então o resultado é undefined :
Vamos examinar o que está acontecendo no código da página de exemplo. Em hello.js , clique na linha número 4 . Sim, diretamente nos 4 dígitos, não no código.
Parabéns! Você definiu um ponto de interrupção. Clique também no número da linha 8 .
Deve ficar assim (azul é onde você deve clicar):
Um ponto de interrupção é um ponto de código onde o depurador pausará automaticamente a execução do JavaScript.
Enquanto o código está pausado, podemos examinar as variáveis atuais, executar comandos no console, etc. Em outras palavras, podemos depurá-lo.
Sempre podemos encontrar uma lista de pontos de interrupção no painel direito. Isso é útil quando temos muitos pontos de interrupção em vários arquivos. Isso nos permite:
Salte rapidamente para o ponto de interrupção no código (clicando nele no painel direito).
Desative temporariamente o ponto de interrupção desmarcando-o.
Remova o ponto de interrupção clicando com o botão direito e selecionando Remover.
…E assim por diante.
Pontos de interrupção condicionais
Clique com o botão direito no número da linha para criar um ponto de interrupção condicional . Ele só é acionado quando a expressão fornecida, que você deve fornecer ao criá-la, é verdadeira.
Isso é útil quando precisamos parar apenas para um determinado valor de variável ou para determinados parâmetros de função.
Também podemos pausar o código usando o comando debugger nele, assim:
função olá(nome) {
deixe frase = `Olá, ${nome}!`;
depurador; // <-- o depurador para aqui
diga(frase);
}Este comando funciona apenas quando as ferramentas de desenvolvimento estão abertas, caso contrário o navegador o ignora.
Em nosso exemplo, hello() é chamado durante o carregamento da página, então a maneira mais fácil de ativar o depurador (depois de definirmos os pontos de interrupção) é recarregar a página. Então vamos pressionar F5 (Windows, Linux) ou Cmd + R (Mac).
À medida que o ponto de interrupção é definido, a execução é pausada na 4ª linha:
Abra os menus suspensos informativos à direita (rotulados com setas). Eles permitem examinar o estado atual do código:
Watch – mostra os valores atuais para qualquer expressão.
Você pode clicar no sinal de mais + e inserir uma expressão. O depurador mostrará seu valor, recalculando-o automaticamente no processo de execução.
Call Stack – mostra a cadeia de chamadas aninhadas.
No momento o depurador está dentro da chamada hello() , chamada por um script em index.html (não há função lá, então é chamado de “anônimo”).
Se você clicar em um item da pilha (por exemplo, “anônimo”), o depurador salta para o código correspondente e todas as suas variáveis também podem ser examinadas.
Scope – variáveis atuais.
Local mostra variáveis de função locais. Você também pode ver seus valores destacados logo acima da fonte.
Global possui variáveis globais (fora de qualquer função).
Também tem this palavra-chave aí que ainda não estudamos, mas faremos isso em breve.
Agora é hora de rastrear o script.
Existem botões para isso na parte superior do painel direito. Vamos envolvê-los.
– “Resume”: continua a execução, tecla de atalho F8 .
Retoma a execução. Se não houver pontos de interrupção adicionais, a execução continuará e o depurador perderá o controle.
Aqui está o que podemos ver depois de clicar nele:
A execução foi retomada, atingiu outro ponto de interrupção dentro de say() e pausou lá. Dê uma olhada na “Pilha de chamadas” à direita. Aumentou em mais uma ligação. Estamos dentro de say() agora.
– “Etapa”: execute o próximo comando, tecla de atalho F9 .
Execute a próxima instrução. Se clicarmos agora, alert será mostrado.
Clicar aqui repetidamente percorrerá todas as instruções do script, uma por uma.
– “Step over”: execute o próximo comando, mas não entre em uma função , tecla de atalho F10 .
Semelhante ao comando “Step” anterior, mas se comporta de maneira diferente se a próxima instrução for uma chamada de função (não uma função integrada, como alert , mas uma função própria).
Se os compararmos, o comando “Step” entra em uma chamada de função aninhada e pausa a execução em sua primeira linha, enquanto “Step over” executa a chamada de função aninhada de forma invisível para nós, ignorando os internos da função.
A execução é então pausada imediatamente após a chamada da função.
Isso é bom se não estivermos interessados em ver o que acontece dentro da chamada de função.
– “Entrar”, tecla de atalho F11 .
É semelhante a “Step”, mas se comporta de maneira diferente no caso de chamadas de função assíncronas. Se você está apenas começando a aprender JavaScript, pode ignorar a diferença, pois ainda não temos chamadas assíncronas.
Para o futuro, observe que o comando “Step” ignora ações assíncronas, como setTimeout (chamada de função agendada), que são executadas posteriormente. O “Step into” entra no código deles, aguardando por eles se necessário. Consulte o manual do DevTools para obter mais detalhes.
– “Step out”: continue a execução até o final da função atual, tecla de atalho Shift + F11 .
Continue a execução e pare na última linha da função atual. Isso é útil quando inserimos acidentalmente uma chamada aninhada usando , mas não nos interessa e queremos continuar até ao seu fim o mais rapidamente possível.
– ativar/desativar todos os pontos de interrupção.
Esse botão não move a execução. Apenas uma massa liga/desliga para pontos de interrupção.
– ativar/desativar a pausa automática em caso de erro.
Quando habilitado, se as ferramentas do desenvolvedor estiverem abertas, um erro durante a execução do script o pausa automaticamente. Então podemos analisar variáveis no depurador para ver o que deu errado. Então se nosso script morrer com erro, podemos abrir o depurador, habilitar esta opção e recarregar a página para ver onde ele morre e qual é o contexto naquele momento.
Continuar aqui
Clicar com o botão direito em uma linha de código abre o menu de contexto com uma ótima opção chamada “Continue aqui”.
Isso é útil quando queremos avançar vários passos até a linha, mas temos preguiça de definir um ponto de interrupção.
Para gerar algo para console a partir de nosso código, existe a função console.log .
Por exemplo, isso gera valores de 0 a 4 para o console:
//abre o console para ver
for (seja i = 0; i < 5; i++) {
console.log("valor,", i);
}Usuários regulares não veem essa saída, ela está no console. Para vê-lo, abra o painel Console das ferramentas do desenvolvedor ou pressione Esc enquanto estiver em outro painel: isso abre o console na parte inferior.
Se tivermos logs suficientes em nosso código, poderemos ver o que está acontecendo nos registros, sem o depurador.
Como podemos ver, existem três maneiras principais de pausar um script:
Um ponto de ruptura.
As instruções debugger .
Um erro (se as ferramentas de desenvolvimento estiverem abertas e o botão está “ligado”).
Quando pausado, podemos depurar: examinar variáveis e rastrear o código para ver onde a execução deu errado.
Existem muito mais opções em ferramentas de desenvolvedor do que as abordadas aqui. O manual completo está em https://developers.google.com/web/tools/chrome-devtools.
As informações deste capítulo são suficientes para iniciar a depuração, mas mais tarde, especialmente se você faz muitas coisas no navegador, vá até lá e dê uma olhada nos recursos mais avançados das ferramentas de desenvolvedor.
Ah, e você também pode clicar em vários locais das ferramentas de desenvolvimento e ver o que está aparecendo. Esse é provavelmente o caminho mais rápido para aprender ferramentas de desenvolvimento. Não se esqueça do clique com o botão direito e dos menus de contexto!