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

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

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

Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2019/04/09/javascript-debugging-como-fazer-debug-de-javascript-no-google-chrome].

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

Apesar do navegador Firefox tradicional possuir a ferramenta de debug, nesta AULA usaremos uma versão do Firefox desenvolvida exclusivamente para quem trabalha com projetos Web. Você já conhecia esta versão para desenvolvedores? Ela se chama Firefox – Developer Edition e possui uma infinidade de outros recursos, além é claro da ferramenta de debug.

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

Na primeira AULA, você teve contato com a ferramenta de debug do Google Chrome, e agora chegou a vez da ferramenta de debug do Firefox – Developer Edition.

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

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 soma entre dois números, 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.

O navegador Firefox possui 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- 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;

3- 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;

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

Se compararmos as opções de breakpoints entre Google Chrome e Firefox, você vai notar que o Chrome é mais rico neste quesito.

Em nossa AULA prática usaremos o breakpoint de linha e de código (itens 1 e 2).

#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 [Scopes]. 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 soma, vamos avaliar qual é o tipo de variável associado ao primeiro e segundo número digitados pelo usuário.

#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 as variáveis que armazenam os números digitados pelo usuário são do tipo ‘string’.

É justamente por isso que ao realizar a tentativa de soma, os dois valores são concatenados e não somados.

#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. O objetivo é converter os valores digitados pelo usuário de ‘string’ para ‘number’. Faremos essa conversão usando a função parseInt. Assim, a operação de soma vai se comportar da forma correta e o problema será corrigido.

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

Está disponível na minha área de downloads o projeto que usamos 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/jJINWbrHLXE

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