H5 移動除錯全攻略
作者： Jartto
文章源自： ofollow,noindex">http://jartto.wang/2018/11/01/mobile-debug/
隨著移動裝置的高速發展，H5 開發也成為了 F2E 不可或缺的能力。而移動開發的重中之重就是掌握除錯技巧，定 Bug 於無形。
一、概要
因為移動端作業系統分為 iOS 和 Android 兩派，所以本文的除錯技巧也會按照不同的系統來區分。尋找最合適高效的方式，才能讓你事半功倍。
文章會列舉目前適合移動端除錯的多種方案，快來選擇你的最佳實踐吧！
二、iOS 裝置
Safari：iphone 除錯利器，查錯改樣式首選，需要我們做如下設定：
- 瀏覽器設定：Safari - 偏好設定 - 高階 - 勾選「在選單欄中顯示開發」選單
- iphone 設定：設定 - Safari - 高階 - 開啟 Web 檢查器
大功告成，這時候通過手機的 Safari 來開啟 H5 頁面，我們通過瀏覽器開發選項可以看到：
safari1
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 ： 移動端除錯的利器，便捷的遠端除錯手機頁面、抓包工具。
我們先來安裝：
> sudo npm install spy-debugger -g
啟動命令：
> spy-debugger
這時候，控制檯會打印出如下資訊，說明服務已經啟動了：
正在啟動代理 本機在當前網路下的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請求響應內容 - 檢視
Socket/">WebSocket、Socket收發的幀資料 - 設定請求
hosts、上游http/socks代理 - 修改請求
url、方法、頭部、內容 - 修改響應狀態碼、頭部、內容，並支援本地替換
- 修改
WebSocket或Socket收發的幀資料 - 內建除錯移動端頁面的
weinre和log - 作為
HTTP代理或反向代理 - 支援用
Node編寫外掛擴充套件功能
大致瞭解後，我們來嘗試安裝：
sudo npm install -g whistle
淘寶映象：npm install whistle -g –registry= https://registry.npm.taobao.org
whistle 安裝完成後，執行命令 whistle help 或 w2 help ，檢視 whistle 的幫助資訊：
runStart a front service startStart a background service stopStop current background service restartRestart current background service helpDisplay help information
這裡只列出部分命令，更多請 w2 help 檢視。
看到上面的操作，我們何不試試縮寫 w2 start 來啟動服務：
w2 start
看到如下的輸出，說明服務已經正常啟動了：
這時候在瀏覽器開啟連結，同時手機上配置代理（同 Charles ），接下來就可以愉快的除錯了。值得注意的是， whistle 的功能遠非如此，更多的擴充套件請移步 官網文件 ，貼張圖先預覽下：
記得開啟攔截 HTTPS ：勾選 Capture HTTPS CONNECTs
六、安裝 HTTPS 證書
對於 Charles ，按照如下操作安裝證書：
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 ，一個輕量、可拓展、針對手機網頁的前端開發者除錯面板。安裝很簡單：
npm install vconsole
如果未使用 AMD/CMD 規範，可直接在 HTML 中引入 vConsole 模組。為了便於後續擴充套件，建議在 <head> 中引入：
<head> <script src="path/to/vconsole.min.js"></script> <script> var vConsole = new VConsole(); </script> </head>
如果使用了 AMD/CMD 規範，可在 module 內使用 require() 引入模組：
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 來相容吧。