FB Series: Locally debug your PHP Facebook App

Starting with Facebook applications is a rather a bumpy road. First there is the scattered and often not up-to-date documentation on the Facebook wiki. Its a pain to go through. But ok once you managed to get the important bits its ok.

What I am talking about is the testing. Its quite astonishing that this is not thought through at all: Facebook does not offer a Test environment (!). So this means developers have to test their apps in the real Facebook which means. Developers have to create 2 apps one for test one for prod with different configurations canvas urls etc. as well as create Testusers - or they want to annoy their friends with test apps.

If your like me you prefer debugging to changelogginguploadtestchangeuploadtest cycles. With Facebook Apps this was not straigthforward so therefore here is a easy end-to-end explanation for you how to setup your php facebook app for local debugging – which i didnt find on the net.

Prerequisistes: You have apache and php 5.x installed.

  1. Set up your computer for portforwarding. Portworward.com has good explanations for all different kind of configurations and routers.
  2. Get yourself a alias from dyndns.org, something like myfacebookapp.dyndns.org pointing to your ip. In order to update your dynamic ip if you have one, install the dyndns updater.
  3. Try accessing your apache file via your dyndyns alias(myfacebookapp.dyndns.org). Keep in mind that many routers do not support ip loopback, therefore you might need to go through a proxy to do that. Also make sure to configure your firewall to open the ports your forwarding.
  4. If this all worked you are ready to setup your php environment. Startup (or install) your php ide of choice with integrated xdebugging for php (like Netbeans 6.7 or Aptana 1.5)
  5. You need to configure your php.ini file to support the xdebug. At the end of your php.ini file add:zend_extension_ts=”c:/php/ext/php_xdebug-2.0.5-5.2.dll”
    xdebug.remote_enable=on
    xdebug.remote_handler=dbgp
    xdebug.remote_mode=req
    xdebug.remote_host=localhost
    xdebug.remote_port=9000

    As you see I use windows change your path to the xdebug .dll / .so as you need. You might need to download it from xdebug.org

  6. Now you should be ready to startup a debug session of a file locally. Test it
  7. In order to debug HTTP Sessions its important that you have the parameter XDEBUG_SESSION_START= (for Netbeans its XDEBUG_SESSION_START=netbeans-xdebug) in your request url. So this gets a bit tricky for facebook apps since facebook is calling the canvas url I think that cannot contain query params (I guess ..) . Anyway no need to try or think either there is a nice firefox plugin that does that for us.

That’s it: Fire up a debugging session in your ide, add a breakpoint in your facebook app and try access your facebook app from facebook. You should end up in your local debugging session.

If you enjoyed this post consider sharing :

This entry was posted in facebook, php and tagged , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

