[Mobile] – Debug Mobile Safari using the Chrome DevTools

之前在開發Mobile Web App時
總覺得Safari提供的web inspector很難用
如果在Mobile Safari上的網頁也能用Chrome DevTools進行debug就方便多了
剛好今天找到了一個工具跟方法可以做到這件事
紀錄一下，分享給需要的人~

以下環境以Mac開發者為主

Step1. 先安裝HomeBrew
直接開啟Terminal，輸入ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
就會開始進行安裝，可以參考官網~http://brew.sh/

Step2. 接著使用HomeBrew安裝ios-webkit-debug-proxy，一樣在Terminal輸入brew install ios-webkit-debug-proxy

Step3. 成功安裝後，將你的iPhone/iPad先連接到Mac，在Terminal輸入ios_webkit_debug_proxy，接著應該會顯示錯誤訊息
“Could not connect to lockdownd. Exiting.: No such file or directory…."
此時你的iPhone/iPad應該會彈出是否信任來源的確認視窗，請按信任

Step4. 按下信任後，接著在Terminal再次輸入ios_webkit_debug_proxy，應該就已經啟動這個proxy

Step5. 打開Chrome，在網址列輸入http://localhost:9221，應該就可以看到你的裝置，接著就可以選擇要debug的網頁

非常實用的一個工具，特別是iOS7目前是無法使用Safari 6來進行web inspector

參考連結：
http://stackoverflow.com/questions/11361822/debug-ios-67-mobile-safari-using-the-chrome-devtools
https://github.com/google/ios-webkit-debug-proxy