How to Debug PHP Using Firefox with FirePHP

Jul 11 2009 by Nuno Franco da Costa | 45 Comments

Typically, there are two main ways of debugging server-side code: you can utilize an Integrated Development Environment (IDE) with a built-in debugger or log and perform your debugging processes in a web browser.

How to Debug PHP Using Firefox with FirePHP

This article shares an elegant, simple, and more maintainable way of debugging Ajax apps via the web browser (more specifically for the Mozilla Firefox browser). You’ll learn the basics of leveraging Firefox in conjunction with Firebug and FirePHP to implement FirePHP libraries on web apps and logging messages in the Firebug console.

A Brief Introduction

When Ajax techniques became popular, developers faced a new problem: how can we debug Ajax requests and responses efficiently for complex web applications? If using a debugger was hard enough with the RESTful model, triggering an Ajax-specific request is a pain and a bit more difficult; dumping logs and information pertaining to those Ajax operations had to be done using JSON or XML.

A Brief Introduction

This is where FirePHP helps, allowing you to log your debugging messages to the Firebug console. FirePHP doesn’t mess with your code (and it doesn’t require you to modify anything to trap errors): the messages you print are sent to the browser in the HTTP response headers, which is great when you’re using JSON or XML since it won’t break their encoding.

This makes FirePHP ideal not only for debugging your Ajax requests, but also your entire PHP codebase.

So, what is FirePHP?

FirePHP is an add-on for an add-on: it extends the popular in-browser web development tool called Firebug with an API for PHP web application developers. FirePHP is free and easily attainable via the Mozilla Add-Ons section on the official Mozilla site. The official FirePHP site can be found via this web address: www.firephp.org. Christoph Dorn is the person responsible for creating FirePHP.

What Do I Need to Get Started?

As you might have guessed, you need three things to get up and running with FirePHP, they are:

  1. Firefox
  2. Firebug
  3. FirePHP

If you don’t have all of the above applications installed on your machine, click on their link to learn about how to download them for your particular system.

Installation of the three things above is a straightforward process. FirePHP can be a little tricky to install if you’ve just recently started learning about web development, but there’s good documentation out there about it.

This article is about using FirePHP, so I’ll let you handle the installation part (though feel free to ask in the comments – we’d be happy to help if you encounter issues).

A Couple of Tips

Once you’ve installed FirePHP, and included it in your web application, you are ready to debug and log data. But first, I’d like to share two helpful tips I’ve learned:

Tip #1: call ob_start()

Because the information is sent to Firebug in the HTTP Headers, you should activate the output buffering or you might get the "headers already sent error". It may sound complicated, but all you have to do is write ob_start() on the first line of your PHP script that you’re debugging.

Tip #2: don’t forget to disable FirePHP Logging when you go live

You have to disable FirePHP when the site goes live or you will risk exposing sensitive information to anyone that has Firebug/FirePHP installed (we’ll talk about how to do this later down the article).

And then just a general tip for Firebug/FirePHP users: it’s also a good idea to disable or suspend Firebug and FirePHP when you’re just browsing the web because they can really slow down some websites and web applications (such as Gmail, for example).

Getting Started with FirePHP Logging

This is the fun part where we start logging messages and reviewing the basic logging functions.

One thing to note is that, just like PHP, which (at least for PHP4 and PHP5) is a "pseudo object-oriented" language, you can use FirePHP in a procedural or object-oriented (abbreviated OO from now on) manner.

I prefer the object-oriented techniques and I encourage you to use the same pattern as it is considered the most popular and most modern approach to building apps.

The OO API allows you to instantiate a Firebug object to use it or to call its static methods directly. I’m a lazy guy and because static methods are more terse and require less typing, that’s what I use.

Instantiating the OO API Object

In your script, you can use the following code block to create the FirePHP object ($firephp).

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

OO API with Static Methods

This is the format for calling static methods in your scripts.

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

