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
Img1

Mais ferramentas > Ferramentas do desenvolvedor
Img2

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”):

Img3

Ou pelo atalho:
  Ctrl + Shift + I

Ou mais simples ainda, teclando:
F12.

Com isso, vai aparecer a ferramenta:

Img4

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“.

Img5

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.

Img6

Ao verificar o valor da variável, me retorna o resultado da multiplicação feita no momento da atribuição.

Img7

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:

Img8

Depois, inspecionei os elementos HTML da página, através deste botão, que é um atalho para a ferramenta     Elements:

Img9

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:

Img10

Através de JavaScript puro, sem utilizar nenhum framework, busco o DOM do elemento que possui a classetitle” (.title), e tem uma propriedade com o nome de title com o valor Gmail ([title=”Gmail”]).

Img11

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.

Img12

Coloquei o texto no elemento:

Img13

E o título do aplicativo do Gmail foi alterado!

Img14

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“:

Img15

Então, busquei os DOMs, com JavaScript puro:

Img16

E para cada um deles, vou adicionar um evento “mouseover” com uma função, que contém erro:

Img17

Passo o mouse em cima do ícone ou do título:

Img18

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:

https://github.com/MackMendes/DepurandoJavaScriptChrome

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:

Img19

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“.

Img20

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:

Img21

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:

Img22

Explicando a ferramenta:

Img29

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:Img23 Continuar com a Execução (F8), também fica no menu suspenso (4);

Img24 Pular para a Próxima linha (F10), também fica no menu suspenso (4);

Img25 Entrar na função acionada (F11);

Img26 Sair de dentro da função atual (F11 + Shift);

Img27 Desativar todos os breakPoint’s (Ctrl + F8). Mas, somente os colocados direto pela ferramenta (no nosso caso, forçamos o breakpoint no código);

Img28 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();

Img30

Img31

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.

img100

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:

Img32

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:

Img33

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:

Img34

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:

Img35

O mesmo ocorre ao acessar as propriedade deste objeto jQuery, que vêm todos as funções que posso utilizar:

Img36

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:

Img37

 

Img38

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://“:

Img39

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:

Img40

No centro da ferramenta, o arquivo vai ser aberto:

Img41

Com o arquivo aberto, pressionando Ctrl + G, para aparece um cursor onde você digita o número da linha, 137:

Img42

E pressione “Enter“:

Img43

Ou se quiser, pode pressionar Ctrl + F, para procurar pelo nome:

Img44

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:

Img45

Pressione “Enter“:

Img46

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.

Img47

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:

Img48

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…):

Img49

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.

Img50

Logo em seguida, tira o foco deste campos, para acionar a função que estamos depurando.

Img51

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:

Img52

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:

https://developers.google.com/web/tools/chrome-devtools/

Charles Mendes de Macedo

Desenvolvedor, palestrante (horas vagas) e estudante de Mestrado em Sistemas de Informação pela Universidade de São Paulo (USP). Entusiasta por metodologias ágeis e boas práticas! Apaixonado por desenvolvimento, Arquitetura de Software, Testes Automatizados e novas tecnologias.

Bacharel em Ciência da Computação
Microsoft Certified Solutions Developer (MCSD)
Microsoft Certified Technology Specialist (MCTS)

Twitter LinkedIn  

Comentários

comentarios