Firebug, FirePHP e LiveHTTPHeaders: debuggers de scripts para o Firefox

Publicado: 19/11/2012 em Programação
Tags:, , , ,

Este post fora feito quando da versão 17.0 do Firefox.

1. Debug de scripts Javascript
O Firefox traz várias falicidades para debug, seja para códigos JavaScript, PHP ou conexões HTTP.

1.1 Console JavaScript
É possível ter um console para debug de scripts JavaScript através do Firefox. Além disso, é possível escrever código JavaScript diretamente para o browser com o Firefox, podendo ser uma maneira fácil de testar o código. No Fierfox, sua console é obtida através do menu Ferramentas -> Desenvolvedor Web -> Console da Web

A janela de console do Firefox será mostrada, conforme a imagem abaixo.

Imagem: console Firefox

Como pode ser visto pela figura anterior, o console exibe quatro tipos diferentes de mensagens, que podem ser ligadas através dos botões – solicitações de rede, mensagens de CSS, mensagens de JavaScript e mensagens ao desenvolvedor web. Mas o que é uma mensagem ao desenvolvedor web? É uma mensagem impressa no objeto “window.console”. Por exemplo, poderíamos executar o código JavaScript window.console.log("Olá Mundo"); no “rascunho” do Firefox (veja mais adiante) para imprimir uma mensagem de desenvolvedor para o console. Os desenvolvedores da Web podem integrar essas mensagens em seu código JavaScript para ajudar na depuração.

O interpretador da linha de comando
Na parte de baixo da janalea do console do Firefox existe uma caixa para o usuário entrar comandos. O desenvolvedor pode utilizar expressões JavaScript que em tempo real serão interpretadas. Qualquer expressão JavaScript que seja digitada será avaliada, e o resultado será enviado para o log do console. Pode-se fazer muitas coisas, como cálculos simples para avaliar expressões complexas, e até mesmo incluir variáveis definidas na página atual. Exemplos de comandos:

> 600+10
  610
>

1.2 JavaScript Scratchpad (Rascunho)
O Scratchpad é obtido através do Firefox seguindo o menu Ferramentas -> Desenvolvedor Web -> Scratchpad
Abaixo, a imagem da tela desta ferramenta de auxílio ao desenvolvimento de código:

Firefox Scratchpad

Exemplo de comandos JavaScript:

alert("Olá mundo");
window.console.log("Esta é uma mensagem enviado do scratchpad");

Para o primeiro comando acima, será aberta uma mensagem popup na tela do navegador. Para o segundo comando será escrito uma mensagem de desenvolvimento no console web (conforme já explicado anteriormente).

2. Debug de scripts JavaScript com Firebug
Logo do FirebugFirebug se integra com Firefox para colocar um conjunto de ferramentas de desenvolvimento nas mãos do usuário enquanto se navega na web. Com ele é possível editar, depurar e monitorar o comportamento de CSS, HTML e JavaScript em qualquer página web. Sem interferir na lógica do programa, com o auxilio do Firebug o programador poderá inserir em seu código JavaScript linhas que o irão ajudar a depurar seu script. São algumas funções que quando chamadas imprimem mensagens com um visual colorido e distinção semântica.

Veja alguns exemplos de mensagens enviadas ao console do Firebug na figura logo a seguir, considerando o recorte de código abaixo:


var mens = "teste de depuração";
var user = "João";
var score = 1000;
console.log("meu primeiro echo do JavaScript");
console.log("meu segundo echo do JavaScript: ",mens);
console.info("meu terceiro echo do JavaScript: ",mens);
console.warn("meu quarto echo do JavaScript: ",mens);
console.error("meu quinto echo do JavaScript: ",mens);
console.warn("%cUsuário %s tem %d pontos", "color:orange; background:blue; font-size: 16pt", user, score);

Onde pode-se utilizar:
%c – Formatar a saída de acordo com o estilo CSS fornecido.
%s – Formatar o valor como uma “string”.
%d – Formatar o valor como um “integer” (poderia também utilizar-se %i).
%f – Formatar o valor como “floating point”.
%O – Formatar o valor como um “expandable JavaScript object”.
%o – Formatar o valor como um “expandable DOM element” (como do painel DOM).

Tela do console do Firebug com mensagens

Firebug adiciona uma variável JavaScript global chamada “console” para todas as páginas carregadas no Firefox. Este objeto contém muitos métodos que permitem ao programa enviar ao console do Firebug informações que estejam fluindo através dos scripts JavaScripts que estejam em execução. Veja informações completas em Console API.

2.1 Configurar pontos de interrupção com o Firebug
É muito fácil configurar pontos de interrupção (“break points”) com o Firebug em códigos JavaScript. Basta ir ao painel “Script”, selecionar o arquivo de script desejado (fazendo o seu código aparecer), e então clicar em cima do número da linha onde se deseja o ponto de interrupção. Uma marca vermelha aparecerá antes do número da linha que contiver um ponto de interrupção. Vários pontos de interrupção podem ser inseridos cumulativamente.

Quando o script for executado e atingir uma linha com ponto de interrupção, o Firebug suspenderá sua execução (antes que o código desta linha seja executada), como ilustra se seguinte figura:

Tela do Firebug mostrando um ponto de interrupção

Note a marca vermelha antes do número da linha 1158 (indicando o ponto de interrupção), e sobreposto a esta marca um pequeno triangulo amarelo. Esta marca amarela indica a próxima linha do script a ser executada, ou seja, o código do script fora executado até a linha imediatamente anterior a que contém o ponto de interrupção.

Na última figura acima duas áreas especiais A e B com elipses vermelhas foram destacadas:
a) área A: 5 botões, com os seguintes significados (nesta ordem):

  • “return” (shift+F8): retorna ao início;
  • “continue” (F8): permite retomar normalmente a execução do script do ponto que fora interrompido (não usa a forma passo-a-passo);
  • “step into” (F11): passo-a-passo, onde se executa também na forma de passo-a-passo o corpo das outra funções que forem encontradas ao longo da execução;
  • “step over” (F10): passo-a-passo, onde NÃO se executa na forma passo-a-passo o código interno das outra funções que forem encontradas ao longo da execução;
  • “step out” (shift+F11): permite retomar a execução do script e vai parar no próximo ponto de interrupção.

b) área B: três janelas estão disponíveis:

  • Observar: pode ser auditado o valor das variáveis do script naquele momento de parada;
  • Pilha: um trace com a pilha de chamadas (semelhante a função console.trace() );
  • Pontos de interrupção: mostra os pontos de interrupção existentes.

2.2 Configurar pontos de interrupção condicionais com o Firebug
Às vezes se deseja fazer uma pausa somente numa condição muito específica. O Firebug permite que se defina pontos de interrupção condicionais, que verificam uma expressão que deve ser verdadeira para que seja interrompida a execução do script.

Para definir um ponto de interrupção condicional, basta clicar com o botão direito em qualquer número da linha. Um formulário será exibido, solicitando que se digite uma expressão JavaScript. Pode-se clicar com o botão direito novamente a qualquer momento para alterar a expressão, ou clique com o esquerdo do mouse para remover definitivamente o ponto de interrupção. A figura abaixo mostra uma tela para inserção de um ponto de interrupção condicional:

Tela do Firebug para inserção de ponto de interrupção condicional

Por exemplo, poderia ser digitado neste formulário: a == 1. Assim, só haveria a interrupção do script se a variável “a” tivesse valor 1. A avaliação é feita antes da execução do código JavaScript da linha em que fora inserido o ponto de interrupção condicional.

2.3 Pontos de interrupção com a instrução “debugger”
A instrução “debugger” do JavaScript atua como um ponto de interrupção: a execução do script é interrompida e se pode utilizar o Firebug para auditar os valores das variáveis, examinar a pilha de chamada, etc. Note que só haverá a interrupção do script se houver um depurador em execução. Abaixo exemplificamos um fragmento de código JavaScript com a instrução debugger:
var mens = "teste de depuração";
var user = "João";
debugger;
var score = 1000;

A instrução debugger fora adicionada formalmente na linguagem por ECMAScript 5.

