Console Logging in Google Chrome with ChromePHP

I made the switch to Google Chrome for browsing not long after it was released for Mac for a number of reasons. Just to name a few:

1. It is super fast
2. New versions are released all the time
3. They don't leave bugs sitting around for over 4 years without looking at them.

For development, however, I continued to use Firefox. I found the inspector and console to be better in Firebug, and there was no FirePHP support in Chrome.

After a while, I decided I had had enough of Firefox. If no one was going to make a Chrome extension to support FirePHP then I was going to do it myself. I wanted it to be extremely simple.

I spent one rainy day in late August on it, and the rest was history.

I just wanted to talk briefly about a few of the issues I ran into and how I got around them.

For one, Chrome's extension APIs do not allow you to access HTTP Headers on page load. That is the way that FirePHP sends its data from the server to the client. One way around this would have been to make an ajax request on every page load to the same url. This would allow you to access the headers, but it would have been far from perfect. For one, it would not work with ajax requests made on the current page. For two, if you wanted to log data on a POST request then you would have to post the data a second time which could result in multiple writes to the database or any number of other issues.

I decided to use cookies to transmit the data. This is problematic since 4kb is the maximum cookie size. This is fine for logs here and there, but for larger data sets it doesn't work too well. To get around this I built additional support for file storage. Essentially you can specify a log directory where your log will be written to as a JSON string. The server writes to this file and then on load the client requests the file via ajax and displays the logs in the console.

After getting this all working I started trying to figure out how to make it work for ajax requests. This was tricky because although the server could easily set the cookie or write to a file, the client had to know when this was happening. One way I could have done would have been to constantly poll to see if the cookie had been set in JavaScript. I didn't like this idea, but I saw that Google was working on a cookie api for Chrome 6. I decided I would try that out, and sure enough it worked well. The API lets you listen for cookie change events in the browser.

The only catch here is that the ajax request needs to include the X-Requested-With header set to XMLHttpRequest. This shouldn't be an issue since most JavaScript frameworks (including jQuery) set this header for you. What this does is it tells the server that the request is an AJAX request so the server can handle it differently. In my case the server sends back the logs one by one instead of all at once.

If you want to check out the project and documentation for yourself go to http://www.chromephp.com.

You can view the PHP source at: https://github.com/ccampbell/chromephp

You can view the extension source at: https://github.com/ccampbell/chromephp_extension