Logging, debugging e profiling de JavaScript com o Firebug

firebug-logo

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

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.

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

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

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

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

Ou ainda podemos utilizar o estilo printf:

console.log("Quem já leu %s sabe a resposta: %d", nome, resposta);

Printf

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

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

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

Inspeção de objetos

Quando imprimimos um objeto do console e clicamos sobre sua descrição, somos levados à abaDOM para obter uma descrição mais detalhada. Na verdade podemos imprimir essa descrição direto no console:

console.dir(ford);

Dir

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

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

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çãoconsole.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

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

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áginavocê 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

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

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.

Fonte: http://blog.caelum.com.br/logging-debugging-profiling-de-javascript-e-muito-mais-com-o-firebug/comment-page-1/#comment-108864

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s