2.4 Comando “trace” do Firebug
Basta chamar console.trace() e o Firebug irá escrever as informações de um rastreamento (trace) da pilha para o console. Não só ele irá informar quais as funções estão na pilha, mas ele irá incluir também o valor de cada argumento que foi passado para cada função. Você pode clicar nas funções ou nos objetos para inspecioná-los.

Observe o exemplo de recorte de código abaixo e sua respectiva saída no console do Firebug, conforme mostrado a seguir.


function fsis_principal(p_acao, p_indicador) {
'use strict';
function e(){console.trace();}
function d(){ e();}
function c(){ d();}
function b(){ c();}
function a(){ b();}
a();

Tela com saída no console do Firebug para sua função trace.

2.5 Outras facilidades do Firebug
a) Ir diretamente para determinada linha do script
Muitas vezes se deseja visualizar diretamente o código do script a partir de uma determinada linha. Fazer isso não poderia ser mais fácil, basta digitar o número da linha na caixa de pesquisa rápida, precedido pelo sinal “#”, como se vê na captura de tela abaixo.

Tela do Firebug dando opção para mostrar determinada linha do código

3. Debug de scripts PHP com FirePHP
3.1 Introdução

FirePHP iconQuando necessitamos fazer debug de aplicações PHP, a maneira mais imediata é verificar o conteúdo das variáveis do PHP, obtendo seus valores diretamente nas páginas web de saída da plicação através de instruções “echo”, “print_r” ou similares. Outras possibilidades mais potentes, ainda que requeira mais preparação, seria:
(a) utilizar um sistema de Debug, como o que existe no Eclipse ou em outras Integrated Development Environment (IDE) de desenvolvimento de PHP com algum build-in debugger;
(b) registrar os processos de depuração exibindo no próprio navegador (browser).

O que estamos tratando neste post é a opção de se registrar as mensagens de debug dentro do console do próprio navegador. Vamos utilizar o navegador Firefox e as extensões FireBug e FirePHP. Isso será muito vantajoso, observe:
– simples de instalar e de se usar as facilidades de debug;
– não realização de bagunça no código do programa pois não se exige modificações de nada para capturar os erros;
– as mensagens que são criadas são enviadas diretamente para o navegador através de “HTTP response headers”, ou seja, as mensagens de debug não vão “quebrar” as respostas das requisições do programa com mensagens e erros de debug e fazendo parar de funcionar toda a aplicação. Ou seja, as mensagens não aparecem na tela de saída da plicação não molestando a visualizaçao dos resultados dos scripts PHP.
– resposta vem limpa e todo o processo de depuração vem catalogado no console do Firebug.

Como funciona FirePHP
O complemento FirePHP tem a particularidade de enviar mensagens ao console do Firebug, sem que estas apareçam na tela de saída do programa. As mensagens que podem ser enviadas são:
(a) simples log, com o conteúdo de qualquer elemento que necessite ser visualizado (como variáveis criadas no PHP);
(b) mensagens informativas;
(c) mensagens de erro;
(d) mensagens de warning.

3.2 Instalando
3.2.1 Quanto ao ambiente do cliente
Para fazer o FirePHP funcionar é necessário ter instalado:

Tanto Firebug como o FirePHP são instalados como extensões do Firefox através do menu Ferramentas -> Complementos do Firefox.

3.2.2 Quanto ao ambiente do Servidor
(a) Instalar a biblioteca FirePHPCore
Download standalone ou instale pelo PEAR conforme instruções.
Obs:

    • se optou por fazer o download standalone, extraia os arquivos numa pasta auxiliar qualquer:

$ unzip firephp-core-0.4.0.zip (0.4.0 foi a versão existente no momento deste post). Será criada uma pasta firephp-core-0.4.0 onde os arquivos serão extraídos. Os arquivos que serão relacionados neste posto logo adiante estarão contidos no caminho “firephp-core-0.4.0/lib/FirePHPCore/”

  • se utilizar o PEAR, no momento deste post a biblioteca é instalada em /usr/share/php/FirePHPCore/

(b) Fazer uma cópia da biblioteca FirePHPCore
Disponibilize uma cópia da biblioteca FirePHPCore no documentRoot do script a ser depurado. Se for /var/www, a biblioteca deve ficar assim:
/var/www/FirePHPCore/FirePHP.class.php
/var/www/FirePHPCore/FirePHP.class.php4
/var/www/FirePHPCore/fb.php
/var/www/FirePHPCore/fb.php4

Obs:
i. se a instalação fora realizada através do PEAR e se o repositório PEAR estiver no include path este passo pode ser opcional.
ii. a diferença entre fb.php e FirePHP.class.php é que o arquivo fb.php tem o código para poder acionar o FirePHP por meio de funções ou procedimentos e FirePHP.class.php contém uma classe para poder fazer basicamente as mesmas coisas, mas por meio de programação orientada a objetos.

3.3 Utilizando
Veja um pequeno exemplo de arquivo PHP, disponibilizado em /var/www/teste.php


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
#Include a classe FirePHP
# require_once('FirePHPCore/FirePHP.class.php');
require_once('FirePHPCore/fb.php');
#Start buffering the output. Not required if output_buffering is set on in php.ini file
ob_start();
# buscar variavel de referência do firePHP
$firephp = FirePHP::getInstance(true);
# FB::setEnabled(false);
function testar1() {
echo "que legal-1"."<br>";
}
function testar2() {
echo "que legal-2"."<br>";
}
$todays_date = date('l jS of F Y h:i:s A'); /* data de hoje */
$firephp->log($todays_date, 'Date');
$firephp->log("minha mensagem de log");
$firephp->info("minha mensagem de informação");
$firephp->warn("minha mensagem de warning");
fb("minha nova mensagem de aviso",FirePHP::WARN);
$firephp->error("minha mensagem de alerta de erro");
$var = array('a'=>'pizza', 'b'=>'biscoitos', 'c'=>'doces', 'd'=>'sucos');
$firephp->log($var);
$firephp->info($var);
fb('Hello World!', FirePHP::TRACE);
testar1();
testar2();
?>

A saída do FirePHP para o exemplo acima seria:
Saída do FirePHP

3.4 Observações
a) Sobre FB::setEnabled(true|false)
Se refere a habilitar/desabilitar o registro de logs no Console. Quando o site vai para produção é importante que o FirePHP esteja desabilitado para que cesse o envio das mensagens de depuração. Assim, o código de chamadas do FirePHP escrito para debugar o programa não será necessário retirá-lo (pelo menos no primeiro momento).

b) Janelas com informações adicionais
Quando se passa o mouse em cima de algumas mensagens que foram logadas no console do FirePHP, uma janela aparece com todas as informações logadas, tudo tabulado de forma legível para desenvolvedor. No exemplo acima, é o caso, por exemplo, do log de “info($var)”.

c) Visualização do TRACE
Um click simples no label “Hello World!” do exemplo acima servirá para mostrar o trace inteiro.

3.5 Problemas de cache
O cache do navegador pode ser um problema na visualização dos resultados durante o desenvolvimento. O desenvolvedor poderá estar vendo um resultado no navegador que não corresponde ao código recém modificado. Assim, é recomendado:
a) desativar o cache nas configurações do navegador;
b) desativar o cache através das opções do FirePHP, conforme figura abaixo:
Desabilitar o cache no FirePHP

4. LiveHTTPHeaders
Live HTTP Headers Firefox é um ferramenta que exibe numa janela os cabeçalhos HTTP de cada requisição, auxiliando na verificação de erros de rede. As informações dos cabeçalhos também podem ser exibidas numa barra lateral, e as URLs das requisições que serão analisadas podem ser definidas como expressões regulares.

Tela do LiveHTTPHeaders

Referências:
1- Firebug – Web Development Evolved
2- Install FirePHP
3- Como debugar aplicações AJAX/PHP com FirePHP
4- Variáveis globais do Firebug
5- Live HTTP Headers
6- Debugging PHP Code with FirePHP

Anúncios
comentários
  1. Adriano disse:

    Parabéns! Ótimo post!

Deixe um comentário, pois isto é muito motivante para continuarmos este trabalho

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