作者： Jartto
文章源自：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)鞒福殄e(cuò)改樣式首選请毛，需要我們做如下設(shè)置：

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

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

safari1

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í)候就會打開一個(gè)彈窗蹄葱，填寫具體的配置：

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í)連到一個(gè) WIFI 下）婆翔；

切記：移動設(shè)備和 PC 必須在一個(gè) 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ī)顯示菌赖，這個(gè)比較簡單。

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

八、調(diào)試工具

這里推薦一款調(diào)試工具：vConsole逛尚，一個(gè)輕量垄惧、可拓展、針對手機(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 的原型，而非一個(gè)已實(shí)例化的對象铜靶。

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

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

九、場景分析

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

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

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ò)請求俏脊，分析數(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诚些，并配合客戶端 debug 插件，360 度無死角監(jiān)控異常皇型，這才是最有效的方式诬烹。

6.ES6 語法兼容 ☆

一般我們都會通過 Babel 來編譯 ES6 ，但是額外的第三方類庫如果有不兼容的語法弃鸦，低版本的移動設(shè)備就會異常绞吁。所以，先用上文講述的調(diào)試方法唬格，確定異常家破，然后去增加 polyfill 來兼容吧。