Depurando código JavaScript com Google Chrome
Versão do Google Chrome ao fazer o artigo: 48.0.2564.109 m
Introdução
Esse artigo, tem como objetivo principal auxiliar a depuração de códigos feito em JavaScript puro ou com Bibliotecas e Framework como jQuery, Angular, Ember, React, Backbone, Knockout…
Acessando a “Ferramentas do desenvolvedor” do Google Chrome.
Hoje em dia, a maioria dos navegadores, já vêm com uma ferramenta que ajuda o desenvolvimento client-side, (JavaScript, CSS e Html). Antigamente, a ferramenta mais utilizada era o Firebug, uma extensão da Mozilla Firefox, muito útil e ajudou bastante!
Porém, nesse artigo vou falar da ferramenta que tem no Google Chrome, chamada de “Ferramentas do Desenvolvedor”. Acessando ela através:
Menu
Mais ferramentas > Ferramentas do desenvolvedor
Ou, clicando com o botão direito do mouse em cima da página, e “Inspecionar” (Em versões anteriores do Chrome era “Inspecionar elemento”):
Ou pelo atalho:
Ctrl + Shift + I
Ou mais simples ainda, teclando:
F12.
Com isso, vai aparecer a ferramenta:
Breve introdução a ferramenta
As ferramentas, estão separadas em nove abas:
• Elements: Essa ferramenta mostra todo o HTML renderizado, em tempo de execução. Se for feito alguma modificação no HTML ou no estilo da página, ela vai mostra. Diferentemente do “Exibir código fonte da página” (Ctrl + U) que mostra, o conteúdo da página HTML antes de ser renderizado. É possível remover, alterar ou criar elementos HTML, ou as folhas de estilos ou visualizar os eventos de JavaScript que estão em um determinado elemento. É muito interessante, e aconselho que brinquem nela! Tem muita coisa legal, da para fazer um artigo completo só desta ferramenta!
• Console: Essa ferramenta é o “Playground” do código JavaScript! Vou explicá-la melhor mais para frente.
• Sources: Nessa aba fica a ferramenta que mostra as pastas dos fontes de Javascript, CSS e Html, sendo possível acessar esses fontes e alterá-los. Com JavaScript, da para colocar BreakPoints (ponto de parada no código), para depurar. Falarei mais sobre essa ferramenta neste artigo.
• Network: Mostra todos os tipos de requisições. Requisição Ajax, de arquivos HTML, CSS, JavaScript, Imagens, Médias (Áudio e Vídeos), de WebSockets e outros arquivos (.aspx, .srf, etc). Para cada uma das requisições, tem detalhe de quanto tempo o navegador gastou para baixar o arquivo, o tamanho da informação ou do arquivo, situação da requisição através do código HTTP (status HTTP) e tipo da requisição. É possível, indicar para a ferramenta tirar Print Screen de alguns pontos da página em um processo de requisição.
• Timeline: Analise de performance, tanto na renderização, quanto em um processo em tempo de execução. Com régua de tempo, indicando através de gráfico por linha o tempo de cada processo e consumo de memória. Bem interessante!
• Profiles: Excelente para verificar pontos de performance e processamento, em funções JavaScript. Mostra e grava a distribuição de processos na memória dos objetos JavaScript com a página. Vale muito a pena estuda essa ferramenta!
• Resources: Mostra todos os repositórios de dados, como Web Storage, Local Storage, Cookies, Sessions, IndexedDB, Web SQL, Caches e as pastas de imagens, scripts, estilos e arquivos, que a página aberta utiliza.
• Security: Essa ferramenta indica se a página visitada tem conexão segura, utilizando HTTPS por exemplo, mostrando o certificado digital, no caso de ser seguro.
• Audits: Nessa aba é possível fazer uma pequena auditória, da utilização de recursos de rede das requisições, das folhas de estilo, de imagens e carregamento da página.
Essas ferramentas tem muita funcionalidade que, aconselho que brinquem bastante com elas! Vale a pena! Mas, vamos ao principal, depurar JavaScript!
Depurando
Vamos começar a brincadeira! E para essa primeira parte, vou fazer os exemplos utilizando a página de aplicativos do Chrome, no endereço “chrome://apps/”.
Primeiro, vamos à ferramenta Console, o nosso parque de diversões. Nela é possível:
• Atribuir e verificar valores de variáveis, que estão no código ou criar em tempo de execução:
Vou criar uma variável chamada “multi”, e passar para ela o resultado de uma multiplicação. Logo em seguida, pressiono “Enter”.
Como as expressões e funções em JavaScript retorna sempre alguma coisa, e nessa não retornei nada explicitamente, ela retorna “undefined”.
Na linha seguinte, comecei a digitar o nome da variável que criei acima, e o IntelliSense da ferramenta, já identificou uma variável no escopo atual, começado com “mu”, e sugeriu.
Ao verificar o valor da variável, me retorna o resultado da multiplicação feita no momento da atribuição.
Desta forma, o desenvolvedor tem liberdade para manipular da forma que necessitar, valores de variáveis em tempo de execução. Ou até fazer códigos, relativamente rápidos e fáceis, direto na ferramenta Console.
- Codificar na ferramenta e refletir direto no DOM (Document Object Model — Modelo de Objeto de Documentos) da página. Vamos alterar o título do aplicativo “Gmail”:
Limpei o que codificamos no Console:
Depois, inspecionei os elementos HTML da página, através deste botão, que é um atalho para a ferramenta Elements:
Identifiquei que na página de aplicativos do Chrome, todos os títulos dos aplicativos (Web Store, Google Docs, Gmail, Google Drive…), estão em uma tag span, com uma classe chamada “title” e uma propriedade com o mesmo nome, title:
Através de JavaScript puro, sem utilizar nenhum framework, busco o DOM do elemento que possui a classe “title” (.title), e tem uma propriedade com o nome de title com o valor Gmail ([title=”Gmail”]).
Também, poderia ter usado jQuery ou outro framework de JavaScript!
Acessei o valor da variável, e quando parei o cursor do mouse em cima do resultado, ele indicou na página o elemento daquele DOM.
Coloquei o texto no elemento:
E o título do aplicativo do Gmail foi alterado!
Interessante, não é?!
Porém, se atualizar (f5) a página ou carrega novamente, volta tudo ao normal. Isso ocorre porque, as alterações realizadas nessa ferramenta são locais, e não direto no servidor da aplicação. Para desenvolvimento, é útil porque, a alterações podem ser salva na pasta raiz dos fontes. Mais a frente nesse artigo eu explico como!
- Erros que ocorrem no JavaScript:
Em JavaScript, encontrar um erro, era um parto! Já vi programadores colocando “alert” em um monte de lugar. Vou mostrar que utilizando essa ferramenta, fica bem mais tranquilo de encontrar e corrigir o erro.
Vou criar uma função com erro, para ser acionada quando o mouse passar por cima do ícone do aplicativo e do título.
Identifiquei que no HTML desta página, todos os aplicativos e seus títulos possui a classe “launch-click-target”:
Então, busquei os DOMs, com JavaScript puro:
E para cada um deles, vou adicionar um evento “mouseover” com uma função, que contém erro:
Passo o mouse em cima do ícone ou do título:
E o erro estoura no Console, indicando a mensagem da exceção (1), a quantidade de erros (2) ocorridos e o local do arquivo JavaScript (3) que estourou o erro (como colocamos a função em tempo de execução, não tem um arquivo “físico”).
Muito louco! E, ainda tem mais!
Simulando problemas do Cotidiano
Bom, vou tentar simular um pouco, o cotidiano.
Fiz uma página HTML, simples. Que tem um pequeno CRUD (Create, Read, Update e Delete) de usuário, lado do cliente (client-side) sem persistência no banco de dados. Com requisição ajax para a API do Postmon (http://api.postmon.com.br/v1/cep/) para consultar o endereço, através do CEP que o usuário digitou. E possui uma listagem de todos os usuários já cadastrados. Tudo que fiz, esta no meu GitHub, link:
Esse pequeno exemplo, foi reutilizado de uma palestra que fiz, de jQuery na .NetCoders! E esta bem comentado, sobre algumas questões do Framework jQuery. Mas, fico a disposição para esclarecimentos de dúvidas sobre o exemplo.
Página do exemplo:
Para começarmos a depuração, vamos colocar na linha 8, do arquivo util.js, na pasta Scripts/home, a palavra reservada do JavaScript, chamada “debugger”.
Utilizei o Visual Studio Code, um editor gratuito e Multiplataforma (roda no Windows, iOS e Linux) da Microsoft. (https://www.visualstudio.com/pt-br/products/code-vs.aspx)
Vamos abrir a página index.html com o Chrome, que esta na raiz do projeto, deixando a ferramenta de depuração (F12) aberta. Fazendo isso, vai fica assim a ferramenta:
A palavra reservada “debugger”, é um breakpoint forçado no código. Todas as ferramentas de depuração JavaScript, quando abertas, ao passar por esse comando, vai parar a execução, conforme mostrado acima.
Contudo, não é recomendado deixar o “debugger” no código e subir em produção, porque se o usuário estiver com alguma ferramenta de depuração aberta, vai parar a execução. Então, é aconselhável para os desenvolvedores esquecidos, utilizar o breakpoint da própria ferramenta. Clicando em cima do número da linha:
Explicando a ferramenta:
No Sources (1), mostra os arquivos Javascript (2), e se conter algum Breakpoint, mostra a linha onde parou a execução, como esta na imagem acima. Do lado direito (3), tem os botões:
Continuar com a Execução (F8), também fica no menu suspenso (4);
Pular para a Próxima linha (F10), também fica no menu suspenso (4);
Entrar na função acionada (F11);
Sair de dentro da função atual (F11 + Shift);
Desativar todos os breakPoint’s (Ctrl + F8). Mas, somente os colocados direto pela ferramenta (no nosso caso, forçamos o breakpoint no código);
Pausar no caso de ocorrer exceção.
E do lado esquerdo (5), fica as pastas que a página esta utilizando. Assim, fica fácil procurar um arquivo JavaScript para depurar código.
Agora que sabemos mais sobre a ferramenta, vamos continuar.
Com a tecla F10, passamos para a próxima linha. E com F11, entramos na função “ExecutarTodasFuncoes();”
Vamos até a terceira função (AtribuirTituloPagina()) com o F10. Entra nela com F11.
Ao entrar na função, do lado direito tem o Call Stack, que lista as chamadas das funções feita até o momento que o cursor do breakpoint está parado. Ordenado da última chamada para a primeira.
O Call Stack é muito interessante, nos casos em que precisa saber quem acionou a função atual, ou identificar valores passados de funções anteriores para a atual. Exemplo, se ocorre um erro em uma função, você esta depurando, e o motivo foi porque algum parâmetro de entrada estava com um valor não esperado. Você vai querer saber qual função anterior passou esse valor inesperado. Vai ser útil vê o Call Stack!
Indo para a próxima linha, com F10:
Podemos reparar, que é possível vê o valor da variável ao passar o mouse por cima (1). É possível vê pela legenda ao lado da variável que a ferramenta já informa (2). E no lado direito no “Scope”(3) tem o escopo local das variáveis, com seus respectivos valores (4), detalhados em uma árvore:
Nesse projeto, utilizei o framework jQuery, desta forma os valores informados no objeto são os DOM’s dos elementos que foram encontrados (1), o contexto da consulta realizada na página (2), a quantidade de elementos encontrados (3), as funções encapsulados do jQuery (4) e o “selector” (a forma do jQuery de buscar os elementos através de CSS) que
Vamos abrir o Console, pressionando “Esc” do teclado, para aparece na parte inferior:
Quando começamos a digitar a variável $eleTitles, o IntelliSense da ferramenta, já identifica a variável no escopo atual, e já coloca como sugestão:
O mesmo ocorre ao acessar as propriedade deste objeto jQuery, que vêm todos as funções que posso utilizar:
Muito útil, quando esquecemos como utilizar alguma função (JavaScript, jQuery, Angular…) ou, até o nome da função. E assim, como já mostrado no começo, podemos brincar com a variável em tempo de execução:
E depois, aberta F8 e continuar a execução. Desta forma, o desenvolvedor pode interagir com o seu código em cada linha, depurando o seu código!
Depurando uma execução Ajax
Através da ferramenta Sources, ao lado esquerdo no “file://”:
Vai até a pasta da raiz da página, entre em “Scripts”, depois em “home”, procure o arquivo “cadastrar.js” e clique uma vez sobre ele:
No centro da ferramenta, o arquivo vai ser aberto:
Com o arquivo aberto, pressionando Ctrl + G, para aparece um cursor onde você digita o número da linha, 137:
E pressione “Enter”:
Ou se quiser, pode pressionar Ctrl + F, para procurar pelo nome:
Vamos colocar a palavra “debugger” nesse arquivo, mas sem colocar no arquivo “físico”! Só utilizando a ferramenta. Clique na linha 137, e deixe o cursor nela:
Pressione “Enter”:
Você vai perceber que na aba do lado do arquivo, vai aparecer um asterisco (*) indicando que o arquivo não foi salvo. Então, vamos colocar a palavra reservada para força o breakpoint, e salvar, pressionando Ctrl+S.
Ao fazer isso, vai aparecer um ícone de “alerta” do lado direito do nome do arquivo. E a cor do fundo do arquivo na ferramenta, mudou para um rosa claro.
Isso indica que o navegador identificou as alterações, e salvou um arquivo na memória dele. Porém, não foram salvar na pasta original:
Para fazer as alterações através da ferramenta, só clique com o botão direito em cima do arquivo e “Save as…” (Salvar como…):
E procure, um local para salvar o arquivo ou o mesmo local de origem, substituindo o original. Salvando vai ser possível alterar diretamente pela ferramenta, e depois salvar pressionando Ctrl+S! MUITO LEGAL!
Continuando…
Para conclusão deste exemplo, não vou salvar o arquivo, para mostrar que é possível alterar em tempo de execução e o navegador interpretar nessas alterações.
Colocado a palavra “debugger” para forçar a parada, vamos agora no campo “Cep” da página, e colocar um cep válido.
Logo em seguida, tira o foco deste campos, para acionar a função que estamos depurando.
Entramos na função! Mas, é uma requisição ajax assíncrona, não vai da para tentar ir com o F10 e com o F11, porque vamos entrar na framework jQuery, e até chegar na função callback… Então, vamos colocar o breakpoint da ferramenta na linha 145, que é o callback (função que vai ser acionada após uma chamada) do sucesso da requisição:
Só pressionar F8 para continuar a execução e parar no breakpoint. Agora, depure o resultado “data” e veja o objeto de retorno da requisição ajax! Muito tranquilo!
É isso ai, queria mostrar o básico desta ferramenta para você leitor, conseguir brincar com JavaScript e seus framework’s com mais facilidade!
Deem feedback!
Até a próxima!
Referência Bibliográfica:
