Thursday 24 February 2011

How to debug a facebook app using eclipse (gwt)

Steps to get a facebook app (written using google web toolkit) to run on the Visual Studio server and be picked up by the Eclipse debugger:

(1) Go to app developer page (e.g. http://www.facebook.com/developers/apps.php?app_id=168754973148732).

(2) Check and edit app settings as necessary. Look out for Facebook Integration settings (and Canvas URL setting) in particular. (Example Canvas URL value: http://127.0.0.1:21024/fb/)

(3) Navigate to app (Canvas Page) and append "index.html" or similar page to url. (Example Canvas Page value: http://apps.facebook.com/gskallitest/) Reload page.

(4) Use Google Chrome or Mozilla Firefox 'Inspect Element' tool to select the app in the page (it might not be visible but will be present in the html markup).

(5) Find the app iframe in the page html markup and pull out the src url. Bung in between "...index.html?" and "signed_request=..." the text "gwt.codesvr=127.0.0.1:9997&".

(6) Stick this modified url into your browser and assuming you have your gwt project running/debugging on Eclipse you're good to debug :)>

Note: When running the facebook project on eclipse (as a web application), uncheck the 'run built-in server' option from the Debug Configurations dialog ('Server' tab) and specify instead the server url to run from ('GWT' tab), i.e. the Canvas URL as specified in step 2.

ps. Remember to change the facebook app settings (step 2) back after testing/debugging. In particular: the Canvas URL setting which should be http://alli2.gsk.kickstartdigital.co.uk/fb/ or similar.

No comments: