優(yōu)秀前端人都知道的H5 移動端調(diào)試全攻略～

文章來源：http://jartto.wang/2018/11/01/mobile-debug/

隨著移動設(shè)備的高速發(fā)展，H5 開發(fā)也成為了 F2E 不可或缺的能力。而移動開發(fā)的重中之重就是掌握調(diào)試技巧，修 Bug 于無形。

一、概要

因?yàn)橐苿佣瞬僮飨到y(tǒng)分為 iOS 和 Android 兩派，所以本文的調(diào)試技巧也會按照不同的系統(tǒng)來區(qū)分。尋找最合適高效的方式，才能讓你事半功倍。

文章會列舉目前適合移動端調(diào)試的多種方案，快來選擇你的最佳實(shí)踐吧！

二、iOS 設(shè)備

Safari：iphone 調(diào)試?yán)?，查錯改樣式首選，需要我們做如下設(shè)置：

• 瀏覽器設(shè)置：Safari - 偏好設(shè)置 - 高級 - 勾選「在菜單欄中顯示開發(fā)」菜單
• iphone 設(shè)置：設(shè)置 - Safari - 高級 - 打開 Web 檢查器

大功告成，這時(shí)候通過手機(jī)的 Safari 來打開 H5 頁面，我們通過瀏覽器開發(fā)選項(xiàng)可以看到：

iOS 模擬器：不需要真機(jī)，適合調(diào)試 Webview 和 H5 有頻繁交互的功能頁面。

首先下載 Xcode ，運(yùn)行項(xiàng)目，選擇模擬器 iphonex，編譯后就會打開模擬器，如下：

可以看到 H5 已經(jīng)在「殼子」中運(yùn)行起來了，下來就可以嘗試調(diào)用 Webview 的方法，和「殼子」交互了。更多的調(diào)試技巧可以參考文章：iOS 模擬器調(diào)試。

具體的調(diào)試功能還是依賴瀏覽器的開發(fā)選項(xiàng)，與上無異，就不贅述了。

三、抓包

Charles：Mac OS 系統(tǒng)首選的抓包工具，適合查看、控制網(wǎng)絡(luò)請求，分析數(shù)據(jù)情況。

Charles 抓包首先需要配置手機(jī)代理，Wifi - 配置代理（IP 地址） - 手動，如下圖：

配置好手機(jī)代理，這時(shí)候打開 Charles ，就會收到確認(rèn)提醒，選擇允許。接下來就可以捕獲手機(jī)的請求了，但是這些都是常規(guī)操作，我們來點(diǎn)高級的。

有意思的是：我們可以用本地文件來替換線上文件，方便調(diào)試，遠(yuǎn)程定位線上問題。

選擇 Structure，找到需要替換的文件，右鍵菜單 - Map Local，如下圖：

這時(shí)候就會打開一個彈窗，填寫具體的配置：

OK，大功告成，快去改動本地文件吧，從此再也不怕線上調(diào)試了。需要注意的是如果抓取 HTTPS 請求，要安裝信任證書，下文會詳細(xì)說明。

與之相應(yīng)的是 Windows 平臺的 Fiddler，功能大致相似，這里就不細(xì)說了。

四、Spy-Debugger

spy-debugger：移動端調(diào)試的利器，便捷的遠(yuǎn)程調(diào)試手機(jī)頁面、抓包工具。

我們先來安裝：

> sudo npm install spy-debugger -g

啟動命令：

> spy-debugger

這時(shí)候，控制臺會打印出如下信息，說明服務(wù)已經(jīng)啟動了：

正在啟動代理
本機(jī)在當(dāng)前網(wǎng)絡(luò)下的IP地址為：10.200.24.46
node-mitmproxy啟動端口: 9888
瀏覽器打開 ---> http://127.0.0.1:50389

最后一步，設(shè)置手機(jī)代理：10.200.24.46，端口號：9888。補(bǔ)充說明一下：

• Android 設(shè)置代理步驟：設(shè)置 - WLAN - 長按選中網(wǎng)絡(luò) - 修改網(wǎng)絡(luò) - 高級 - 代理設(shè)置 - 手動
• iOS 設(shè)置代理步驟：設(shè)置 - 無線局域網(wǎng) - 選中網(wǎng)絡(luò) - HTTP 代理手動

接下來，嘗試一下抓包：

再打開調(diào)試頁面：

HTTPS 抓包，需要安裝根證書，下文會詳細(xì)說明。

五、Whistle

