este tutorial ensina o fluxo de trabalho básico para depurar qualquer problema de JavaScript no DevTools. Continue lendo ou assista à versão em vídeo deste tutorial, abaixo.

# Passo 1: reproduzir o bug

encontrar uma série de ações que reproduz consistentemente um bug é sempre o primeiro passo para a depuração.

1. Clique Em Abrir Demonstração. A demonstração é aberta em uma nova guia.

   demonstração aberta

2. digite 5 na caixa de texto número 1.

3. digite 1 na caixa de texto número 2.

4. clique em Adicionar número 1 e número 2. O rótulo abaixo do botão diz 5 + 1 = 51. O resultado deve ser 6. Este é o bug que você vai consertar.

   

   Figura 1. O resultado de 5 + 1 é 51. Deve ser 6.

# Passo 2: familiarize-se com a interface do usuário do Painel de fontes

DevTools fornece muitas ferramentas diferentes para tarefas diferentes, como alterar CSS, perfilar o desempenho de carregamento da página e monitorar solicitações de rede. O painel Fontes é onde você depura JavaScript.

1. abra DevTools pressionando Command + Option + I (Mac) ou Control + Shift + I (Windows, Linux). Este atalho Abre o painel do Console.

   

   Figura 2. O painel Console

2. clique na guia Fontes.

   

   Figura 3. O painel Fontes

a interface do usuário do Painel de Fontes tem 3 partes:

Figura 4. As 3 partes do Painel de fontes UI

1. o painel Navegador de arquivos. Todos os arquivos que a página solicita estão listados aqui.
2. o painel do editor de código. Depois de selecionar um arquivo no painel Navegador de arquivos, o conteúdo desse arquivo é exibido aqui.
3. o painel de depuração JavaScript. Várias ferramentas para inspecionar o JavaScript da página. Se a janela DevTools for ampla, esse painel será exibido à direita do painel Editor de código.

# Etapa 3: Pause o código com um ponto de interrupção

um método comum para depurar um problema como este é inserir muitas instruções console.log() no código, a fim de inspecionar valores conforme o script é executado. Por exemplo:

function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

o método console.log() pode fazer o trabalho, mas os pontos de interrupção podem fazer isso mais rápido. Um ponto de interrupção permite pausar seu código no meio de sua execução e examinar todos os valores naquele momento. Pontos de interrupção tem algumas vantagens sobre o console.log() método:

• Com console.log(), você precisa abrir manualmente o código-fonte, encontrar o código, insira o console.log() instruções e, em seguida, recarregue a página para ver as mensagens no Console. Com pontos de interrupção, você pode pausar o código relevante sem nem saber como o código está estruturado.
• em suas instruções console.log(), você precisa especificar explicitamente cada valor que deseja inspecionar. Com pontos de interrupção, o DevTools mostra os valores de todas as variáveis naquele momento. Às vezes, existem variáveis que afetam seu código que você nem conhece.

resumindo, os pontos de interrupção podem ajudá-lo a encontrar e corrigir bugs mais rapidamente do que o método console.log().

se você der um passo para trás e pensar em como o aplicativo funciona, você pode fazer um palpite de que a soma incorreta (5 + 1 = 51) é calculada no click ouvinte de eventos que está associado ao botão Adicionar número 1 e número 2. Portanto, você provavelmente deseja pausar o código na época em que o ouvinte click é executado. Os pontos de interrupção do ouvinte de eventos permitem que você faça exatamente isso:

1. no painel depuração JavaScript, clique em pontos de interrupção do ouvinte de Eventos para expandir a seção. DevTools revela uma lista de categorias de eventos expansíveis, como animação e área de transferência.

2. ao lado da categoria Evento do Mouse, clique em expandir . DevTools revela uma lista de eventos do mouse, como clique e mousedown. Cada evento tem uma caixa de seleção ao lado dele.

3. marque a caixa de seleção clique. O DevTools agora está configurado para pausar automaticamente quando qualquer ouvinte de Evento click for executado.

   

   Figura 5. A caixa de seleção Clique está ativada

4. de volta à demonstração, clique em Adicionar número 1 e número 2 novamente. DevTools pausa a demonstração e destaca uma linha de código no painel Fontes. DevTools deve ser pausado nesta linha de código:

   function onClick() {

   se você estiver pausado em uma linha de código diferente, pressione retomar execução de Script até que você esteja Pausado na linha correta.

   Nota: Se você fez uma pausa em uma linha diferente, você tem uma extensão do navegador que registra um ouvinte de Evento click em cada página que você visita. Você foi pausado no ouvinte click da extensão. Se você usar o modo de navegação anônima para navegar em privado, o que desativa todas as extensões, você pode ver que você pausar na linha correta de código de cada vez.

os pontos de interrupção do ouvinte de eventos são apenas um dos muitos tipos de pontos de interrupção disponíveis no DevTools. Vale a pena memorizar todos os tipos diferentes, porque cada tipo ajuda a depurar cenários diferentes o mais rápido possível. Consulte pausar seu código com pontos de interrupção para saber quando e como usar cada tipo.

# Passo 4: passo através do Código

uma causa comum de bugs é quando um script é executado na ordem errada. Percorrer seu código permite que você percorra a execução do seu código, uma linha de cada vez, e descubra exatamente onde ele está sendo executado em uma ordem diferente da esperada. Experimente agora:

1. no painel Fontes do DevTools, clique em etapa na próxima chamada de função para passar pela execução da função onClick(), uma linha de cada vez. DevTools destaca a seguinte linha de código:

   if (inputsAreEmpty()) {

2. clique em Passo sobre a próxima chamada de função . DevTools executa inputsAreEmpty() sem entrar nele. Observe como o DevTools ignora algumas linhas de código. Isso ocorre porque inputsAreEmpty() avaliado como false, portanto, o bloco de código da instrução if não foi executado.

essa é a ideia básica de passar pelo código. Se você olhar para o código em get-started.js, poderá ver que o bug provavelmente está em algum lugar na função updateLabel(). Em vez de percorrer todas as linhas de código, você pode usar outro tipo de ponto de interrupção para pausar o código mais perto da provável localização do bug.

# Passo 5: Definir um ponto de interrupção de linha de código

os pontos de interrupção de linha de código são o tipo mais comum de ponto de interrupção. Quando você tem uma linha específica de código que você deseja pausar, pode usar uma linha de código de ponto de interrupção:

1. Olhe a última linha de código updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

2. Para a esquerda do código que você pode ver o número de linha dessa linha de código, que é 32. Clique em 32. DevTools coloca um ícone azul em cima de 32. Isso significa que há um ponto de interrupção de linha de código nesta linha. DevTools agora sempre faz uma pausa antes que esta linha de código seja executada.

3. clique em retomar execução do script . O script continua sendo executado até atingir a linha 32. Nas linhas 29, 30 e 31, DevTools imprime os valores de addend1, addend2 e sum à direita do ponto e vírgula de cada linha.

   

   Figura 6. DevTools faz uma pausa no ponto de interrupção da linha de código na linha 32

# Etapa 6: Verifique os valores das variáveis

os valores de addend1, addend2 e sum parecem suspeitos. Eles estão embrulhados em Citações, o que significa que eles são cordas. Esta é uma boa hipótese para explicar a causa do bug. Agora é hora de reunir mais informações. DevTools fornece muitas ferramentas para examinar valores de variáveis.

# Método 1: o painel de escopo

quando você está pausado em uma linha de código, o painel de escopo mostra quais variáveis locais e globais estão atualmente definidas, junto com o valor de cada variável. Também mostra variáveis de fechamento, quando aplicável. Clique duas vezes em um valor variável para editá-lo. Quando você não está pausado em uma linha de código, o painel de escopo está vazio.

Figura 7. O painel de escopo

# Method 2: Watch Expressions

a guia Watch Expressions permite monitorar os valores das variáveis ao longo do tempo. Como o nome indica, as expressões de relógio não se limitam apenas a variáveis. Você pode armazenar qualquer expressão JavaScript válida em uma expressão de relógio. Experimente agora:

1. clique na guia assistir.

2. Clique Em Adicionar Expressão .

3. Tipo typeof sum.

4. Pressione Enter. DevTools mostra typeof sum: "string". O valor à direita do cólon é o resultado da expressão do seu relógio.

   

   Figura 8. O painel de expressão do relógio (canto inferior direito), depois de criar a expressão do relógio typeof sum. Se a janela DevTools for grande, o painel de expressão do relógio estará à direita, Acima do Painel de pontos de interrupção do ouvinte de eventos.

como se suspeita, sum está sendo avaliado como uma string, quando deve ser um número. Agora você confirmou que esta é a causa do bug.

# Método 3: O Console

além de visualizar console.log() mensagens, Você também pode usar o Console para avaliar instruções JavaScript arbitrárias. Em termos de depuração, você pode usar o Console para testar possíveis correções de bugs. Experimente agora:

1. se você não tiver a gaveta do Console aberta, pressione Escape para abri-la. Ele abre na parte inferior da janela DevTools.

2. No Console, digite parseInt(addend1) + parseInt(addend2). Esta instrução funciona porque você está pausado em uma linha de código onde addend1 e addend2 estão no escopo.

3. Pressione Enter. DevTools avalia a instrução e imprime 6 , que é o resultado que você espera que a demonstração produza.

   

   Figura 9. A gaveta do Console, após avaliar parseInt(addend1) + parseInt(addend2).

# Passo 7: aplique uma correção

você encontrou uma correção para o bug. Tudo o que resta é experimentar sua correção editando o código e executando novamente a demonstração. Você não precisa deixar DevTools para aplicar a correção. Você pode editar o código JavaScript diretamente na interface do usuário do DevTools. Experimente agora:

1. Clique em Retomar a execução do script .
2. no editor de código, substitua a linha 31, var sum = addend1 + addend2, por var sum = parseInt(addend1) + parseInt(addend2).
3. pressione Command + S (Mac) ou Control+s (Windows, Linux) para salvar sua alteração.
4. Clique em Desativar pontos de interrupção . Ele muda de azul para indicar que está ativo. Enquanto isso está definido, DevTools ignora todos os pontos de interrupção que você definiu.
5. experimente a demonstração com valores diferentes. A demonstração agora calcula corretamente.

Parabéns! Agora você sabe como aproveitar ao máximo os DevTools do Chrome ao depurar JavaScript. As ferramentas e métodos que você aprendeu neste tutorial podem economizar inúmeras horas.

este tutorial mostrou apenas duas maneiras de definir pontos de interrupção. DevTools oferece muitas outras maneiras, incluindo:

• pontos de interrupção condicionais que só são acionados quando a condição fornecida é verdadeira.
• pontos de interrupção em exceções capturadas ou não capturadas.
• pontos de interrupção XHR que são acionados quando o URL solicitado corresponde a uma substring que você fornece.

consulte pausar seu código com pontos de interrupção para saber quando e como usar cada tipo.

há alguns controles de passo de código que não foram explicados neste tutorial. Consulte passo sobre linha de código para saber mais.