The Procedural API

Here’s how to use FirePHP’s Procedural API:

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

We will not get into any detail about the benefits and coding style of each API, I’ve included them here only so you see what options are available for you. In other words, I don’t want to start a flame war about which procedure is better – it’s up to you to decide and I’ve noted my preference.

Logging Messages and Information in the Firebug Console

Let’s talk about logging messages in the Firebug console (remember, this will only work if you’ve configured your app for FirePHP).

Examples of Basic Logging Calls

If you are ad-hoc debugging a bug, the following examples are what you’ll be interested in utilizing.

Fb::log("log message")

This will print a string that you pass to it onto the Firebug console. Using the above example results in the following message:

Log message.

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

Passing an array (no more for loops or print_r() in your scripts) outputs the content of your array. The above example will result in the following message in the Firebug console:

Dump message array

Tip: when you hover your mouse on logged variables in the Firebug console, an info window will appear in the web page containing all of its elements. It’s a nifty feature, don’t you agree?

Variable Viewer

Logging an Information Message

Here is an example of logging information messages using the info method.

Fb::info("information")

This is the message it logs in your Firebug console:

info message.

Logging a Warning Message

Here is an example of logging a warning message.

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

This is the message it logs in your Firebug console:

Warning message

Logging an Error Message

Here is an example of logging a warning message using the info method.

Fb::error("error message")

Here’s what an error message looks like in the Firebug console:

Error message.

Enabling or Disabling FirePHP Logging

When your site goes live, you can (and should) disable FirePHP logging. Call the following line of code on the first lines of your script.

FB::setEnabled(false);

What’s great about this is that you can leave all of your FirePHP code in your scripts for later use – just pass either true or false when you want to turn logging on or off.

If your application uses a "config file" to keep track of global settings, it is advisable to set a configuration option to enable or disable it.

Conclusion

First, here’s a screen capture showing all of our messages in Firebug all at once (I ran it sequentially).

Conclusion: all together now

In this article, we covered the very basics of using FirePHP to help you debug and gain information about your PHP/Ajax applications easier and through the web browser. I hope that this results in you becoming convinced that you should explore your debugging options outside of "old-school" techniques such as using echo or print on top of your web page layout to see what a variable or array contains. Using FirePHP is so easy and convenient, and gives you much more options and data for debugging purposes.

In a future article, I’ll be covering more complex features of FirePHP and using Firebug to make this simple debugging tool a more robust and fully-featured logging framework.

So stick around, don’t forget to subscribe to the Six Revisions RSS feed so you get a note when that article is posted. * Article edits by Jacob Gube

Related content

About the Author

Nuno Franco da Costa is a web developer and sys admin. By day, he works at a design agency coordinating the development and sys admin teams where he developed a PHP MVC framework and a WEB 2 CMS. He loves to code and has a "getting things done" attitude. You can find over at his online presence www.francodacosta.com

45 Comments

Artisan

July 11th, 2009

Thank you for this post. It’s brillant !
How can we apply these tips on Ruby on rails dev ?

nuno costa

July 11th, 2009

@Artisan

I’m glad you liked.

There’s a firephp extension for ruby, you can find it here http://www.firephp.org/Wiki/Libraries/Ruby

Nuno Santos

July 11th, 2009

Hei Nuno,

Great job! Nice article.

I have some debugging tools in my framework and will add firephp too.

Abraço

Jay

July 11th, 2009

Great articel! I want to use FirePHP but never have time to read the manual :-)

Jake

July 11th, 2009

Never knew anything this useful existed, really cool add-on for FF!

Antonin Hildebrand

July 11th, 2009

FirePython is a similar tool for Python developers (i.e. Google App Engine)

http://firepython.binaryage.com

.net

July 11th, 2009

Just switch to .NET for better debugging. PHP is reaching its limits.

TweetTrail

July 11th, 2009

