[教學] 利用Fiddler開發Facebook apps

在[開發Facebook apps](http://clonn.blogspot.com/p/facebook.html)的時候最常遇到的問題就是,[Facebook API Key](http://clonn.blogspot.com/2011/01/facebook-api-php-sdk.html)只能綁定在某個Domain name底下,當然對於安全性考量,毫無疑問這是一定要的。但是對於我們開發需要使用開發機,又要測試的時候,就會造成困擾。
當然高手就是不一樣,會自己去設定HOSTS,更強一點的就自己再架設個DNS server來解決這個問題,可是對於我們這種半殘的碼農,以上都是屬於高手的世界,我們沒有辦法去體會。
別擔心,Fiddler為你解決這個問題!!!
[![](http://3.bp.blogspot.com/-VvlkvnOaMWk/TgB1rwwr4WI/AAAAAAAAMfM/zvrfcp0M04w/s320/201103292338369456.png)](http://3.bp.blogspot.com/-VvlkvnOaMWk/TgB1rwwr4WI/AAAAAAAAMfM/zvrfcp0M04w/s1600/201103292338369456.png)
**Fiddler**是MicroSoft利用.NET開發的軟體,可視為單機的network proxy,MicroSoft並沒有強力的推薦這套軟體,不過我們還是很清楚微軟其實很佛心來的。
**下載並安裝Fiddler**
[http://www.fiddler2.com/fiddler2/version.asp](http://www.fiddler2.com/fiddler2/version.asp)
請先安裝.NET以提供fiddler執行
[![](http://3.bp.blogspot.com/-BOTrRqH2YZM/TgB15OSx1dI/AAAAAAAAMfQ/3EqKHg0sgi4/s640/%25E5%259C%2596%25E7%2589%2587+13.png)](http://3.bp.blogspot.com/-BOTrRqH2YZM/TgB15OSx1dI/AAAAAAAAMfQ/3EqKHg0sgi4/s1600/%25E5%259C%2596%25E7%2589%2587+13.png)
**安裝Fiddler**
[![](http://4.bp.blogspot.com/-sXhOtcUFpNE/TgB2LIWLPOI/AAAAAAAAMfU/ekF5Ijm7agY/s1600/%25E5%259C%2596%25E7%2589%2587+14.png)](http://4.bp.blogspot.com/-sXhOtcUFpNE/TgB2LIWLPOI/AAAAAAAAMfU/ekF5Ijm7agY/s1600/%25E5%259C%2596%25E7%2589%2587+14.png)
**開啟Fiddler**
(Fiddler主畫面)
[![](http://1.bp.blogspot.com/-Cu6lPZg4MXw/TgB2w44_96I/AAAAAAAAMfY/vPJSopphqz0/s640/%25E5%259C%2596%25E7%2589%2587+16.png)](http://1.bp.blogspot.com/-Cu6lPZg4MXw/TgB2w44_96I/AAAAAAAAMfY/vPJSopphqz0/s1600/%25E5%259C%2596%25E7%2589%2587+16.png)
**選擇Tools -> HOSTS,開啟對話框**
[![](http://2.bp.blogspot.com/-qyaqxuRPf7Q/TgB3Hs2QBaI/AAAAAAAAMfc/r2Yq5nyasAk/s640/%25E5%259C%2596%25E7%2589%2587+11.png)](http://2.bp.blogspot.com/-qyaqxuRPf7Q/TgB3Hs2QBaI/AAAAAAAAMfc/r2Yq5nyasAk/s1600/%25E5%259C%2596%25E7%2589%2587+11.png)
**設定HOST NAME**
(Enable 選項記得要勾起來)
[![](http://3.bp.blogspot.com/-aNnADEERWZ0/TgB3cfXWRxI/AAAAAAAAMfg/gg9-cWpgXZw/s640/%25E5%259C%2596%25E7%2589%2587+12.png)](http://3.bp.blogspot.com/-aNnADEERWZ0/TgB3cfXWRxI/AAAAAAAAMfg/gg9-cWpgXZw/s1600/%25E5%259C%2596%25E7%2589%2587+12.png)
**設定Apache virtual host**
內容請與對應Fiddler HOSTS
**開啟網頁測試**
[![](http://2.bp.blogspot.com/-0rIhOFy3Fx8/TgB4mZd4XPI/AAAAAAAAMfk/IYfbOeirjwo/s640/%25E5%259C%2596%25E7%2589%2587+17.png)](http://2.bp.blogspot.com/-0rIhOFy3Fx8/TgB4mZd4XPI/AAAAAAAAMfk/IYfbOeirjwo/s1600/%25E5%259C%2596%25E7%2589%2587+17.png)
最後,測試Facebook API KEY和Fiddler 模擬的Domain name,完成!! **其他測試惡搞** Fiddler HOSTS裡面輸入`tw.yahoo.com www.google.com

` 按下save 開啟瀏覽器輸入”www.google.com”
[![](http://1.bp.blogspot.com/-uqr0Jw8hDYU/TgB7z4CIG1I/AAAAAAAAMfo/OpYHqJzCJYs/s1600/%25E5%259C%2596%25E7%2589%2587+18.png)](http://1.bp.blogspot.com/-uqr0Jw8hDYU/TgB7z4CIG1I/AAAAAAAAMfo/OpYHqJzCJYs/s1600/%25E5%259C%2596%25E7%2589%2587+18.png)
**結語:**
這樣的用法優勢在於,如果要改變任何網站狀態只需要開啟fiddler就可以測試,而且可以進行很多黑暗手法多樣性的測試,不需要架設太多服務,也不需要懂太多技巧,全部藉著fiddler就可以完成,讓許多前端的測試能夠更加流暢,當然對於開發人員更是一大福音!!!

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn