原文地址：http://adamlu.com/?p=642
在PC端的開發中我們擁有很多前端開發調試工具, 但是Mobile端的調試相對比較麻煩一些, 不光要在瀏覽器上調試, 而且很多都需要在真實的設備上來調試, 設備的類型/製造商/操作系統, 網絡環境都會影響Web的調試.
PC上開發
從我的經驗來看我一般先是使用Safari的模擬User Agent來開發Mobile Page, 開啓Safari, 選擇設置, 偏好設置，高級, 顯示”開發”工具菜單, 這樣你就能在Safari的菜單中看到”開發”了, 然後就可以選擇一些User Agent:
但是有時可能還需要模擬Android Safari上的User Agent, 如
Google Nexus One: Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus
Android Tablet: Mozilla/5.0 (Linux; U; Android 2.2.1; en-us; device Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Safari/533.1
只需要選擇”Other”把自定義的User Agent輸入進去即可.
模擬器上調試
當然Safari的開發者工具也不比Firebug差, 在桌面的Safari開發完成後, 還需要在模擬器上進行調試, iOS的Simulator需要安裝XCode, XCode是用於開發Apple系列產品如Mac, iPhone, iPad上的集成開發環境, 包括IDE, Instruments,iOS Simulator以及最新的Mac OS X和iOS SDK.安裝完XCode後, 在/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications這個目錄下, 打開iOS Simulator就可以運行了, 界面如下:
這樣你就可以看到底部有Safari的瀏覽器, 通過打開設置->Safari->開發者->高級->調試控制檯, 設置爲開就可以打開Safari的控制檯了, console.log/console.error的輸出都會出現在控制檯裏面.
Android的Emulator安裝請參考http://developer.android.com/guide/developing/devices/emulator.html
在模擬器上使用HOST文件
使用模擬器通常需要綁定開發環境的host, iPhone的模擬器會使用你Mac電腦的host文件, 這個比較方便, 而Android的Emulator修改host會比較麻煩, 因爲它不會使用你本機的host文件, 下面來說一下怎麼修改:
1.在android-sdk/tools/目錄下啓動Android Virtual Device(AVD): emulator -avd myAvdNameHere -partition-size 128
2. adb remount
3. adb push /etc/hosts /system/etc
設備上調試
最後就是設備調試階段, 同樣iPhone越獄的手機可以在Cydia安裝mobile terminal這款軟件來修改host文件, Android手機同樣也有修改host的方法.
對於Mobile上的調試還有一個很有用的bookmark工具Mobile Perf bookmarklet, 它是由Google的Steve Souders創建的一個針對Mobile的調試工具列表, 如 Firebug Lite, Page Resources, DOM Monster, SpriteMe, CSSess, Zoompf等, 其中有些已經集成了Jdrop(雲端Json數據存儲平臺), 這樣就可以很方便地在PC上分析Mobile的數據了, iPhone上的安裝請看這裏.
遠程調試
剛纔說了Mobile上的數據不太好分析, 如果能在PC上調試Mobile上的頁面就好了, 所以也出現了很多遠程調試工具, 下面介紹幾個:
1. Weinre, 這是一個很強大的遠程調試工具, Weinre是”WEb INspector REmote”的縮寫, 通過它你可以在PC上使用Safari的開發者工具來調試Mobile上的頁面, 你也可以在線使用http://debug.phonegap.com/或是下載Weinre的客戶端軟件.
2. Jsconsole, 這是一個Javascript命令行工具, 它也提供了遠程調試的功能.
3. Opera Dragonfly, Opera瀏覽器提供的開發者工具, 也很方便, 如果你的網站是需要兼容Opera的話可以試一下.
4. Socketbug, 建立在Node.js和Socket.IO上的Mobile Web調試工具.
5. Remote Debugging with Chrome for Android, 通過USB調試模式和android sdk自帶的工具同時使用chrome的開發工具遠程調試android上的頁面.
6. Adobe Shadow, 安裝了Adobe Shadow後就可以同步手機設備和PC，然後就可以在PC上遠端調試Mobile上的頁面。