H5 移動(dòng)端調(diào)試全攻略

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

一、概要

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

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

二、iOS 設(shè)備

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

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

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

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

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

可以看到 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ò)請(qǐng)求，分析數(shù)據(jù)情況。

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

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

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

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

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

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

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

四、Spy-Debugger

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

我們先來安裝：

>?sudo?npm?install?spy-debugger?-g

啟動(dòng)命令：

>?spy-debugger

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

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

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

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

接下來，嘗試一下抓包：

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

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

五、Whistle

上面推薦了一款操作簡(jiǎn)單的調(diào)試?yán)鳎?jí)一下，看看更加強(qiáng)大的調(diào)試工具?whistle。

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

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

1. 查看?HTTP、HTTPS請(qǐng)求響應(yīng)內(nèi)容
2. 查看?WebSocket、Socket?收發(fā)的幀數(shù)據(jù)
3. 設(shè)置請(qǐng)求?hosts、上游?http/socks?代理
4. 修改請(qǐng)求?url?、方法、頭部、內(nèi)容
5. 修改響應(yīng)狀態(tài)碼、頭部、內(nèi)容，并支持本地替換
6. 修改?WebSocket?或?Socket?收發(fā)的幀數(shù)據(jù)
7. 內(nèi)置調(diào)試移動(dòng)端頁面的?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

這里只列出部分命令，更多請(qǐng) w2 help 查看。

看到上面的操作，我們何不試試縮寫?w2 start?來啟動(dòng)服務(wù)：

w2 start

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

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

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

六、安裝 HTTPS 證書

對(duì)于?Charles，按照如下操作安裝證書：

help-SSL?-?Proxying?-?install?Charles?root

彈出安裝證書的提示框：

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

對(duì)于?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í)連到一個(gè)?WIFI?下）；

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

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

上面說了很多，但是實(shí)際開發(fā)過程中，我們不會(huì)等上線了才去驗(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ī)顯示，這個(gè)比較簡(jiǎn)單。

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

八、調(diào)試工具

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

npm install vconsole

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

<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();

請(qǐng)注意，VConsole?只是?vConsole?的原型，而非一個(gè)已實(shí)例化的對(duì)象。

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

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

九、場(chǎng)景分析

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

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

1.Safari：iPhone?調(diào)試?yán)鳎殄e(cuò)改樣式首選；
2.iOS?模擬器：不需要真機(jī)，適合調(diào)試?Webview?和?H5?有頻繁交互的功能頁面；
3.Charles：Mac OS?系統(tǒng)首選的抓包工具，適合查看、控制網(wǎng)絡(luò)請(qǐng)求，分析數(shù)據(jù)情況；
4.Fiddler：適合?Windows?平臺(tái)，與?Charles?類似，查看、控制網(wǎng)絡(luò)請(qǐng)求，分析數(shù)據(jù)情況；
5.Spy-Debugger：移動(dòng)端調(diào)試的利器，便捷的遠(yuǎn)程調(diào)試手機(jī)頁面、抓包工具；
6.Whistle：基于?Node?實(shí)現(xiàn)的跨平臺(tái)?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)目，打印移動(dòng)端日志，查看網(wǎng)絡(luò)請(qǐng)求以及查看?Cookie?和?Storage；

十、白屏處理

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

1.方案分析 ☆

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

2.代碼注釋法 ☆

莫名奇妙的白屏，適合頁面無異常日志，同時(shí)無請(qǐng)求發(fā)送，問題集中在單一頁面的情況。這種問題比較直觀，肯定是某一頁面出現(xiàn)了代碼異常或是無效的?return，導(dǎo)致頁面渲染終止，但并不屬于異常。這時(shí)候，「代碼注釋法」將是你的最佳選擇，逐行去注釋可以代碼，直到定位問題。關(guān)注公眾號(hào) 逆鋒起筆，回復(fù) pdf，下載你需要的各種學(xué)習(xí)資料。

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

這種場(chǎng)景也會(huì)經(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 語法兼容 ☆

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

點(diǎn)個(gè)『在看』支持下?