Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Contato com Depuração Moderna: Parte 2

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Modern Debugging Experience.
Modern Debugging Experience: Part 1

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Na parte 1, vimos como escrever e executar código JavaScript usando as Ferramentas para Desenvolvedores. Na parte 2, veremos como depurar código JavaScript e como adotar um fluxo de trabalho de tal modo que o diagnóstico e resolução de erros no JavaScript seja mais eficiente.

Depurando Código JavaScript Usando as Ferramentas para Desenvolvedores

Palavra-chave Debugger

Você pode usar a palavra-chave debugger, diretamente, em seu código para invocar as capacidades de depuração (se houver) do ambiente de execução do JavaScript. Adicionar a palavra-chave debugger em seu código tem o mesmo efeito que configurar pontos de parada através da interface de usuário das Ferramentas para Desenvolvedores, manualmente. No Chrome, a palavra-chave debugger não terá qualquer efeito enquanto as Ferramentas para Desenvolvedores estiverem fechadas.

Controles de Depuração

Os controles de depuração proveem um controle fino sobre o fluxo de depuração. Use-os enquanto estiver parado em um ponto de parada para navegar efetivamente pelo código JavaScript. Cada controle de depuração listado abaixo, corresponde a um botão nas Ferramentas para Desenvolvedores que você pode selecionar enquanto estiver parado em um ponto de parada.

Continue

Sai do ponto de parada atual e dá continuidade à execução do código, normalmente. Isso não afeta outros pontos de parada que não tenham sido parados ainda.

Use o Continue quando o ponto de parada atual não for útil e você quiser dar continuidade à execução do código.

Step Over

Navegue pelo código, linha-por linha (uma linha por clique) até alcançar a chamada de uma função. Nesse ponto, "passamos pela" função, mas não acessamos o código interno daquela função em particular.

Use o Step Over quando aquilo que precisar ser resolvido está relacionado à função atual e precisa verificar chamadas a funções externas.

Step Into

Semelhante ao Step Over, exceto que, neste caso, você acessa a primeira linha do código da função.

Use o Step Into quando estiver interessado em execução linha-a-linha, assim como chamadas a funções externas.

Step Out

Ao entrar em uma função, o Step Out continuará a execução do resto daquela função, porém, o código não será depurado.

Use o Step Out quando não tiver interesse no resto da função atual e quer continuar a depuração imediatamente fora dela.

A Pilha de Execução

A pilha de execução fica ativa enquanto estiver parada em um ponto de parada. O caminho da execução que leva até o ponto de parada atual é mostrado na pilha de execução, sendo que a execução do topo é a mais recente.

Cada chamada dentro da pilha contem:

  • Nome da função
  • Nome do arquivo contendo a função
  • A linha de código onde a função reside

Clique em qualquer chamada dentro da pilha para navegar até o ponto do código fonte onde a função relevante estará destacada. Para copiar o rastreamento da pilha para sua área de transferência, basta clicar com o botão direito em uma chamada e selecionar Copy stack trace. No menu de contexto da pilha de execução, você também pode selecionar Restart Frame.

Reescrevendo Funções Enquanto Parado em um Ponto de Parada

Considere o caso de uso que o depurador esteja parado no meio de uma função callback ativada por um manipulador de evento de clique, e que você está tentando descobrir o porque o reestabelecimento de target não estar funcionando como esperado. 

Veja que foi feita uma tentativa de acessar a propriedade target como parte da palavra-chave this, mas você lembrar que é uma propriedade parte do objeto do evento passado como parte da função calback

Você pode reescrever a função usando a Edição em Tempo Real para verificar que suas mudanças realmente funcionam e que o novo JavaScript foi injetado no motor V8 do navegador.

monitorEvents

Ao escrever um manipulador de ventos para um evento como o de rolagem, você talvez comece usando o método console.log para ver como o argumento passado (o objeto do evento) é. Uma dica para conseguir isso é usar o atalho monitorEvents. Cole o código abaixo no Painel Console e, então, mexa a barra de rolagem da página:

Perceba que o objeto evento é registrado no console, pronto para inspeção.

Debug

Quando quiser que o depurador pare na primeira linha de uma função, durante sua execução, você pode fazer de uma dessas duas maneiras:

  • Adicionar um ponto de parada através da interface de usuário das Ferramentas para Desenvolvedores.
  • Adicionar um comando de depuração à função.

Outra técnica é executar a função debug(fn) que faz parte da API da Linha de Comando. A função leva como argumento a função que você deseja depurar e parará na primeira linha de execução daquela função.

Parada no Acesso a Propriedades

Essa técnica permite que pause o depurador quando uma propriedade de um objeto que você estiver interessado for acessada de qualquer forma (leitura ou escrita). Para parar quando uma propriedade de um objeto for lida ou escrita, execute o comando trecho de código abaixo (através do Panel Console ou Snippets - Trechos de Código):

O trecho aplica um getter e um setter à propriedade scrollTop do objeto document.body. Nos getter e setter customizados, o o comando do depurador existe. Você também pode usar Object.observe para parar em adições à propriedade de um objeto especificado:

Pontos de Parada Condicionais Usando console.log

Além da palavra chave debugger, para configurar um ponto de parada através das Ferramentas para Desenvolvedores, você pode clicar na borda da linha de código onde quer que o depurador pare. Esse método de configurar uma parada tem uma funcionalidade extra: Configurar um ponto de parada condicional, onde você instrui as Ferramentas para Desenvolvedores para parar ali, somente se uma certa expressão resultar em verdadeiro. Por exemplo, você pode configurar um ponto de parada condicional para parar somente se existir um argumento de erro.

Para configurar uma parada condicional:

  1. Clique com botão direito dentro da borda da linha;
  2. Selecione Add conditional breakpoint;
  3. Digite a expressão que você deseja que as Ferramentas para Desenvolvedores avaliem;
  4. Aperte Enter
Add conditional breakpoint

Você pode usar a técnica de ponto de parada condicional para adicionar, rapidamente, um comando console.log como uma expressão a ser avaliada. Como o comando console.log resulta em undefined, as Ferramentas para Desenvolvedores não para, mas, uma vez que a expressão é executada, você pode inspecionar as variáveis daquele momento, dessa forma.

Usando Expressões Observadoras

Quando o depurador está parado em um ponto de parada, você pode abrir o Painel Console no modo "engavetado", pressionando a tecla Esc. O código que você digitar será avaliado no mesmo contexto do ponto em que você está parado, significando que todas as variáveis daquele escopo estarão acessíveis.

Watch expressions

Uma expressão observadora é uma ferramenta para simplificar a técnica de inspeção regular (através do console.log, por exemplo) de variáveis de escopo. Watch Expressions é um painel dentro do Painel Sources. Você pode adicionar ou remover Expressões Observadores usando os botões de + e -. Um objeto típico a se observar é o objeto this; perceba como ele se refere ao objeto objeto global window quando não está em um ponto de parada.

Expressões Observadores geralmente serão atualizadas de acordo com que você navega pelo código. Se não atualizar, clique no botão Refresh.

Exceções

Considere o código a seguir:

Exceptions

Foram declaradas três funções. A função a invoca a função b que, por sua vez, invoca a função c. O código inicia a cadeia com uma chamada à função a. O comando console.trace registra a pilha de rastreio do console onde o método foi chamado. Usar o console.trace mostrar o retorno de console.trace.

Note que os nomes das funções e as linhas onde foram invocadas são mostrados na mensagem de rastreio. Você pode clicar no número da linha para ser levado até o ponto relevante do código fonte, através do Painel Sources. Essa técnica também funciona para os trechos de códigos (snippets).

O depurador oferece vários modos para lidar com Exceções:

  • Parar em exceções não tratadas;
  • Parar em exceções tratadas e não tratadas;
  • Não parar em exceções

2. Depurando de Dentro para Fora

Quando tiver de depurar um site que você souber pouca coisa sobre o mesmo, poderá usar uma técnica diferente de depuração. Nessa abordagem, você se fixa a eventos que acredita que serão ativados e requisita às Ferramentas para Desenvolvedores que pare em tais eventos se e quando eles ocorrerem. Há duas categorias de pontos de entrada de "De Fora > Para Dentro":

  • Modificações da DOM
  • Pontos de Parada para Observadores de Eventos

Parada em Modificações da DOM

Você tem a tarefa de depurar uma página web, mais especificamente sua DOM. Os nodos são adicionados e removidos durante o ciclo de vida da página e você precisa inspecionar o código JavaScript que faz isso acontecer. Configure um ponto de parada da DOM com os seguintes passos:

  • Clique com botão direito em um elemento da DOM no Painel Elements;
  • Selecione o ponto de parada preferido da DOM do menu de contexto Break on;
  • Enquanto estiver em um ponto de parada, você pode ver uma mensagem que explica o motivo do depurador ter parado, como visto em Reason para parar em um ponto de parada.
DOM modifications

Toda vez que você configura um ponto de parada da DOM, você pode ativá-lo ou desativá-lo facilmente, na aba DOM breakpoints no Painel Elements. Nesta aba, cada ponto de parada que você configurou está listado e você pode interagir com essa aba das seguintes formas:

  • Marcar/desmarcar a caixa de seleção para habilitar/desabilitar o ponto de parada;
  • Clicar no nome do Nodo (o qual está sublinhado) para navegar até ele na visualização em árvore da DOM;
  • Clique com o botão direito e selecione Remove All DOM breakpoints para desabilitar e remover todos os pontos de parada da DOM.
DOM breakpoints

Modificações de Subárvore 

Descrição: Uma modificação de subárvore ocorre quando a árvore de um nodo raiz (o qual possui um ponto de parada configurado) é modificada. Isso abrange a adição ou remoção de nodos.

Caso de Uso: Uma div recipiente está presente na DOM e uma requisição Ajax acontece durante o carregamento da página, a qual adiciona alguns nodos novos no recipiente original. Adicione um ponto de parada de Modificação de Subárvore na div recipiente para ver o exato momento do código que adiciona novos nodos à DOM.

Exemplos de Mensagens: Parado em um ponto de parada de Modificação de Subárvore configurada na tag body porque seu descendente p foi removido. Ou: Parado em um ponto de parada de Modificação de Subárvore configurado em div#parent porque um novo filho foi adicionado àquele nodo.

Atributos Modificados 

Descrição: Uma parada de modificação de atributo é ativada quando o nome ou valor de um atributo em um nodo é adicionado, removido ou modificado. Isto inclui todos os atributos, como classdata-* ou style.

Caso de Uso: Uma mudança visual acontece na página em um momento aleatório e você consegue descobrir que é devido a uma classe que é adicionada dinamicamente ao elemento body. Você quer investigar quem e o porque da adição dessa classe.

Exemplos de mensagem: Parado em um ponto de parada de Atributos Modificados configurado em um elemento p.

Remoção de Nodo 

Descrição: Um ponto de parada de remoção de nodo é ativado no ponto em que um nodo é removido do elemento pai que o ponto de parada é configurado.

Caso de Uso: Você está criando um aplicativo de lista de tarefas e quer verificar que, quando o usuário apaga um item da lista, ele também seja removido da lista da DOM. Você pode configurar um ponto de parada de remoção de nodo para garantir que este comportamento ocorra.

Exemplos de Mensagem: Parado em um Nodo Removido div#container.

Pontos de Parada de Observadores de Eventos

Nas Ferramentas para Desenvolvedores, um número pré-determinado de pontos de parada para Observadores de Eventos que você pode habilitar. Eles oferecem portas de entrada ao JavaScript que pertence à página.

Considere uma simples página about:blank. Configure um ponto de parada de observador de evento do tipo click nesta página, seguindo os passos abaixo:

  • Navegue até a aba Event Listener Breakpoints no Painel Sources;
  • Abra a categoria de Observadores de Evento Mouse;
  • Habilite o observador de evento Click

Agora, você tem um ponto de parada configurado. Se você clicar na página, perceberá que nada acontece. Agora, execute o trecho de código JavaScript a seguir no Painel Console.

Quando você criar um ponto de parada para o mesmo evento que você registrou um observador de evento, o depurador para antes do ponto onde sua função callback do observador de eventos é executada.

Você pode registrar pontos de parada para vários tipos de eventos como temporizadores, eventos de toque e outros, que estão listados na tabela abaixo.

Categoria de Evento Exemplos de Evento

Animação

requestAnimationFrame, cancelAnimationFrame, animationFrameFired

Controle

resize, scroll, zoom, focus, blur, select, change, submit, reset

