Depurando JavaScript no Mozilla Firefox
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.
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.
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.
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.
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.
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:
Confira também
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo