Como debugar aplicações AJAX/PHP com FirePHP

Tradicionalmente, existem duas maneiras de se debugar uma aplicação server-side: você pode utilizar qualquer uma Integrated Development Environment (IDE) com algum build-in debugger ou registrar seus processos de depuração exibindo no próprio browser.

Neste artigo veremos uma forma elegante, simples e mais sustentável de se debuggar aplicações Ajax via browser (especificamente o Mozilla Firefox). Você vai aprender a turbinar o seu Firefox unindo o Firebug e o FirePHP, tornando-o uma elegante ferramenta de depuração.

Introdução

Quando técnicas como Ajax se tornam populares nos ambientes de desenvolvimento, é comum que junto surjam também novos desafios, por exemplo: como podemos debuggar requisições e respostas Ajax de forma eficiente para aplicações complexas?

Se utilizar um debugger foi difícil o suficiente com um modelo RESTful, interceptar uma requisição ajax específica é um saco e um pouco mais difícil. Geralmente o dumping de logs e informações destas transações devem ser feitas via JSON ou XML.

É aqui que o FirePHP ajuda, permitindo que você registre suas mensagens de debug dentro do console do Firebug. O FirePHP não faz uma bagunça no seu código (e não exige que você modifique nada para pegar erros). As mensagens que você imprime são enviadas para o browser através de HTTP response headers, ou seja, as suas mensagens de debug não vão “quebrar” as respostas das suas requisições com mensagens e erros de debug e fazendo parar de funcionar toda a sua aplicação. A resposta vem limpa e todo o processo de depuração vem catalogado no console do Firebug. Isso faz com que o FirePHP não seja só o aplicativo ideal para você debugar suas aplicações PHP, mas também o seu PHP codebase inteiro.

O que é o FirePHP?

O FirePHP é um add-on para um add-on (ahn?): ele estende o popular Firebug. O FirePHP é grátis e fácil de instalar através da seção Mozilla Add-Ons no site oficial da Mozilla. O site oficial do FirePHP pode ser encontrado neste endereço: www.firephp.org,e Christoph Dorn é a pessoa responsável pela criação do FirePHP.

O que eu preciso para iniciar?

Como você deve ter adivinhado, são necessáriastrês coisas para fazer com que o FirePHP funcione, são elas:

  1. Firefox
  2. Firebug
  3. FirePHP

Se você não tem um ou todas as aplicações listadas acima, você pode clicar no link respectivo de cada uma delas e receber instruções de como instalá-las de forma adequada.

Se você está começando agora a estudar um pouco mais sobre web development, o FirePHP pode ser um pouco “manhoso” no começo, mas o projeto é acompanhado por uma boa documentação e você pode aprender facilmente.

Instanciando a API OO

No seu script, você pode utilizar o bloco de código abaixo para instanciar o FirePHP ($firephp):

require_once('FirePHPCore/FirePHP.class.PHP');
$firephp = FirePHP::getInstance(true);
$firephp -> [classmethod];

Instanciando a API OO com os métodos estáticos

Esse é o formato como você deve chamar os métodos do FirePHP:

require_once('FirePHPCore/fb.PHP');
FB::[nameofmethod];

A API Procedural

E aqui está como se utiliza a API procedural do FirePHP:

require_once('FirePHPCore/fb.PHP');
fb($var);
fb($var, 'Label');
fb($var, FirePHP::[nameofmethod]);

Nós não vamos entrar em detalhes com relação aos benefícios em utilizar cada uma das APIs, cabe a você decidir a melhor forma para VOCÊ. Em outras palavras, eu não quero iniciar uma guerra para decidir qual é a melhor forma, procedural x orientada a objetos. It’s up to you.

Gravando mensagens no Firebug Console

Agora vamos detalhar as formas como você pode lidar com o Console do Firebug.

Exemplos básicos de log de mensagens

Se você está debugando um bug, o exemplo a seguir pode ser útil para você:

Fb::log("log message");

Isso vai imprimir a mensagem que você passou como parâmetro dentro do console do Firebug:

Fb::log($array, "dumping an array");

Passando um array (chega de print_r nos seus scripts) e mostrando o seu conteúdo. O exemplo acima vai mostrar a seguinte saída no seu console:

Dica: Quando você passar o mouse em cima das mensagens que foram logadas no seu console, uma janela aparece com todas as variáveis logadas, tudo tabulado de forma legível para desenvolvedor. Legal, né?

Registrando uma mensagem de Informação

Aqui vai uma forma de você exibir mensagens informativas no console:

Fb::info("information");

E o seu console exibirá assim:

Mensagens de Aviso

Segue aqui uma forma de você gravar mensagens de aviso:

Fb::warn("this is a warning");

Mensagens de Erro

Segue aqui uma forma de você gravar mensagens de Erro:

Fb::warn("error message");

Habilitando/Desabilitando o registro de logs no Console

Quando o seu site vai para o ar é muito importante que você desabilite o FirePHP para evitar que a pessoa errada veja a informação certa na hora errada (rs).

FB::setEnabled(false);

O bom de tudo isso é que você pode manter todo o código que você escreveu para debugar o seu código dentro do código, sem que você precise tirá-lo ou comentá-lo quando for para o ar. Se a sua aplicação possui um arquivo de configuração, é interessante criar uma variável dentro dele que através da qual você consiga habilitar e desabilitar o FirePHP.

Conclusão

Antes de tudo, aqui vai uma imagem com todas as mensagens possíveis de se utilizar no FirePHP:

Neste artigo, cobrimos coisas bem básicas de se fazer utilizando o FirePHP para ajudar você a debugar e ganhar informações sobre as suas requisições nas suas aplicações Ajax/PHP de forma fácil e sustentável no seu próprio browser. Eu espero que estes resultados tenham convencido você a explorar outras alternativas para debugar seu código fora da “old-school” techniques (echo’s print’s etc.). Usar o FirePHP é fácil e conveniente, dá a você muito mais opções e dados para propósitos de debug.

No futuro, pretendo cobrir recursos mais complexos do FirePHP para fazer desta simples ferramenta de debug uma ferramenta poderosa, completa e robusta.

[]’s

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: