Logging, debugging e profiling de JavaScript com o Firebug
![Logging, debugging e profiling de JavaScript com o Firebug](https://www.alura.com.br/artigos/assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/firebug-logo.png)
Introdução
O Firebug -- extensão para o Firefox também disponível em versão "Lite" para outros navegadores -- é uma das ferramentas essenciais para todo programador Web, principalmente para quem tem o trabalho focado no HTML e CSS. Além disso, o console do Firebug fornece um ambiente amigável para inspecionarmos nosso código JavaScript.
Aqui na Caelum, usamos bastante o Firebug nos projetos do dia a dia e também no nosso curso de JavaScript.
![Firebug Firebug](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/firebug-logo.png)
Muitos de nós costumamos utilizar o console do Firebug simplesmente para substituir as funções "alert();
", quando queremos verificar se uma função foi chamada, qual é o valor de determinada variável em determinado ponto do nosso código ou coisas do gênero. A verdade é que o console do Firebug tem muito mais a nos oferecer. Nesse post vamos conhecer algumas funcionalidades interessantes do console.
![Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto](assets/guia-de-carreira-front-end-alura/guia-de-carreira-front-end-alura-banner-corpo-mobile.png)
Mensagens no console
Apesar de já bem difundida, a função console.log()
(ou console.debug()
) pode receber uma série de argumentos diferentes para mostrar valores no console:
var nome = "Douglas Adams"; var resposta = 42;
console.log(nome); console.log(resposta);
Como resultado, temos duas linhas impressas no console do firebug:
![Saída simples no console Saída simples no console](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex1.png)
Nota: os screenshots são todos parciais, faça você mesmo para interagir com o resultado dos exemplos!
Para tornar a mensagem mais compreensível, podemos compor a resposta com as variáveis:
console.log("A resposta é " + resposta);
![Concatenação Concatenação](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex2.png)
Quando concatenamos valores para saída no console, o resultado sempre será uma String, mas podemos imprimir diversos tipos no console que, em alguns casos, nos permite uma inspeção mais detalhada do valor. Para aproveitar essa funcionalidade precisamos trocar a concatenação de valores por, simplesmente, passar múltiplos argumentos para a função:
console.log("Quem já leu", nome, "sabe a resposta:", resposta);
![Join Join](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex3.png)
O Firebug compõe nossa mensagem de modo a exibir de maneira adequada os valores ao invés de converter tudo em string
. Veja um exemplo com um objeto:
var livro = { titulo: "O Guia Do Mochileiro Das Galáxias", autor : nome };
console.log("Podemos exibir um objeto", livro, "para inspecionar!");
![Inspeção de objeto Inspeção de objeto](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex4.png)
Ou ainda podemos utilizar o estilo printf
:
console.log("Quem já leu %s sabe a resposta: %d", nome, resposta);
![Printf Printf](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex5.png)
No estilo printf
devemos informar qual tipo de informação estamos imprimindo no console para que o mesmo saiba como exibí-la, podemos utilizar os seguintes placeholders na mensagem:
- %s -> String
- %d, %i -> Number (int)
- %f -> Number (float)
- %o -> Object
Podemos ainda aplicar um estilo chamativo para indicar uma mensagem muito importante:
var estilo = "color:red;background:yellow;"; console.log("%cMensagem bem chamativa!", estilo);
![CSS no console CSS no console](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex6.png)
Se quisermos podemos utilizar um dos estilos prontos do Firebug:
console.info("Informação simples"); console.warn("Cuidado, tem algo estranho aqui!"); console.error("Ops, ocorreu um erro.");
![Estilos prontos Estilos prontos](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex7.png)
Quando temos casos muito complexos, quando queremos inspecionar um argumento a cada chamada de função por exemplo, podemos agrupar mensagens para deixar mais fácil de saber qual chamada gerou determiado conjunto de mensagens:
function descrevePersonagem(personagem) { console.group("Descrevendo", personagem.nome); // lógica da sua função console.log(personagem.nomeVerdadeiro); console.log(personagem.planetaOrigem); console.groupEnd(); }
var arthur = { nome: "Arthur Dent", nomeVerdadeiro: "Arthur Dent", planetaOrigem: "Terra" };
var ford = { nome: "Ford Perfect", nomeVerdadeiro: "Praxibetel Ix", planetaOrigem: "Betelgeuse V" };
descrevePersonagem(arthur); descrevePersonagem(ford);
![Group Group](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex8.png)
Inspeção de objetos
Quando imprimimos um objeto do console e clicamos sobre sua descrição, somos levados à aba DOM para obter uma descrição mais detalhada. Na verdade podemos imprimir essa descrição direto no console:
console.dir(ford);
![Dir Dir](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex9.png)
Podemos utilizar o console também para podermos exibir uma estrutura XML (como um fragmento de sua página por exemplo):
var twitter = document.querySelector("#tfc-followers\_count");
console.dirxml(twitter);
![DirXML DirXML](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex10.png)
Trace
Muitas vezes quando temos uma lógica muito complexa e começamos a extrair partes de nossas funções para outras funções, na intenção de reaproveitar melhor nosso código, podemos acabar nos perdendo. Principalmente quando a execução de uma função depende de uma condição.
Uma das utilidades mais interessantes do Firebug é que ele é capaz de imprimir uma lista descrevendo a função atualmente em execução, quais são seus argumentos e quais funções foram chamadas antes dela com a função console.trace();
:
function primeira(str) { return segunda(str + " primeira"); }
function segunda(str) { console.trace(); return str + " segunda" }
primeira("Trace");
![Trace Trace](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex12.png)
Teste de JavaScript
Outra funcionalidade interessante que o console nos fornece é a comparação para testes. Podemos, em determinado momento do nosso código comprarar valores com a função console.assert();
. Caso a comparação retorne um valor false
, um erro é mostrado no console:
function somaDez(num) { return num + 10; }
console.assert(somaDez(10) == 20); console.assert(somaDez(20) == 25);
![Assert Assert](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex13.png)
Performance de código
Além de poder verificar um resultado para ver se nosso código está funcionando corretamente, ainda é possível saber se não estamos escrevendo um código que resulte em um processamento lento. A funcão console.time();
nos permite fazer uma medição de tempo de proecessamento de determinado trecho de código:
var ex1 = "Exemplo 1 - while 100"; var ex2 = "Exemplo 2 - while 1000000";
console.time(ex1); var valorFinalEx1 = 0; for (var i = 0; i < 100; i++) { valorFinalEx1++; } console.timeEnd(ex1);
console.time(ex2); var valorFinalEx2 = 0; for (var i = 0; i < 1000000; i++) { valorFinalEx2++; } console.timeEnd(ex2);
![Time Time](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex14.png)
Também é possível analisar a performance de nosso código enquanto um usuário interage com nossa página, para demonstrar esse exemplo, preparamos um ambiente controlado. Nessa página você pode habilitar o console, clicar em "Run" (no menu superior da ferramenta) e depois habilitar o Firebug.
Na aba Console do Firebug, clique em Profile e clique algumas vezes nos botões "Exemplo 1" e "Exemplo 2" exibidos no painel à direita. Clique novamente em "Profile" para parar a inspeção da página. Após alguns segundos um relatório de todas as funções executadas durante sua interação será exibido.
Como o JSFiddle é uma ferramenta bem complexa que permite que você crie pequenos exemplos de como um código JavaScript funciona em determinado cenário, perceba a quantidade de funções que são chamadas durante nossa interação, que não fazem parte do nosso código!
![Profile Profile](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex15.png)
Repare que, como em muitos exemplos apresentados aqui, clicar no nome da função vai nos levar ao painel Script do Firebug, onde será exibido o código da implementação daquela função.
Debugging interativo
Aproveite que você encontrou o painel de Script do Firebug e brinque um pouco com ele. Ao clicar na barra em que é exibido o número da linha do JavaScript, podemos adicionar um breakpoint, o comportamento é muito similar ao painel de debug de IDEs como o Eclipse, Netbeans, VisualStudio e outras.
![Debug Debug](assets/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/ex16.png)
Agora que você já pode aproveitar melhor as funcionalidades dos painéis Console e Script do Firebug, já sabe o porquê da extensão estar em todas as listas de "ferramentas indispensáveis" de todo desenvolvedor Web.
Conheça também o curso da Caelum de programação front end avançada com JavaScript e jQuery.