上面推薦了一款操作簡單的調(diào)試?yán)?，升級一下，看看更加?qiáng)大的調(diào)試工具 whistle。

whistle：基于 Node 實(shí)現(xiàn)的跨平臺 Web 調(diào)試代理工具。

whistle(讀音[?w?s?l]，拼音[wēisǒu])是基于 Node實(shí)現(xiàn)的跨平臺抓包調(diào)試代理工具，有以下基本功能：

1. 查看 HTTP、HTTPS請求響應(yīng)內(nèi)容
2. 查看 WebSocket、Socket 收發(fā)的幀數(shù)據(jù)
3. 設(shè)置請求 hosts、上游 http/socks 代理
4. 修改請求 url 、方法、頭部、內(nèi)容
5. 修改響應(yīng)狀態(tài)碼、頭部、內(nèi)容，并支持本地替換
6. 修改 WebSocket 或 Socket 收發(fā)的幀數(shù)據(jù)
7. 內(nèi)置調(diào)試移動端頁面的 weinre 和 log
8. 作為 HTTP 代理或反向代理
9. 支持用 Node 編寫插件擴(kuò)展功能

大致了解后，我們來嘗試安裝：

sudo npm install -g whistle

淘寶鏡像：npm install whistle -g –registry=https://registry.npm.taobao.org

whistle 安裝完成后，執(zhí)行命令 whistle help 或 w2 help，查看 whistle 的幫助信息：

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 來啟動服務(wù)：

w2 start

看到如下的輸出，說明服務(wù)已經(jīng)正常啟動了：

這時(shí)候在瀏覽器打開鏈接，同時(shí)手機(jī)上配置代理（同 Charles），接下來就可以愉快的調(diào)試了。值得注意的是，whistle 的功能遠(yuǎn)非如此，更多的擴(kuò)展請移步官網(wǎng)文檔，貼張圖先預(yù)覽下：

記得開啟攔截 HTTPS：勾選 Capture HTTPS CONNECTs

六、安裝 HTTPS 證書

對于 Charles，按照如下操作安裝證書：

help-SSL - Proxying - install Charles root

彈出安裝證書的提示框：

按照提示去手機(jī)瀏覽器打開：chls.pro/ssl，安裝信任證書即可。

對于 spy-debugger，HTTPS 抓包，需要安裝根證書，選擇 RootCA，掃描二維碼按照提示信任證書。安裝證書的時(shí)候需要注意以下幾件事情：

1.手機(jī)必須先設(shè)置完代理后再通過(非微信)手機(jī)瀏覽器訪問 http://s.xxx (地址二維碼)安裝證書；
2.手機(jī)首次調(diào)試需要安裝證書，已安裝了證書的手機(jī)無需重復(fù)安裝；
3.手機(jī)和 PC 保持在同一網(wǎng)絡(luò)下（比如同時(shí)連到一個 WIFI 下）；

切記：移動設(shè)備和 PC 必須在一個 WIFI 下。

七、真機(jī)調(diào)試

上面說了很多，但是實(shí)際開發(fā)過程中，我們不會等上線了才去驗(yàn)證兼容性，所以你可能需要提前「真機(jī)調(diào)試」。這里提供兩種方式：

Chrome Remote Devices：依賴 Chrome 來進(jìn)行遠(yuǎn)程調(diào)試，適合安卓手機(jī)。

首先，開啟 Android 手機(jī)的「開發(fā)者選項(xiàng)」，勾選 「USB 調(diào)試」。
然后，Chrome 中輸入：chrome://inspect，進(jìn)入調(diào)試頁面。

很全面的一篇文章，可以參考：Chrome 遠(yuǎn)程調(diào)試。

localhost 轉(zhuǎn) ip，掃描二維碼手機(jī)顯示，這個比較簡單。

可以在瀏覽器安裝一個 Chrome 插件，用于將當(dāng)前頁面鏈接轉(zhuǎn)換成二維碼，這樣就能邊開發(fā)邊真機(jī)預(yù)覽，非常方便。

八、調(diào)試工具

這里推薦一款調(diào)試工具：vConsole，一個輕量、可拓展、針對手機(jī)網(wǎng)頁的前端開發(fā)者調(diào)試面板。安裝很簡單：

npm install vconsole

如果未使用 AMD/CMD 規(guī)范，可直接在 HTML 中引入 vConsole 模塊。為了便于后續(xù)擴(kuò)展，建議在 <head> 中引入：

