移動web app開發-----調試篇

     相信大家進行過web開發開發的人對於一些常用的調試工具都比較熟悉了。在firefox上，firebug了算是最流行的，還有它的很多插件，像yslow等；在chrome我們可以從‘菜單----->工具------>開發人員工具’中打開，我們一般情況下用的都是一些最基本的功能，像檢查javascript的內存消耗，cpu占用這些功能有時也很有用，有關這個工具的詳細介紹都在這裏；在mac的safari上我們可以從‘safari---->偏好設置------->高級’的最下麵選中‘在菜單欄中顯示開發菜單’，裏麵有各種各樣的我們想用的調試工具，像用戶代理，javascript調試器，和dom檢查器,詳細介紹參考這篇文章；在ie的高級版本中我們可以從‘工具----->開發人員工具’就會出現各種各樣的調試工具了；這些工具我們在進行移動開發時也會常常用到，但是有時候我們沒法在pc上發現出現的錯誤，這時候就隻能通過遠程調試或者在移動工具本地端直接開啟提示工具，下麵重點說下這兩種方式的調試方法。

     遠程調試：這種調試方式就是把在移動設備上打印的調試信息顯示在pc端，這樣在pc端觀察調試的信息就會非常方便，

這種調試方式跟設備無關，所有設備上的使用方式都是一樣的。這樣的方式有以下幾種可選：

• jsconsole:這個調試工具是我最喜歡的，它配置非常簡單，就是能夠打印一些log信息，隻需要在你的頁麵上包含該工具為你生成的一個js文件，就可以使用了；然後在在桌麵的瀏覽器上監聽你的調試文件所對應的key,具體使用方法可以參考這裏。

• mobile perf 和 jdrop :這兩個工具是配合使用的，mobile perf是一個工具集，是作為書簽來使用的，裏麵包括firebug lite,webtiming,page resouce等等，這些工具可以像桌麵的工具一樣調試網頁，然後把打印的這些工具存在jdrop上。mobile perf這個工具集中那些工具原來都是為桌麵調試使用的，並沒有對移動設備進行優化，所以性能很低，半天打不開。jdrop這個工具需要google或者twitter的賬號登陸，這兩個網站的賬號在中國必須翻牆，相信這個對大家來說不是問題。

• shadow：這個工具是 adobe收購phone gap 後，基於phone gap公司的 weinre的基礎上開發的，使得配置更加簡單。直接使用weire也可以調試，隻不過配置比較複雜。  
• logcat:這個工具是android的調試工具，它基於eclipse。具體安裝過程，可以參考這篇文章
• charles:這個工具類似fiddler,或者httpwatch,這個http請求抓包或者資源的加載測量工具,能夠通過設置代理，測量資源在移動設備上的加載性能。

     本地調試：這種調試直接在移動設備上調試，跟設備有關，優點是不需要配置，直接開啟，缺點是空間小，不易觀察。

• iOS:直接在‘設置-----》safari------->開發者------>開啟調試控製台’，這樣在javascript文件中用console.log打印的調試信息就會在地址欄的下方出現調試信息
• android:首先在地址欄中輸入：about:debug,這樣就會在設置的菜單欄出現調試的菜單;然後選擇‘菜單---->設置----->選中show javascript console’,這樣就會把使用console.log輸出的信息顯示在瀏覽器地址欄的上方。