隨著移動裝置的高速發展，H5 開發也成為了 F2E 不可或缺的能力。而移動開發的重中之重就是掌握除錯技巧，定 Bug於無形。
一、概要
因為移動端作業系統分為 iOS 和 Android 兩派，所以本文的除錯技巧也會按照不同的系統來區分。尋找最合適高效的方式，才能讓你事半功倍。
文章會列舉目前適合移動端除錯的多種方案，快來選擇你的最佳實踐吧！
二、iOS 裝置
Safari：iphone 除錯利器，查錯改樣式首選，需要我們做如下設定：
- 瀏覽器設定：Safari – 偏好設定 – 高階 – 勾選「在選單欄中顯示開發」選單
- iphone 設定：設定 – Safari – 高階 – 開啟 Web 檢查器
大功告成，這時候通過手機的 Safari 來開啟 H5 頁面，我們通過瀏覽器開發選項可以看到：
iOS 模擬器：不需要真機，適合除錯 Webview 和 H5 有頻繁互動的功能頁面。
首先下載 Xcode ，執行專案，選擇模擬器 iphonex，編譯後就會開啟模擬器，如下：
可以看到 H5 已經在「殼子」中執行起來了，下來就可以嘗試呼叫 Webview 的方法，和「殼子」互動了。更多的除錯技巧可以參考文章：iOS 模擬器除錯。
具體的除錯功能還是依賴瀏覽器的開發選項，與上無異，就不贅述了。
三、抓包
Charles： Mac OS 系統首選的抓包工具，適合檢視、控制網路請求，分析資料情況。
Charles 抓包首先需要配置手機代理，Wifi – 配置代理（IP 地址） – 手動，如下圖：
配置好手機代理，這時候開啟 Charles ，就會收到確認提醒，選擇允許。接下來就可以捕獲手機的請求了，但是這些都是常規操作，我們來點高階的。
有意思的是：我們可以用本地檔案來替換線上檔案，方便除錯，遠端定位線上問題。
選擇 Structure，找到需要替換的檔案，右鍵選單 – Map Local，如下圖：
這時候就會開啟一個彈窗，填寫具體的配置：
OK，大功告成，快去改動本地檔案吧，從此再也不怕線上除錯了。需要注意的是如果抓取 HTTPS 請求，要安裝信任證照，下文會詳細說明。
與之相應的是 Windows 平臺的 Fiddler，功能大致相似，這裡就不細說了。
四、Spy-Debugger
spy-debugger： 移動端除錯的利器，便捷的遠端除錯手機頁面、抓包工具。
我們先來安裝：
|
1 |
> sudo npm install spy-debugger -g |
啟動命令：
|
1 |
> spy-debugger |
這時候，控制檯會列印出如下資訊，說明服務已經啟動了：
|
1 2 3 4 |
正在啟動代理 本機在當前網路下的IP地址為：10.200.24.46 node-mitmproxy啟動埠: 9888 瀏覽器開啟 ---> http://127.0.0.1:50389 |
最後一步，設定手機代理：10.200.24.46，埠號：9888。補充說明一下：
Android設定代理步驟：設定 –WLAN– 長按選中網路 – 修改網路 – 高階 – 代理設定 – 手動iOS設定代理步驟：設定 – 無線區域網 – 選中網路 –HTTP代理手動
接下來，嘗試一下抓包：
再開啟除錯頁面：
HTTPS 抓包，需要安裝根證照，下文會詳細說明。
五、Whistle
上面推薦了一款操作簡單的除錯利器，升級一下，看看更加強大的除錯工具 whistle。
whistle：基於 Node 實現的跨平臺 Web 除錯代理工具。
whistle(讀音[ˈwɪsəl]，拼音[wēisǒu])是基於 Node實現的跨平臺抓包除錯代理工具，有以下基本功能：
- 檢視
HTTP、HTTPS請求響應內容 - 檢視
WebSocket、Socket收發的幀資料 - 設定請求
hosts、上游http/socks代理 - 修改請求
url、方法、頭部、內容 - 修改響應狀態碼、頭部、內容，並支援本地替換
- 修改
WebSocket或Socket收發的幀資料 - 內建除錯移動端頁面的
weinre和log - 作為
HTTP代理或反向代理 - 支援用
Node編寫外掛擴充套件功能
大致瞭解後，我們來嘗試安裝：
|
1 |
sudo npm install -g whistle |
淘寶映象：npm install whistle -g –registry=https://registry.npm.taobao.org
whistle 安裝完成後，執行命令 whistle help 或 w2 help，檢視 whistle 的幫助資訊：
|
1 2 3 4 5 |
run Start a front service start Start a background service stop Stop current background service restart Restart current background service help Display help information |
這裡只列出部分命令，更多請 w2 help 檢視。
看到上面的操作，我們何不試試縮寫 w2 start 來啟動服務：
|
1 |
w2 start |
看到如下的輸出，說明服務已經正常啟動了：
這時候在瀏覽器開啟連結，同時手機上配置代理（同 Charles），接下來就可以愉快的除錯了。值得注意的是，whistle 的功能遠非如此，更多的擴充套件請移步官網文件，貼張圖先預覽下：
記得開啟攔截 HTTPS：勾選 Capture HTTPS CONNECTs
六、安裝 HTTPS 證照
對於 Charles，按照如下操作安裝證照：
|
1 |
help-SSL - Proxying - install Charles root |
彈出安裝證照的提示框：
按照提示去手機瀏覽器開啟：chls.pro/ssl，安裝信任證照即可。
對於 spy-debugger，HTTPS 抓包，需要安裝根證照，選擇 RootCA，掃描二維碼按照提示信任證照。安裝證照的時候需要注意以下幾件事情：
1.手機必須先設定完代理後再通過(非微信)手機瀏覽器訪問 http://s.xxx (地址二維碼)安裝證照；
2.手機首次除錯需要安裝證照，已安裝了證照的手機無需重複安裝；
3.手機和 PC 保持在同一網路下（比如同時連到一個 WIFI 下）；
切記：移動裝置和 PC 必須在一個 WIFI 下。
七、真機除錯
上面說了很多，但是實際開發過程中，我們不會等上線了才去驗證相容性，所以你可能需要提前「真機除錯」。這裡提供兩種方式：
Chrome Remote Devices：依賴 Chrome 來進行遠端除錯，適合安卓手機。
首先，開啟 Android 手機的「開發者選項」，勾選 「USB 除錯」。
然後，Chrome 中輸入：chrome://inspect，進入除錯頁面。
很全面的一篇文章，可以參考：Chrome 遠端除錯。
localhost 轉 ip，掃描二維碼手機顯示，這個比較簡單。
可以在瀏覽器安裝一個 Chrome 外掛，用於將當前頁面連結轉換成二維碼，這樣就能邊開發邊真機預覽，非常方便。
八、除錯工具
這裡推薦一款除錯工具：vConsole，一個輕量、可擴充、針對手機網頁的前端開發者除錯皮膚。安裝很簡單：
|
1 |
npm install vconsole |
如果未使用 AMD/CMD 規範，可直接在 HTML 中引入 vConsole 模組。為了便於後續擴充套件，建議在 <head> 中引入：
|
1 2 3 4 5 6 |
<head> <script src="path/to/vconsole.min.js"></script> <script> var vConsole = new VConsole(); </script> </head> |
如果使用了 AMD/CMD 規範，可在 module 內使用 require() 引入模組：
|
1 2 |
var VConsole = require('path/to/vconsole.min.js'); var vConsole = new VConsole(); |
請注意，VConsole 只是 vConsole 的原型，而非一個已例項化的物件。
所以在手動 new 例項化之前，vConsole 不會被插入到網頁中。大概功能如下圖：
H5 頁面是沒有機會重新整理頁面的，所以需要客戶端童鞋配合增加重新整理的功能方便除錯。九、場景分析
既然移動端除錯有這麼多種方案，那在實際操作中，我該如何取捨？
說了這麼多鍾方案，這裡總結一下各個方案的適用場景，根據不同的場景去選擇最佳的除錯方案，這樣才能更快速的輸出，Carry 全場：
1.Safari：iPhone 除錯利器，查錯改樣式首選；
2.iOS 模擬器：不需要真機，適合除錯 Webview 和 H5 有頻繁互動的功能頁面；
3.Charles： Mac OS 系統首選的抓包工具，適合檢視、控制網路請求，分析資料情況；
4.Fiddler：適合 Windows 平臺，與 Charles 類似，檢視、控制網路請求，分析資料情況；
5.Spy-Debugger： 移動端除錯的利器，便捷的遠端除錯手機頁面、抓包工具；
6.Whistle：基於 Node 實現的跨平臺 Web 除錯代理工具；
7.Chrome Remote Devices：依賴 Chrome 來進行遠端除錯，適合安卓手機遠端除錯靜態頁；
8.localhost 轉 ip：真機除錯，適合遠端除錯靜態頁面；
9.vConsole：內建於專案，列印移動端日誌，檢視網路請求以及檢視 Cookie 和 Storage；
十、白屏處理
移動端的白屏是最頭疼的問題，這裡順帶提供幾種分析問題的思路，以供參考。
1.方案分析 ☆
一般上線後出現問題，我們最容易想到的就是：是否是新程式碼引起的問題。所以有效解決手段就是「控制變數法」。
2.程式碼註釋法 ☆
莫名奇妙的白屏，適合頁面無異常日誌，同時無請求傳送，問題集中在單一頁面的情況。這種問題比較直觀，肯定是某一頁面出現了程式碼異常或是無效的 return，導致頁面渲染終止，但並不屬於異常。這時候，「程式碼註釋法」將是你的最佳選擇，逐行去註釋可以程式碼，直到定位問題。
3.類庫異常，相容問題 ☆
這種場景也會經常遇到，我們需要用可以除錯頁面異常的方式，如 Safari，Spy-Debugger，Whistle，vConsole 檢視異常日誌，從而迅速定位類庫位置，從而找尋替換或是相容方案。
4.try catch ☆☆
如果你的專案沒有異常監控，那麼在可疑的程式碼片段中去 Try Catch 吧。
5.Debug 包 ☆☆☆
在你的專案中裝上 vConsole，並配合客戶端 debug 外掛，360 度無死角監控異常，這才是最有效的方式。
6.ES6 語法相容 ☆
一般我們都會通過 Babel 來編譯 ES6 ，但是額外的第三方類庫如果有不相容的語法，低版本的移動裝置就會異常。所以，先用上文講述的除錯方法，確定異常，然後去增加 polyfill 來相容吧。