使用 Chrome 開發工具調試 PhoneGap 應用

PhoneGap/Cordova是創建移動APP一個很酷的框架,但也仍有些不足的地方，不能講十全十美。 你怎麼debug你的app? 假設你現在寫一種不常規的app, 你需要給console.log更多的信息並且要十分耐心的調式你的app.有一種不完全的解決方案是使用Chrome Dev Tools. 說它不完全是因為有些PhoneGap特性不能在Chrome下運行, 但如果你的app更像一個移動網站，那麼這會對你有很大的幫助。

我假設你已經可以編寫一兩個app且能調試,所以這裡就不再涉及如何構建PhoneGap應用程序. 這裡只會涉及到如何設置和使用 Chrome's Dev Tools來調試你的app。這篇文章實在Windows 7 下的說明，過兩天將發布Mac版本的。

目錄（文件夾）設置

我的所有的PhoneGap app共享同一個父級目錄, "Repo". 所以我的建議是創建一個Repo站點. 當然, 有些人寧願一個app為一個網站. 如果你也這麼做, 這種方法依然可行, 只是改變了萬盞的目錄位置.

1. 首先啟動 Internet Information Services 7 (IIS7).。我的正還在開始菜單上，通常情況下他會在“管理工具”下。
   
    
2. 在左側點擊三角形，展開您的計算機名 (我的電腦的名字為TROYMILESF42B)。
3. 展開站點列表。
4. 右擊Sites(站點)。
   
5. 單擊 Add Web Site...（創建站點...）。
6. 給站點起一個名字,我的是"Repos"。
7. 選擇一個應用程序池,我選的是ASP.NET v4.0。
8. 選擇到你的根文件夾的路徑。
   
    
9. 如果你的機器運行的安全性高，您可能需要給它一個用戶帳戶運行授權。
   
   
10. 我強烈建議設置80端口以外的端口，我使用的8088。
11. 選中“立即啟動網站”復選框。
12. 單擊確定.
13. 使用浏覽器，浏覽到你的網站.
    
14. 使用快捷鍵 Ctrl+Shift+I打開Chrome's developer's tools.
15. 單擊Sources 選項卡,然後單擊箭頭左上方顯示的源文件。
    
    
16. 雙擊一個文件名，打開該文件
    
17. 設置一個斷點, 只需點擊一個行號的左側。再次單擊它可以禁用斷點。右鍵單擊它並點擊，刪除斷點，將其刪除。

這棒極了,但...

這些已經很棒了，但我們仍有問題. 我們不再有"設備就緒"事件,所以這很有可能破壞你的代碼. 舉個例子, 羅盤程序不經過PhoneGap的處理將不能正常有導航設備對象。 但，HTML的網站也好不了哪裡去的。

我還在未解決"設備就緒"問題努力,但是還沒有弄好.現在只是測試事件與替換了一些導航設備的測試數據。

PhoneGap 的詳細介紹：請點這裡
PhoneGap 的下載地址：請點這裡