FireFox and Fire bug are awesome for Ajax debugging. There is ColdFire for ColdFusion and Railo ( CFML ) available here: http://coldfire.riaforge.org/

-S

July 11th, 2009

> FirePHP doesn’t mess with your code

You mean… besides calling ob_start(), instantiating FirePHP, filling your code with calls to fb() or Fb::Log(), all of that for a glorified var_dump(). You won’t go very far that way: do yourself a favor and spend the same amount of time installing xdebug and Eclipse PDT and enjoy real debugging.
Excellent article here:
http://devzone.zend.com/article/2930-Debugging-PHP-applications-with-xdebug

Josh Ribakoff

July 12th, 2009

What I like to do is use my IDEs debugger. I simply goto the action I am trying to debug and place debugBreak(); then I trigger the ajax call from the browser client. Execution will pause on the debugBreak() line automatically and you can step thru line by line and view the values of variables etc, set other breakpoints, etc…

bucabay

July 12th, 2009

I second using XDebug. Even though FirePHP is awesome in itself, XDebug gives you true debugging capabilities in PHP. FirePHP is more of a logging utility.

TomTom

July 12th, 2009

Hi,

In your examples,
Fb::log(“this is a warning”)
Fb::log(“error message”)

I think you meant
Fb::warn(“this is a warning”)
Fb::error(“error message”)

John

July 12th, 2009

Great share! This is certainly an neat and interesting tool, but I think I will stick to Zend Studio for my debugging.

nuno costa

July 12th, 2009

@TomTom

You are correct, it was a stupid typo I made, it will be corrected soon

Thanks for noticing

nuno costa

July 12th, 2009

@bucabay

Indeed FirePhp is more of a logging tool than a debug tool, but is great for had hock debugging.

I prefer to use firephp instead of a debugger when I need to know only variable values.
When debugging logic or flow problems a true debugger does make sense.

As almost all web developers code server and client stuff, firephp is helpful as you get all your info in the same place.

If you take a closer look at this article presentation image you can get an hint on what we will talking next

nuno costa

July 12th, 2009

Please note, this is not an definitive guide on how you should debug your code.

The purpose of this article is to show you another option

You should choose which method best suits your style and needs

Custom PHP

July 13th, 2009

Thank you for taking the time to outline this tool for us. Debugging browser based applications can be a challenge.

Angela

July 13th, 2009

This is really valuable information.

Jacob Gube

July 13th, 2009

@Soner Gönül: Nice set of links, thanks for sharing.

@Jay: It’s pretty simple to set up and before FirePHP, I used old-school echo $var and now I realize that’s so inefficient. The worst is when you get careless with your variable naming (i.e. $test)and you forget to take out your line and now you’re stuck mass search-and-replacing your entire project.

@Antonin Hildebrand: Cool link, thanks for sharing that to the Python devs here.

@-S and @bucabay: I’ve used Xdebug before, I may end up writing a tutorial about it or having someone (*hint, hint*) do it for Six Revisions. I think there’s no right or wrong answer when choosing between a debugger – it’s really up to your preferences; Nuno likes in-browser debugging with Firebug + FirePHP’s API, some may want a more robust solution.

@TomTom: Thanks for that, I should’ve caught that – should be fixed now.

@nuno costa: Awesome job and I look forward to the second part. I think this was a great intro to FirePHP, at least enough for people to check out and get interested in, now we gotta show them what other things it can do to improve debugging workflow!

web development sussex

July 13th, 2009

Great extension to native firebug. Will be adding this to the collection of debugging PHP resources! Thanks fo the post!

hosein

July 14th, 2009

firebug is best plugin for firefox! best fo eva!

Frank

July 15th, 2009

Thank you for the introduction. Useful. I was looking for something like that and would appreciate to read in you future article about setting breakpoints and related FirePHP functions…

Techi

July 16th, 2009