Área de Transferência

copy, cut, paste, beforecopy, beforecut, beforepaste

Mutação da DOM

DOMActivate, DOMFocusIn, DOMFocusOut, DOMAttrModified, DOMCharacterDataModified, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified, DOMContentLoaded

Aparelho

deviceorientation, devicemotion

Arrastar / Soltar

dragenter, dragover, dragleave, drop

Teclado

keydown, keyup, keypress, input

Carregamento

load, beforeunload, unload, abort, error, hashchange, popstate

Mouse

click, dblclick, mousedown, mouseup, mouseover, mousemove, mouseout, mousewheel, wheel

Temporizador

setTimer, clearTimer, timerFired

Toque

touchstart, touchmove, touchend, touchcancel

WebGL

webglErrorFired, webglWarningFired

A técnica de "depuração de fora para dentro" pode ser bem útil ao tentar depurar sites de terceiros cuja funcionalidade está comprometida ou mesmo quando você estiver curioso sobre como algo é feito/acontece em uma página que você está visualizando.

3. Extensões

Existem várias extensões para o Chrome, muitas das quais aprimoram as funcionalidades das Ferramentas para Desenvolvedores. Uma lista com os destaques pode ser vista na Galeria de Extensões para Ferramentas para Desenvolvedores.

Pré-processamento de JavaScript das Ferramentas para Desenvolvedores

Para criadores de extensões para Ferramentas para Desenvolvedores, a funcionalidade de pré-processamento de JavaScript é um tópico válido a ser aprendido. O pré-processador pode interromper o código fonte JavaScript antes dele entrar no motor V8, permitindo a alteração do código fonte JavaScript através das Ferramentas para Desenvolvedores, antes dele entrar na máquina virtual, a partir de uma extensão. 

Além dessa capacidade de interceptação, a API de pré-processamento tem acessos programáticos para recarregamento de recursos de scripts. Uma extensão pode, a qualquer momento de seu ciclo de vida, recarregar arquivo JavaScript fonte sem recarregar a página original.

4. Node

Essa seção cobre algumas ferramentas que oferecem um certo nível de integração entre o Node.js e as Ferramentas para Desenvolvedores do Chrome.

Node Inspector

Há duas partes das Ferramentas para Desenvolvedores:

  • Front-end: É essa parte que você usa e interage. É composta de HTML, CSS e JavaScript.
  • Back-end: No caso de inspecionar uma página usando o Google Chrome, o back-end fica dentro do próprio Chrome. As mensagens são passadas e devolvidas através do Protocolo de Depuração Remota.

Qualquer aplicação pode implementar algum tipo de comunicação através do protocolo de depuração remota, permitindo que seus usuários possam depurá-la através das Ferramentas para Desenvolvedores. O Node Inspector é uma dessas ferramentas. Após instalá-lo, você pode executar qualquer código do Node.js usando o Node Inspector. A ferramenta inicial um servidor web que hospedará o front-end das Ferramentas para Desenvolvedores. Essa versão especial das Ferramentas para Desenvolvedores não usa o back-end do Chrome, mas, sim, o do próprio Node Inspector.

Node Inspector

Como pode ver no Node Inspector, as Ferramentas para Desenvolvedores está em um ponto de parada. A pilha de execução se refere às chamadas realizadas no Node.js. O único envolvimento com o navegador aqui é para a interface das Ferramentas para Desenvolvedores.

Node Heapdump

Use o Node Heapdump para realizar capturas da árvore de execução da máquina V8 em um dado ponto do seu código. O estado atual da árvore do V8 será serializado e retornado em um arquivo.

Node Heapdump

Compare duas capturas de árvores de execução para descobrir quais objetos não estão sendo colecionados. Isso é útil para verificar vazamentos de memórias.

Conclusão

E é isso! Chegamos ao fim dessa série de contato com depuração moderna. Espero que você esteja confortável criando e depurando código JavaScript dentro das Ferramentas para Desenvolvedores. Você agora está familiarizado com fluxos de trabalho que podem ajudar na depuração de código e também sabe lidar com sites em produção que você nunca trabalhou antes. Tenha certeza de por em prática algumas das técnicas que você aprendeu aqui, na próxima vez que tiver de depurar algum código.

Obrigado pela leitura!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.