Javascript Debugging | Como fazer debug de javascript no Firefox | JS | SW9

Javascript Debugging | Como fazer debug de javascript no Firefox | 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 Firefox.

##A parte teórica na íntegra pode ser acessada no meu blog:

#O que vimos na aula passada?
Na AULA passada, você teve a oportunidade de aprender como debugar código Javascript usando a ferramenta de debug do Google Chrome.

#Estudo de caso
Ao invés de apresentar todos os recursos disponíveis na ferramenta de debug do Firefox, 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 que recebe dois números informados pelo usuário, soma estes dois números e apresenta o resultado da soma para o usuário.

Durante os meus testes, eu identifiquei um ponto de falha que não gera uma exceção e muito menos interrompe a execução. Trata-se na verdade de um erro de lógica, gerando um comportamento inesperado para uma soma. Exemplo: ao somar 1 + 1, o resultado esperado é 2, no entanto, o script gerou o resultado 11.

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.

[Conclusão]
Na aula de hoje [Javascript Debugging | Como fazer debug de javascript no Firefox | JS | SW9], você aprendeu a utilizar a ferramenta de debug incorporada ao navegador Firefox - Developer Edition 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]

##A parte teórica na íntegra pode ser acessada no meu blog:

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se