Blog SW9

Desenvolvimento Web e Híbrido na prática.
Tome um café, concentre-se, codifique. (งツ)ว

Javascript Debugging | Como fazer debug de javascript no Google Chrome | JS | SW9

Javascript Debugging | Como fazer debug de javascript no Google Chrome | JS | SW9

Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br).

#O que veremos nesta aula?

O objetivo nesta aula é compartilhar com vocês uma forma eficiente de simular, rastrear, identificar e corrigir problemas, usando para isso a ferramenta de debug incorporada ao navegador Google Chrome.

#Porque você deveria utilizar uma ferramenta de debug?

Para quem trabalha com desenvolvimento e faz uso de Javascript, sabe como é complicado investigar algum erro ocorrido em códigos Javascript. Independente do tipo de erro, seja ele disparado por uma exceção no navegador ou um erro de lógica, o processo era tedioso e não tínhamos ferramentas decentes para navegar pelo código e acompanhar a execução em busca de pontos de falha.

Quantas vezes usamos alertas, mensagens no console do navegador para chegar a uma conclusão?

#A evolução dos navegadores

Enquanto outras linguagens possuem IDEs de desenvolvimento que agregam poderosas ferramentas de debug, por outro lado, o nosso Javascript ficava para trás.

Mas felizmente isso é coisa do passado. O uso do Javascript, seja ele nativo ou fazendo parte de frameworks como o Angular, React, Vue e muitos outros, vem se tornando algo fundamental para uma boa experiência do usuário.

Apesar de algumas IDEs possuírem recursos de debug para Javascript, eu entendo que nada é comparado ao que os navegadores (principalmente o Google Chrome e o Firefox) evoluíram ao longo dos anos, trazendo uma solução bem robusta para quem deseja realizar ações de debug em Javascript.

Outro ponto positivo, é que você não precisa de uma IDE específica, instalada em seu PC, para investigar erros e corrigi-los. Basta você abrir o navegador, acessar a ferramenta de debug disponível e ser feliz 😀

Com este recurso disponível, e de graça, porque não reservar alguns minutos de seu precioso tempo para aprender a utilizá-la?

Se a sua resposta for sim, eu estou aqui justamente para isso. Explicar passo a passo como simular, investigar, identificar e corrigir erros com a ajuda de uma ferramenta de debug.

Serão duas AULAS sobre debug. Nesta primeira AULA, você vai ter contato com a ferramenta de debug do Google Chrome, e na segunda aula terá contato com a ferramenta de debug do Firefox.

#Estudo de caso

Ao invés de apresentar todos os recursos disponíveis na ferramenta de debug do Google Chrome, algo que na minha visão seria improdutivo. Eu criei um projeto que apresenta um erro em uma determinada situação. Será a partir deste projeto, que vamos usar a ferramenta de debug para rastrear, identificar e corrigir o erro.

Usando esta abordagem, você vai aprender o essencial para debugar o seu próprio projeto daqui para frente.

#Sobre o projeto

O projeto que vamos usar é um simples formulário de contato, onde o usuário pode preencher os campos [nome], [sobrenome], [emai] e [telefone].

Ao clicar no botão [Enviar], os dados são capturados usando a interface FormData (recurso nativo HTML5) e chamamos uma função para preparar os dados para envio. Esta preparação nada mais é do que transformar a primeira letra do nome para maiúsculo. Para concluir, os dados preparados são retornados e exibidos no console do navegador.

Durante os meus testes, eu identifiquei um ponto de falha que gera um erro no navegador e interrompe a execução do projeto.

Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.

#Workflow para qualquer tipo de situação

Para iniciarmos a investigação e localização do erro, eu vou seguir um workflow básico. Este workflow possui uma série de passos básicos, que podem ser aplicados (adotados) para qualquer tipo de situação (desde um caso simples até um caso complexo de erro).

Portanto, sempre que precisar iniciar um processo de debug, lembre-se de adotar estes mesmos passos e você será bem sucedido 😀

1- Simulação do problema;

2- Breakpoints – Pontos de parada;

3- Monitorando o estado das variáveis – watch;

4- Avaliando expressões;

5- Identificando o ponto de falha;

6- Aplicando a correção.

#Simulando o problema

Esta etapa é primordial para iniciarmos a nossa investigação. Será necessário simularmos o comportamento da nossa página de contatos, para tentar identificar em que momento a falha ocorre. Em qual condição, ou condições a falha ocorre. Quanto mais simularmos, melhor.

#Breakpoints

Sabendo em qual condição ocorre o erro, chegou a hora de conhecermos a pedra fundamental do processo de debug: o breakpoint. Com o breakpoint é possível pausar a execução do código e seguir acompanhando a execução linha a linha, por exemplo.

Em se tratando do navegador Google Chrome, mas especificamente da ferramenta Dev Tools, existem algumas alternativas para configurar um breakpoint.

Podemos definir um breakpoint por:

1- Linha: neste caso abrimos o arquivo Javascript via ferramenta de debug e marcamos de forma manual a(s) linha(s) que devemos pausar a execução do código;

2- Evento: podemos configurar uma condição de parada considerando um determinado evento. No nosso caso, como veremos no vídeo, vamos optar por configurar o evento onclick;

Com o evento onclick configurado como condição de parada, ao clicarmos no botão que faz parte do formulário de contato, a execução será pausada exatamente no ponto que o evento onclick foi disparado.

3- Código: você pode optar por definir condições de parada no seu próprio código, sem precisar usar a ferramenta de debug para isso. Para usar este recurso, basta digitar o comando [debugger;] no ponto que deseja pausar a execução. Incluindo esta anotação, a execução será pausada no momento que a linha de código for executada;

4- Exceção: usando esta opção, você está dizendo ao navegador, para pausar a execução do código no momento que encontrar uma exceção. Essa situação seria útil, quando não sabemos exatamente em que momento ocorre o erro, ou não conseguimos simular a condição em que o erro ocorre;

5- Condição de parada: é possível definir uma condição específica para que a execução seja pausada. Por exemplo: Eu quero pausar o código no exato momento que a condição if (a > b) for satisfeita.

Existem outras opções disponíveis no Google Chrome, mas na minha opinião, as mais importantes são estas que eu compartilhei com vocês.

Em nossa AULA prática usaremos o breakpoint de linha e de evento (itens 1 e 2 respectivamente). Também farei uma rápida menção ao breakpoint do tipo código (item 3).

#Monitorando o estado das variáveis

Já sabendo em que condição o erro ocorre, e com os breakpoints já configurados, chegou a hora de acompanharmos o estado das variáveis que fazem parte do script que estamos investigando.

Assim como ocorre com o breakpoint, é possível acompanharmos o estado das variáveis de várias formas.

1- Linha a linha: a medida que vamos avançando na execução do código, a cada linha executada, a própria ferramenta de debug vai deixando rastros dos valores das variáveis e expressões;

2- Adicionando uma variável ou expressão na fila de monitoramento: se você precisa acompanhar o estado de um conjunto de variáveis ao longo da execução do script, é possível selecionar estas variáveis ou expressões e adicioná-las na área de monitoramento;

3- Escopo Local e Global: dentro da ferramenta de debug, existe uma área chamada [Scope]. Abaixo desta área é possível acompanhar o estado de todas as variáveis de escopo Global e Local que são usadas ao longo da execução do script.

Em nossa AULA prática eu vou focar mais no item 1 e 2 e fazer uma menção ao item 3.

#Avaliando expressões

Pode ser que em determinado momento de sua investigação, seja necessário testar alguma expressão para comprovar a causa raíz do erro e também para testar uma possível solução. No caso de nossa página de contato, vamos avaliar se a variável que recebe o resultado do comando split(”) é do tipo array ou não.

Se for do tipo array, significa que o campo nome foi preenchido e que será possível transformar a primeira letra do nome para maiúsculo.

#Identificando o ponto de falha

Se você chegou até este ponto, é porque está bem próximo de encontrar o ponto de falha. Com o uso combinado da simulação, breakpoints e monitoramento do estado das variáveis, estamos cara a cara com o erro.

Acabamos de passar pelo estágio de avaliação de expressão e vimos que: quando o campo nome é preenchido, o resultado da chamada split(”) retorna um array, e o erro não ocorre.

Mas quando deixamos o campo nome vazio, o resultado do split(”) retorna vazio, e o erro ocorre. Como o nome não foi informado, por consequência não temos um array gerado. É justamente neste momento que a falha ocorre.

#Aplicando a correção

Chegou o momento de aplicarmos a correção. Após investigação e identificação do ponto de falha, vamos agora pensar em uma solução e aplicar a correção necessária. Sabendo que não faz sentido aplicarmos uma transformação no campo nome, quando este estiver vazio. Podemos checar se o campo nome está vazio

ou se o resultado da chamada split(”) não é um array. Se a condição for satisfeita, não seguimos com a transformação do campo nome (transformar a primeira letra do nome em maiúsculo). Assim, a causa raiz que dispara a exceção/erro será corrigida.

#Mais sobre Debug

Você sabia que um processo de debug pode se útil em outras situações? Mas quais seriam elas? Podemos aplicar a mesma técnica para entender como um determinado código se comporta e também tirar proveito do debug para fazer engenharia reversa de um projeto.

Por hoje é só, fiquem agora com o vídeo que preparei para vocês. Go Go Go

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3
Curso Relacionado

[Conclusão]

Na aula de hoje [Javascript Debugging | Como fazer debug de javascript no Google Chrome | JS | SW9], você aprendeu a utilizar a ferramenta de debug incorporada ao navegador Google Chrome para realizar debug de códigos Javascript. Seguindo o workflow apresentado nesta AULA, chegamos à conclusão de que é possível simular, rastrear, identificar e corrigir qualquer tipo de erro (seja uma exceção disparada pelo navegador ou um erro de lógica).

Está disponível na minha área de downloads o projeto utilizado nesta AULA. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.

Dentro da minha área de Downloads, procure pela pasta JAVASCRIPT/DEBUG. O resto é com vocês :-)

Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.

Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.

Fiquem com Deus e até o próximo vídeo.

[Links úteis]

Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph

Link do vídeo: https://youtu.be/aDFOsMZr-Ng

PlayList Cloud 9: https://goo.gl/7aQbD6

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/

Meu Blog: http://blog.sw9.com.br

Meu GitHub: https://sw9brl.github.io/MyGitHubPage

Canal youtube: https://youtube.com/+sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

Tópicos Relacionados

Deixe um comentário

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Paulo Eduardo
Geek desde criança, sempre me interessei por games, filmes e tecnologia. Sou graduado em engenharia da computação pela PUC Campinas. Possuo mais de 15 anos de experiência em desenvolvimento, com foco maior em desenvolvimento web, gestão de times e mais recentemente desenvolvimento mobile utilizando HTML e Javascript.

Termos como #backend, #frontend e #fullstack fazem parte do meu dia a dia.

Não deixe de acompanhar meu blog, canal youtube e meus produtos digitais.

Divirta-se e bons estudos. :-)
Paulo Eduardo on sabyoutubePaulo Eduardo on sabinstagramPaulo Eduardo on sabgithubPaulo Eduardo on sabfacebook
✌(◕‿-)✌ Tempo Limitado - Tenha acesso a nossa área de DownloadsClique Aqui - É Grátis
How to whitelist website on AdBlocker?