H5除錯常見方法

相較於pc端，移動端除錯要更加豐富一些，下面對除錯的方法進行簡單彙總。
主要分為以下幾點:

chrome developer tools
android+chrome inspect
iOS+safari
GapDebug
weinre
weinre相關套件
代理

chrome developer tools

除了chrome，Firefox中的除錯工具也較為類似，Firefox有個小優勢就是代理工具charles支援直接開啟Firefox的代理服務（需要安裝Firefox的charles外掛）。
特點
除錯簡單，進行響應式佈局、效能優化、網路環境模擬等比較方便，缺點是非真機無法除錯webviewjsbridge及發現真機中存在的問題。
適用範圍
頁面響應式除錯，適合開發初始階段，還可進行效能優化分析，前端開發乃至後端開發人員必備技能。
android+chrome inspect
===

特點
使用chrome inspect除錯android裝置（包括模擬器）中的網頁，訪問chrome://inspect
即可看到連線裝置以及可除錯頁面。
初次使用chrome inspect需要翻牆

適用範圍
除錯4.4以上版本android裝置上app內的webview及chrome中的網頁。
除錯webview需要開啟app的debug模式，WebView.setWebContentsDebuggingEnabled(true);

模擬器

目前常用的為genymotion，基於virtualbox核心，所以首先需要安裝virtualbox。genymotion對virtualbox啟動的模擬器作了一系列優化工作，比如ROM下載、移動裝置模擬命令選單（比如旋屏、開啟攝像頭）等。 另外還有Parallels可供選擇，也能下載android ROM進行安裝。
iOS+safari

特點
使用pc端的safari除錯iOS裝置中的網頁，可進行真機遠端除錯，也可除錯模擬器。
適用範圍
除錯iOS裝置（包括模擬器）上的webview及safari中的網頁。

如果除錯safari，直接開啟模擬器，使用pc中的safari就可識別到除錯網頁，而除錯webview，則需要安裝debug包（由於是執行在pc上，需x86打包）。
簡單步驟如下：
安裝xcode命令列工具 xcode-select –install

建立模擬器 xcrun simctl create “demo”

啟動模擬器 xcrun instruments -w `demo`

安裝app xcrun simctl install booted /path/to/Your.app

GapDebug

特點

跨平臺，應用是個web頁面，同時整合了Safari和Chrome的除錯工具，可執行在windows和mac平臺上

依賴少，只需一個Chrome就能使用Safari和Chrome的除錯工具
統一管理，在同個介面顯示了iOS裝置和Android裝置及其除錯頁
一些實用小功能，如截圖、裝置控制、app安裝等

適用範圍
iOS裝置和4.4以上版本Android裝置（及其模擬器）上的webview和網頁。

weinre

特點
適用範圍廣，在除錯頁面中載入weinre提供的一個js指令碼，即可在weinre inspect皮膚中進行除錯。
安裝步驟如下（npm安裝方式）：
安裝 npm install -g weinre

啟動 weinre –boundHost -all-
，預設埠是8080，可新增配置–httpPort 8888
改變埠為8888
配置指令碼 訪問http://localhost:8080
，將target script加入到除錯頁面中

詳細配置及其它安裝方式可參見官方文件
適用範圍
一般在開發過程中進行除錯，不支援USB除錯的真機裝置可用該方法，官方宣告可除錯的範圍如下：
Android 2.2 Browser application
Android 2.2 w/PhoneGap 0.9.2
iOS 4.2.x Mobile Safari application
BlackBerry v6.x simulator
webOS 2.x (unspecified version)

weinre相關套件
MIHTool
MIHTool是weinre的app整合版本，僅有iOS版本可供安裝，例舉幾個特點：
自動注入weinre所需指令碼
支援webview js bridge api的模擬（如果app端還未完成開發）
支援在控制檯直接require各種包方便除錯、ipad端支援
ipad端還支援在裝置中顯示類似chrome的開發者工具

與第4點類似提供裝置中的開發者工具顯示，還有eruda，可以訪問http://liriliri.github.io/eruda/檢視效果。

spy-debugger

spy-debugger是weinre的擴充套件版，執行

npm install spy-debugger -g

即可完成安裝，啟動後配置裝置代理即可進行除錯。 主要特點如下：
通過代理攔截html自動注入所需除錯指令碼
整合了代理功能，預設使用AnyProxy，也可配置其他代理
支援https，可攔截webview及瀏覽器發起的請求

代理

以上涉及移動端裝置（包括模擬器）的除錯方式均可配合代理一同使用，在移動端裝置中配置http/https代理，將線上資源代理到本地，使改動即時生效並看到效果。
常用的代理工具主要有fiddle和charles，代理工具上提供的功能很多，但除錯過程中的開啟方式一般有以下兩種：
直接設定裝置的代理伺服器為本機，截獲請求查詢資料，排查異常資訊，屬於問題定位階段
除了設定代理伺服器，另外配置一些資源的代理路徑為本地資源，實時檢視程式碼執行情況，屬於問題解決階段， 平時開發過程也可用該方法代理線上資源進行除錯

總結

上面對各類除錯方法進行了大致介紹，每個方法都有各自的特點和適用場景。
響應式除錯中，使用Chrome DevTools即可快速檢視多裝置顯示效果和實時調節，另外還有Ghostlab也是響應式除錯的好工具，有著和broswer-sync一樣的多裝置多視窗同步功能；
進一步的真機(模擬器)除錯，高版本Android裝置配合chrome，iOS裝置配合Safari，使用GapDebug則更為方便，統一了iOS和Android裝置的除錯入口;
而其它無法使用chrome和Safari進行除錯的情況，比如一些低端機型的相容問題，使用weinre或其相關套件進行除錯；
再配合代理的資源本地對映，能夠更為方便地除錯線上環境出現的問題；
實際開發中，還是需要在合適的時機選擇合適的除錯方式。