Depurando JavaScript no Mozilla Firefox

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Veja neste artigo como depurar o código JavaScript em execução no navegador Mozilla Firefox, adicionando breakpoints e inspecionando as variáveis.

O Firefox já possui nativamente ferramentas de Debug, igualmente ao Google Chrome. A grande diferença está apenas no gosto de cada um, então fique à vontade para escolher qualquer uma das ferramentas, pois ambas são bastante eficientes. Neste artigo utilizaremos o navegador Firefox 21.0 para depuração do código.

Há ainda, para aqueles que desejam mais opções de depuração e controle, um add-on chamado Firebug disponível tanto para o Google Chrome como para o Firefox, com ele você poderá ter ainda mais recursos de depuração, mas para efeito didático utilizaremos a ferramenta nativa de depuração do Firefox.

Utilizando Firefox para debug

Vamos começar desenvolvendo uma página simples, apenas com um campo de texto e um botão. É muito importante que você separe seu código JavaScript em um outro arquivo, para poder debugar melhor e até por questões de boas práticas. O código mostrado abaixo é simples e colocar o JavaScript na mesma página do HTML pode não causar nenhum problema neste ponto, porém, ao se tratar de aplicações complexas o contexto é outro, pois fica muito mais difícil e oneroso depurar códigos que estão “quebrados em pedaços” dentro de várias páginas.

O código abaixo foi construído em uma página apenas (juntando HTML e JavaScript), pois como já foi dito é apenas um exemplo e para ir direto ao assunto principal, que é a utilização da depuração no Firefox, nós utilizaremos esse “atalho”.

Listagem 1: Página HTML com código JavaScript para depuração

<!doctype html>
<html>
<head>
  <script>
  function tratarPalavra(palavra){
    var myPalavra = palavra.toUpperCase();
    //Transforma tudo para UPPERCASE
    document.getElementById('palavra').value = myPalavra;
  }
  </script>
</head>
<body>
  <form onSubmit='tratarPalavra(palavra.value);' action='' method='post'> 
  <label>Palavra:</label><input type='text' name='palavra' id='palavra' />
  <input type='submit' name='btnProcessar' value='Processar'>
  </form> 
</body>
</html>

O código acima é bem simples e tem por função realizar a seguinte tarefa: o usuário digita qualquer palavra no campo de texto e clica no botão Processar. No método onSubmit da tag Form chamamos o método trataPalavra do JavaScript e passamos o valor do campo de texto como parâmetro.

No método trataPalavra nós convertemos a palavra digitada para UpperCase (maiúscula) e depois recolocamos a mesma no campo de texto.

1 – Vamos analisar passo a passo a partir daqui. Primeiro abra o Console de Depuração do Firefox pelo atalho: Ctrl + Shift + K. Logo em seguida clique na aba Debugger para utilizar apenas o recurso de depuração.

Console de Depuração do Firefox 21.0

Figura 1: Console de Depuração do Firefox 21.0

Esses atalhos são apenas para agilizar a aprendizagem e não perder muito tempo em coisas desnecessárias, mas todos os recursos podem ser encontrados em Firefox > WebDeveloper > Debugger.

2 – Por questões didáticas abriremos o Console de depuração em outra janela para obter uma visão melhor do código e da depuração deste. Clicando no segundo ícone no canto superior direito, ao lado direito do X, você conseguirá abrir o Console em uma nova janela e manipulá-la em toda a área do seu browser.

Mostrar Console em uma janela separada

Figura 2: Mostrar Console em uma janela separada

3 – Note que ao realizar o passo 1 e o passo 2 você já deve estar com a página aberta (essa mesmo que nós criamos na Listagem 1). Fazendo isso vamos apenas escolher um breakpoint (ponto de parada) para dizer ao depurador do Firefox onde ele deverá parar a execução para que nós possamos analisar o mesmo, passo a passo. Para adicionar um breakpoint é o mesmo processo do Google Chrome, caso você já utilize, basta clicar no número da linha onde desejamos adicioná-lo.

Adicionar um breakpoint

Figura 3: Adicionar um breakpoint

4 – Agora vamos digitar a frase “ola mundo” no campo de texto e clicar em Processar. Perceba que a execução do código irá parar exatamente na linha que queremos.

Depurando a linha 3

Figura 4: Depurando a linha 3

Logo no topo temos 4 controles básicos (Resume, Step Over, Step In, Step Out) que não serão explicados detalhadamente aqui, pois a lógica é idêntica a de qualquer IDE (Netbeans ou Eclipse, por exemplo). O Resume pula para o próximo breakpoint, o Step Over passa sobre uma determinada linha sem entrar nos métodos presentes nesta, o Step In passa sobre uma determinada linha entrando em todo e qualquer método que encontrar e o Step Out sai de um método que o Step In entrou.

No lado esquerdo temos o nome de dois métodos: tratarPalavra e onSubmit. Como você deve ter percebido, o onSubmit é o responsável por chamar o tratarPalavra.

No lado direito temos 3 divisões, que são (em ordem vertical, de cima para baixo):

1ª Divisão: Aqui ficam os Watches. Em resumo, eles servem para você monitorar o valor de determinadas variáveis durante toda a execução do código. Você pode clicar com o botão direito do mouse em cima de qualquer variável do código localizado no bloco do meio e clicar na opção “Selection to watch expression”.

2ª Divisão: Temos aqui o “Function Scope”, ou seja, escopo da função. Aqui ficam todas as variáveis que o depurador está monitorando naquele escopo. Perceba aqui algo muito importante para nosso exemplo: a variável palavra tem o valor “ola mundo” e a variável myPalavra está com valor “undefined”, isso porque ainda não executamos a linha que atribui o valor da palavra para myPalavra, isso só será feito quando utilizamos o controle Step Over do depurador.

3º Divisão: Temos aqui o “Global Scope”, ou seja, as variáveis globais que neste caso estão presentes na Window (janela), que são inúmeras.

5 – Aperte no F7 (Step Over) e o depurador passará para a próxima linha, exatamente a linha 5. Observação: ele puloua linha 7 pois lá temos apenas comentários.

6 – Perceba que o valor da variável myPalavra mudou para “OLA MUNDO”, já tudo maiúsculo como pretendíamos.

Mudança da Variável myPalavra

Figura 5: Mudança da Variável myPalavra

7 – Clique mais uma vez no F7 (Step Over) para passarmos à próxima linha e finalizarmos a depuração, o efeito será: o campo de texto terá o valor todo em maiúsculo.

Conclusão

Enfim, o processo de depuração do Firefox vem tentar melhorar o processo de controle e testes realizados no desenvolvimento de um software. Tal ferramenta é indispensável no Tool Kit de um desenvolvedor, pois com ele a produtividade com certeza aumentará.

“Aprender sem pensar é tempo perdido.”
Confúcio

Artigo relacionado:

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?