I finally managed to get my setup fine-tuned to debug Facebook FBML applications using Visual Studio 2005. Chances are that the same procedure will work under Visual Studio 2008. Since I struggled a bit to get my setup right, I thought I should share my findings.
I am using Nikhil Kothari’s excellent Facebook.NET API because I think it’s very good for FBML applications. I also tried the Facebook Developer’s Toolkit and I found it easy to use for IFrame applications, but a bit buggy. I also had to make corrections to the source code to improve performances and solve some bugs. In any case the following recipe to debug applications would work with any API.
Getting your PC to serve HTTP request over the Internet
Since Facebook FBML applications work though REST requests that are incoming from Facebook’s servers, you will need to setup your PC to respond to HTTP request from the outside.
The first thing in order, is to setup your rooter and or firewall so that your PC can respond to external HTTP requests. In general, you need to:
- Open the HTTP (80) port on your router to forward requests to your PC’s LAN address
- Configure your firewall to let HTTP requests through
In my case getting this to work was a bit of a struggle, because my Bell Canada service supplied me with a dreaded SpeedStream 6300 router/modem. To make a long story short, I had to use a second router, plug it in the WAN port and setup the DMZ address to the second router’s address on the SpeedStream.
You will also need to setup a DNS Server so that the name server reaches the public IP address your are connected to. To do this, you either need a fixed IP address and setup a DNS server or need to use a dynamic DNS service. In my case, I’m lucky, I have a fixed IP address and have my own DNS servers.
To test correctly that you can serve external HTTP requests, the following is recommended:
- If not already installed, install IIS on your PC (you will need it later, anyway)
- Configure IIS to serve a static HTML page, start the IIS service and test your page on localhost
- Test your HTML page using your external IP or fully qualified domain name. Here, chances are you will need to test the page from outside the network. Ask a friend to try the URL from a remote location.
- As a basic security measure, make sure to configure the IIS service to start manually and start it only when you need it or to change the port forwarding on your router to make sure your PC is not constantly available to respond to external HTTP requests.
- If your Web page is not responding, check the IIS logs. It will tell you if your Web server is being hit or not. If it’s not being hit, there’s surely a problem in routing external HTTP requests to your local Web server.
- In order to resolve external URLs that point directly to your domain name, you will need to add an entry for your fully qualidfied domain name in windowssystem32etchosts.
Testing your Facebook FBML application
Once you know your local Web server can answer external requests, make sure your Facebook FBML application is working. If you have access to a hosting service (you will need one if you wish to publish your application), publish your application, configure your Facebook Developer account for the application and test it.
Once you know your “Hello World” application works, you can now try and setup you debugging environment.
Debugging the FBML application
To debug a FBML application, you will need to setup your project as a Web Application Project. You might not need to, but I was never able to allow external HTTP requests to be served by the Web server included in Visual Studio 2005, even when configuring it on port 80 and disabling IIS. With Web Application Projects, you can use IIS. You can learn more about Web Application Projects here. To migrate a Web Site Project to a Web Application Project, I recommend this excellent article by Scott Guthrie.
Once your Web Application Project is ready for your Facebook application, go in your project’s properties and set up your project to use IIS:
If you start the debugger for your project you will be asked to log in your application. Instead, go to http://www.facebook.com, log into your account and install your application. You will probably get an error because it did not respond to the installation URL. It does not really matter, if there was an error while installing your application in Facebook, it will be installed anyway for your profile and your will see a link for your application in the left menu. If you browse to your application, you will probably get the following error (if you set up your Web.Config to show errors):
If you don’t get this error, but instead get a default Facebook application error, check your IIS logs to see if Facebook is reaching your local copy of IIS. If not, recheck your routing configuration, your firewall and your application’s configuration in the Facebook Developer application.
The above error happens because the debugger is not attached to the right process. Here’s how to solve it:
- Stop your debugger
- Restart the IIS Service.
- Use any browser to browse your application, you should finally see it served from your PC!
- Then, start your Visual Studio Debug to attach to the ASP.Net worker process (aspnet_wp.exe) using the “Debug/Attach to process” menu item:
Redo the above 4 steps anytime you get an HTTP 500 error.
It should now work. If you refresh your application’s page in your browser, it should still show correctly and if you add a breakpoint in your code, you should see that you are debugging Facebook’s requests!