Nice tutorial. Luckily all I have to do in Zend Framework for database profiling and error reporting is
$db->setProfiler(new Zend_Db_Profiler_Firebug(‘All DB Queries’));

Chandima

July 19th, 2009

If you are using Firebug to debug wordpress plugins and themes. The WordPress-Logger plugin will save you some steps. It works with Firefox using firebug, Safari and Opera.

http://www.turingtarpit.com/2009/05/wordpress-logger-a-plugin-to-display-php-log-messages-in-safari-and-firefox/

Taufik

July 27th, 2009

Nice post.PHP is used mainly in server-side scripting, but can be used from a command line interface or in standalone graphical applications. Textual User Interfaces can also be created using PHP.

Sarah

July 31st, 2009

Firebug is one of my favorite web tools. Thank you so much for this article– I can’t wait to try out FirePHP on my next project!

danduanilkumar

September 5th, 2009

hello guys,
I need help regarding firephp, firebug, rightnow i installed
both in my firefox browser using addons and i also activated the firebugconsole,But I don’t know how to use this firephp and firebug for debugging my php application before going to live, please help me how start the debugging my application using these tools…

essjam

September 19th, 2009

Working on the new CSS and PHP now for my site now and need to debug some WordPress code. Nice article, told me the exact products I needed. thx

Php Developers

October 2nd, 2009

Firebug is my favorite tool for debug php. Thank you for writing about it and share with us.

dizzley

October 29th, 2009

Thanks a bunch for this. It got me up and running in 15 mins.

Dave Doolin

October 29th, 2009

Is the second part published? Couldn’t find it.

rolf

December 4th, 2009

Basically, its candy-wrapped “echo” and “print”.
PHP debugging is disgusting. Give me some breakpoints…

shoaib

December 23rd, 2009

fx rocks and firebug and firephp make it even better,thnx for this gr8 post.

Nitin Reddy Katkam

January 20th, 2010

@rolf

Use an IDE (Eclipse? PhpEd?) to debug with breakpoints. Both of them are just as capable.

letsnurture

March 17th, 2010

Hi folk,

nice revolution in php.

Nice to hear that we can debug php web application like CMS(Drupal,Joomla,Wordpress blog) or framework(zend framework, symphony,cakephp..)

hoopla

March 18th, 2010

awesome job here and great post. I’ll be sure to pass on.

Gaurav

April 20th, 2010

Hi

I followed all the steps mentioned by you.I first installed the FireBug & then FirePHP.

I created a simple file class.php in my document root & put the below mentioned code in the file

ob_start();
require_once(‘FirePHPCore/fb.php’);
FB::log(‘Log message’);
FB::info(‘Info message’);
FB::warn(‘Warn message’);
FB::error(‘Error message’);
FB::setEnabled(true);

But when i open this file in the broser , my firebug do not display any log information.

Any help or suggestion would be greatly appreciated.

Thanks
Gaurav

marck_don

May 6th, 2010

Hi,

On firefox, select Tools ->Add-ons->Get add-ons->search for firebug and click to install.

eyal

July 30th, 2010

thank you great info!
there is also firebug for ie here
http://www.firebugger.com

Rak

December 11th, 2010

Firebug is also my favorite tool for debugging php. It´s cool that this addon gets another addon with firephp.

Aditya Eka

March 29th, 2011

This is very helpful. Very nice post.
Keep posting.

@twhyo

chella

April 6th, 2011

I have installed firePHP in my system. But, I couldn’t use it. I dont know where it was installed.

Yash

May 21st, 2011

Looks nice and clean way. Thanks

Arturito

May 23rd, 2011

As an alternative I use NetBeans to write code and I debug it with Google Chrome. Here is short setup:

http://arturito.net/2011/05/21/local-and-remote-php-debuging-in-netbeans-with-xdebug-on-google-chrome-just-like-in-visual-studio/

Leave a Comment

Subscribe to the comments on this article.