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

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

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

##Acompanhe a parte teórica na íntegra no blog:

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

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.

#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

[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).

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]

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se

[emmanuelsaraiva]

Muito boa aula, como poucas que a gente encontra! Parabéns, Paulo, e muito obrigado! Acredito que esse workflow vai ser muito interessante e útil para mim.

[zamai]

Excelente aula. Parabéns e muito obrigada!

[ricamourao]

Excelente overview em português sobre o debug do chrome dev tools!

Você poderia fazer um cursinho e explicar a fundo todas as ferramentas do Chrome DevTools (Em português não achei nada a respeito).

[gustavobrawl]

Cara se aparecer um negócio escrito debug do nada no Pc do meu amigo uma pasta mas primeiro deu um erro de inicialização pode me responder hoje por favor?