10 Comments

  1. G. Perry
    Posted August 12, 2009 at 3:12 am | Permalink

    Hey! Your article was very helpful. I did turn to Robert Douglass, http://www.lullabot.com/articles/use-dynamic-dns-host-website-your-laptop, for some further details regarding the dyndns.org and the dyndns updater, but it's all good.

    Yeah, putting in the 'debug' parameter, XDEBUG_SESSION_START=ECLIPSE_DBGP&KEY=124962935150027, doesn't seem to work…I know my Facebook app is running off my local machine though

    I just can't debug it.

    I've used Eclipse extensively and have long configured the php.ini file to support the xdebug.

    Further, I've successfully debugged Facebook Apps using iFrame, but with FBML I've had to get this Dyndns account.

    I don't want to use the firefox plugin you mentioned…I'm in MS explorer right now.

    Would you have a further checklist I can go through and see if I've missed something?

    The current callback URL is just not stopping my breakpoints.

    Canvas Callback URL:
    http://myfacebookapp.dnsdojo.org/joomla_development/Production/index.php?XDEBUG_SESSION_START=ECLIPSE_DBGP&KEY=124962935150027&option=com_facebook&format=fbml&comp=com_facestocks&page=

    • Posted August 17, 2009 at 5:59 pm | Permalink

      Hy,

      Sorry about the delay, I’m just moving this blog to my new address: uebersoftware.com – will update the facebook links too.

      To your question: I get the impression that the debuggers for php are generally not so stable in compare to java debuggers. I really had to do some trial and errors and the eclipse setup / with aptana and zend based did not work for me with respect to debugging. I sucessfully use netbeans. Besides stability another advantage to netbeans is that the debugging key for xdebug stays the same.

  2. Posted September 11, 2009 at 3:41 am | Permalink

    Ok, I went and got NetBeans, and I’m still missing something here.

    “7. In order to debug HTTP Sessions its important that you have the parameter XDEBUG_SESSION_START= (for Netbeans its XDEBUG_SESSION_START=netbeans-xdebug) in your request url. So this gets a bit tricky for facebook apps since facebook is calling the canvas url I think that cannot contain query params (I guess ..) . Anyway no need to try or think either there is a nice firefox plugin that does that for us.”

    What are you referring to when you say, ‘your request url’?
    Are you referring to the Canvas Callback URL that you have to enter in the Facebook App setup page back in your Facebook account?

    You can only provide query parameters to the Canvas Callback URL anyway and not in the Canvas URL. I’m doing just that, and it is working perfectly.
    Unfortunately, it’s not working when it comes to providing the XDEBUG_SESSION_START as parameters in the hope it will stop the execution of the Facebook app at a specified breakpoint.

    “That’s it: Fire up a debugging session in your ide, add a breakpoint in your facebook app and try access your facebook app from facebook. You should end up in your local debugging session.”

    When you mean, ‘fire up a debugging session in your ide’, you’re saying simply start up the ide (NetBeans in this case), place a breakpoint in some source code then leave the program alone??

    You don’t initiate a ‘bebug session’ within NetBeans?? (ie. Hit the debug button on the toolbar.)

    You instead just open up Firefox, log into your facebook account, and just before you invoke your facebook application, click on the Xdebug helper plugin on the status bar to provide the XDEBUG_SESSION_START=netbeans-xdebug.

    The facebook app should start up and ‘stop’ at the breakpoint in the running NetBeans application?

    It’s just not happening for me. Xdebug I know is setup right because I can debug my other php code residing locally on my machine successfully — in both NetBeans and in Eclipse.

    I’ve updated the Xdebug dll and I’ve been debugging successfully for over a year.

    What I’m not getting is how the debugger can stop a Facebook application – a ‘separate application’ running in a separate browser window?

    Below is a reference to the Firefox plugin, Xdebug Helper, you speak of. It also was an interesting read in my efforts to get the ‘debugging of a Facebook application’ to freakin’ work. It mentions the use of a cookie to trip a breakpoint:
    HTTP Debug Sessions:
    http://www.xdebug.org/docs/remote#browser_session

    Finally, what are you referring to when you say, “debugging key for xdebug stays the same”?
    Is that, for example, the KEY=124962935150027 in the URL query parameters?

    Should that not be, KEY=default, instead?

    Would you suggest anything off hand that I should double-check?

    I’m missing a detail somewhere.

    Cheers.

  3. Posted September 11, 2009 at 1:57 pm | Permalink

    Hi there,

    First from a practical standpoint, when developing a IFrame app I would not go over the facebook frame at all but try to run your app all locally once you got the fb_ params: Get a facebook session, store it in your php session and don’t go over the facebook frame anymore (your links within the app are http://www.mydomain.com/foo.php not apps.facebook.com/foo). So you could just circumvent the issue and treat the app as local.

    That said I’m not sure I understand your setup, its working for me adding the debugging parameters to the callback canvas url. If debugging is working in your other php apps then it should defenetly working with facebook app too – for iframe and fbml apps.

    You see in your access logs if the request from facebook is containing these, and if so the debugs should stop at breakpoints – in fact in Netbeans it stops *always” at the start of the php script – in Aptana you can disable this in Netbeans PHP 6.7 not.

    >> What are you referring to when you say, ‘your request url’?
    yes this is referring to the canvas callback url.
    >> You don’t initiate a ‘bebug session’ within NetBeans?
    Yes I do – In Netbeans Debug Menu or right-click the project and select debug. This will attach the xdebugger to the php process.

    >> debugging key for xdebug stays the same”
    In eclipse the debugging key changes everytime you start a xdebugger session in netbeans not as far as I experienced. I did not try if KEY=default works, if so cool ;)

    I will soon post something about iframe dev. and using the different integration points from facebook as I believe there is not so good documentation on those various aspects.

  4. Posted September 12, 2009 at 4:11 am | Permalink

    Ben,

    I appreciate your quick response to my questions.

    As it is, I had to come back tonight to tell you I got Eclipse IDE working!

    I had to upgrade my original IDE, Eclipse 3.3 to Eclipse 3.5, and that allowed me to debug a ‘remote HTTP session’.

    As far as I know, the old version did not have that capability, and it was pointed out to me that the latest version had the option, Accept Remote Session (JIT).

    Once I upgraded the IDE and enabled this remote session option, I was debugging my Facebook app.

    As easy as that!

    I’ve spent the last 4 months on and off trying to debug my Facebook app (FBML).

    Note, I had no problem debugging my other Facebook app because it used iFrame.

    Read a lot of documentation on the Net, but it was your article that got me pointing in the right direction!

    Much thanks.

  5. Tom
    Posted November 30, 2009 at 3:42 am | Permalink

    I had a thought though I’m not sure how easy or realistic it would be to use. Could you mock out the Facebook API for local testing? Say you make factory methods for creating FB objects or calling FB API methods. You could then subclass your objects and override the factory methods to instantiate or call mock objects that behave and respond just like Facebook (granted with hard coded responses/behaviors). Thoughts?

    • Posted November 30, 2009 at 11:21 pm | Permalink

      Hi Tom,

      I think it depends on your app. For what I was doing it was just easier to work directly with the live api, and this is what most people do I guess, create Testaccounts and work with the live API. Facebook seems to have a Sandbox in their pipline if you check out the dev blog and the upcoming features.

      If you are interested in doing standalone local testing, I would also checkout the ruby testing framework Facebook provides, it does full cylce of add user to app, interact with the app and remove everything again.

      • Tom
        Posted December 2, 2009 at 2:02 am | Permalink

        Hey Ben,

        Thanks for your thoughtful response. I guess creating a true-to-form mock api would likely be a timesink when, as you said, you can just use a practice account to test against the live api.

        Thanks again, i appreciate you taking the time to respond.

  6. Chris
    Posted January 5, 2010 at 5:47 pm | Permalink

    What ports do you set up to be forwarded?

    • Posted January 13, 2010 at 2:28 am | Permalink

      the ports where your webserver listens to

One Trackback

  1. [...] Fonte Share this on del.icio.usDigg this!Stumble upon something good? Share it on StumbleUponShare this on TechnoratiPost this to MySpaceShare this on FacebookTweet This!Email this to a friend?Subscribe to the comments for this post?Share this on Wikio Tagged with: app    debug    developer    facebook    php    programmazione [...]