<head>
  <script src="path/to/vconsole.min.js"></script>
  <script>
 var vConsole = new VConsole();
  </script>
</head>

如果使用了 AMD/CMD 規(guī)范，可在 module 內(nèi)使用 require() 引入模塊：

var VConsole = require('path/to/vconsole.min.js');
var vConsole = new VConsole();

請注意，VConsole 只是 vConsole 的原型，而非一個已實(shí)例化的對象。

所以在手動 new 實(shí)例化之前，vConsole 不會被插入到網(wǎng)頁中。大概功能如下圖：

看起來很完美，但是有個小缺點(diǎn)：網(wǎng)絡(luò)請求，需要刷新頁面，可是很多內(nèi)嵌的 H5 頁面是沒有機(jī)會刷新頁面的，所以需要客戶端童鞋配合增加刷新的功能方便調(diào)試。

九、場景分析

既然移動端調(diào)試有這么多種方案，那在實(shí)際操作中，我該如何取舍？

說了這么多鐘方案，這里總結(jié)一下各個方案的適用場景，根據(jù)不同的場景去選擇最佳的調(diào)試方案，這樣才能更快速的輸出，Carry 全場：

1.Safari：iPhone 調(diào)試?yán)鳎殄e改樣式首選；
2.iOS 模擬器：不需要真機(jī)，適合調(diào)試 Webview 和 H5 有頻繁交互的功能頁面；
3.Charles：Mac OS 系統(tǒng)首選的抓包工具，適合查看、控制網(wǎng)絡(luò)請求，分析數(shù)據(jù)情況；
4.Fiddler：適合 Windows 平臺，與 Charles 類似，查看、控制網(wǎng)絡(luò)請求，分析數(shù)據(jù)情況；
5.Spy-Debugger：移動端調(diào)試的利器，便捷的遠(yuǎn)程調(diào)試手機(jī)頁面、抓包工具；
6.Whistle：基于 Node 實(shí)現(xiàn)的跨平臺 Web 調(diào)試代理工具；
7.Chrome Remote Devices：依賴 Chrome 來進(jìn)行遠(yuǎn)程調(diào)試，適合安卓手機(jī)遠(yuǎn)程調(diào)試靜態(tài)頁；
8.localhost 轉(zhuǎn) ip：真機(jī)調(diào)試，適合遠(yuǎn)程調(diào)試靜態(tài)頁面；
9.vConsole：內(nèi)置于項(xiàng)目，打印移動端日志，查看網(wǎng)絡(luò)請求以及查看 Cookie 和 Storage；

十、白屏處理

移動端的白屏是最頭疼的問題，這里順帶提供幾種分析問題的思路，以供參考。

1.方案分析 ☆

一般上線后出現(xiàn)問題，我們最容易想到的就是：是否是新代碼引起的問題。所以有效解決手段就是「控制變量法」。

2.代碼注釋法 ☆

莫名奇妙的白屏，適合頁面無異常日志，同時(shí)無請求發(fā)送，問題集中在單一頁面的情況。這種問題比較直觀，肯定是某一頁面出現(xiàn)了代碼異常或是無效的 return，導(dǎo)致頁面渲染終止，但并不屬于異常。這時(shí)候，「代碼注釋法」將是你的最佳選擇，逐行去注釋可以代碼，直到定位問題。

3.類庫異常，兼容問題 ☆

這種場景也會經(jīng)常遇到，我們需要用可以調(diào)試頁面異常的方式，如 Safari，Spy-Debugger，Whistle，vConsole 查看異常日志，從而迅速定位類庫位置，從而找尋替換或是兼容方案。

4.try catch ☆☆

如果你的項(xiàng)目沒有異常監(jiān)控，那么在可疑的代碼片段中去 Try Catch 吧。

5.Debug 包 ☆☆☆

在你的項(xiàng)目中裝上 [vConsole](https://link.zhihu.com/?target=http%3A//jartto.wang/2018/11/01/mobile-debug/)，并配合客戶端 debug 插件，360 度無死角監(jiān)控異常，這才是最有效的方式。

6.ES6 語法兼容 ☆

一般我們都會通過 Babel 來編譯 ES6 ，但是額外的第三方類庫如果有不兼容的語法，低版本的移動設(shè)備就會異常。所以，先用上文講述的調(diào)試方法，確定異常，然后去增加 [polyfill](https://link.zhihu.com/?target=https%3A//polyfill.io/v2/docs/examples) 來兼容吧。