藍(lán)暢首頁(yè) >> 動(dòng)態(tài)
H5開(kāi)發(fā)移動(dòng)調(diào)試全攻略，如何調(diào)試H5
時(shí)間：2019-11-23 22:53:25 | 來(lái)源：
一、概要
因?yàn)橐苿?dòng)端操作系統(tǒng)分為 iOS 和 Android 兩派，所以本文的調(diào)試技巧也會(huì)按照不同的系統(tǒng)來(lái)區(qū)分。尋找最合適高效的方式，才能讓你事半功倍。
文章會(huì)列舉目前適合移動(dòng)端調(diào)試的多種方案，快來(lái)選擇你的最佳實(shí)踐吧！
二、iOS 設(shè)備
Safari：iphone 調(diào)試?yán)?，查錯(cuò)改樣式首選，需要我們做如下設(shè)置：
瀏覽器設(shè)置：Safari - 偏好設(shè)置 - 高級(jí) - 勾選「在菜單欄中顯示開(kāi)發(fā)」菜單
iphone 設(shè)置：設(shè)置 - Safari - 高級(jí) - 打開(kāi) Web 檢查器
大功告成，這時(shí)候通過(guò)手機(jī)的 Safari 來(lái)打開(kāi) H5 頁(yè)面，我們通過(guò)瀏覽器開(kāi)發(fā)選項(xiàng)可以看到：
iOS 模擬器：不需要真機(jī)，適合調(diào)試 Webview 和 H5 有頻繁交互的功能頁(yè)面。
首先下載 Xcode ，運(yùn)行項(xiàng)目，選擇模擬器 iphonex，編譯后就會(huì)打開(kāi)模擬器，如下：
可以看到 H5 已經(jīng)在「殼子」中運(yùn)行起來(lái)了，下來(lái)就可以嘗試調(diào)用 Webview 的方法，和「殼子」交互了。更多的調(diào)試技巧可以參考文章：iOS 模擬器調(diào)試。
具體的調(diào)試功能還是依賴瀏覽器的開(kāi)發(fā)選項(xiàng)，與上無(wú)異，就不贅述了。
三、抓包
Charles： Mac OS 系統(tǒng)首選的抓包工具，適合查看、控制網(wǎng)絡(luò)請(qǐng)求，分析數(shù)據(jù)情況。
Charles 抓包首先需要配置手機(jī)代理，Wifi - 配置代理（IP 地址） - 手動(dòng)，如下圖：
配置好手機(jī)代理，這時(shí)候打開(kāi) Charles ，就會(huì)收到確認(rèn)提醒，選擇允許。接下來(lái)就可以捕獲手機(jī)的請(qǐng)求了，但是這些都是常規(guī)操作，我們來(lái)點(diǎn)高級(jí)的。
有意思的是：我們可以用本地文件來(lái)替換線上文件，方便調(diào)試，遠(yuǎn)程定位線上問(wèn)題。
選擇 Structure，找到需要替換的文件，右鍵菜單 - Map Local，如下圖：
這時(shí)候就會(huì)打開(kāi)一個(gè)彈窗，填寫(xiě)具體的配置：
OK，大功告成，快去改動(dòng)本地文件吧，從此再也不怕線上調(diào)試了。需要注意的是如果抓取 HTTPS 請(qǐng)求，要安裝信任證書(shū)，下文會(huì)詳細(xì)說(shuō)明。
與之相應(yīng)的是 Windows 平臺(tái)的 Fiddler，功能大致相似，這里就不細(xì)說(shuō)了。
四、Spy-Debugger
spy-debugger： 移動(dòng)端調(diào)試的利器，便捷的遠(yuǎn)程調(diào)試手機(jī)頁(yè)面、抓包工具。
我們先來(lái)安裝：
啟動(dòng)命令：
這時(shí)候，控制臺(tái)會(huì)打印出如下信息，說(shuō)明服務(wù)已經(jīng)啟動(dòng)了：
最后一步，設(shè)置手機(jī)代理：10.200.24.46，端口號(hào)：9888。補(bǔ)充說(shuō)明一下：
Android設(shè)置代理步驟：設(shè)置 -WLAN- 長(zhǎng)按選中網(wǎng)絡(luò) - 修改網(wǎng)絡(luò) - 高級(jí) - 代理設(shè)置 - 手動(dòng)iOS設(shè)置代理步驟：設(shè)置 - 無(wú)線局域網(wǎng) - 選中網(wǎng)絡(luò) -HTTP代理手動(dòng)
接下來(lái)，嘗試一下抓包：
再打開(kāi)調(diào)試頁(yè)面：
HTTPS 抓包，需要安裝根證書(shū)，下文會(huì)詳細(xì)說(shuō)明。
五、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)試代理工具，有以下基本功能：
查看
HTTP、HTTPS請(qǐng)求響應(yīng)內(nèi)容查看
WebSocket、Socket收發(fā)的幀數(shù)據(jù)設(shè)置請(qǐng)求
hosts、上游http/socks代理修改請(qǐng)求
url、方法、頭部、內(nèi)容修改響應(yīng)狀態(tài)碼、頭部、內(nèi)容，并支持本地替換
修改
WebSocket或Socket收發(fā)的幀數(shù)據(jù)內(nèi)置調(diào)試移動(dòng)端頁(yè)面的
weinre和log作為
HTTP代理或反向代理支持用
Node編寫(xiě)插件擴(kuò)展功能
大致了解后，我們來(lái)嘗試安裝：
淘寶鏡像：npm install whistle -g –registry=https://registry.npm.taobao.org
whistle 安裝完成后，執(zhí)行命令 whistle help 或 w2 help，查看 whistle 的幫助信息：
這里只列出部分命令，更多請(qǐng) w2 help 查看。
看到上面的操作，我們何不試試縮寫(xiě) w2 start 來(lái)啟動(dòng)服務(wù)：
看到如下的輸出，說(shuō)明服務(wù)已經(jīng)正常啟動(dòng)了：
這時(shí)候在瀏覽器打開(kāi)鏈接，同時(shí)手機(jī)上配置代理（同 Charles），接下來(lái)就可以愉快的調(diào)試了。值得注意的是，whistle 的功能遠(yuǎn)非如此，更多的擴(kuò)展請(qǐng)移步官網(wǎng)文檔，貼張圖先預(yù)覽下：
記得開(kāi)啟攔截 HTTPS：勾選 Capture HTTPS CONNECTs
六、安裝 HTTPS 證書(shū)
對(duì)于 Charles，按照如下操作安裝證書(shū)：
彈出安裝證書(shū)的提示框：
按照提示去手機(jī)瀏覽器打開(kāi)：chls.pro/ssl，安裝信任證書(shū)即可。
對(duì)于 spy-debugger，HTTPS 抓包，需要安裝根證書(shū)，選擇 RootCA，掃描二維碼按照提示信任證書(shū)。安裝證書(shū)的時(shí)候需要注意以下幾件事情：
1.手機(jī)必須先設(shè)置完代理后再通過(guò)(非微信)手機(jī)瀏覽器訪問(wèn) http://s.xxx (地址二維碼)安裝證書(shū)；
2.手機(jī)首次調(diào)試需要安裝證書(shū)，已安裝了證書(shū)的手機(jī)無(wú)需重復(fù)安裝；
3.手機(jī)和 PC 保持在同一網(wǎng)絡(luò)下（比如同時(shí)連到一個(gè) WIFI 下）；
切記：移動(dòng)設(shè)備和 PC 必須在一個(gè) WIFI 下。
七、真機(jī)調(diào)試
上面說(shuō)了很多，但是實(shí)際開(kāi)發(fā)過(guò)程中，我們不會(huì)等上線了才去驗(yàn)證兼容性，所以你可能需要提前「真機(jī)調(diào)試」。這里提供兩種方式：
Chrome Remote Devices：依賴 Chrome 來(lái)進(jìn)行遠(yuǎn)程調(diào)試，適合安卓手機(jī)。
首先，開(kāi)啟 Android 手機(jī)的「開(kāi)發(fā)者選項(xiàng)」，勾選 「USB 調(diào)試」。
然后，Chrome 中輸入：chrome://inspect，進(jìn)入調(diào)試頁(yè)面。
很全面的一篇文章，可以參考：Chrome 遠(yuǎn)程調(diào)試。
localhost 轉(zhuǎn) ip，掃描二維碼手機(jī)顯示，這個(gè)比較簡(jiǎn)單。
可以在瀏覽器安裝一個(gè) Chrome 插件，用于將當(dāng)前頁(yè)面鏈接轉(zhuǎn)換成二維碼，這樣就能邊開(kāi)發(fā)邊真機(jī)預(yù)覽，非常方便。
八、調(diào)試工具
這里推薦一款調(diào)試工具：vConsole，一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板。安裝很簡(jiǎn)單：
如果未使用 AMD/CMD 規(guī)范，可直接在 HTML 中引入 vConsole 模塊。為了便于后續(xù)擴(kuò)展，建議在 <head> 中引入：
如果使用了 AMD/CMD 規(guī)范，可在 module 內(nèi)使用 require() 引入模塊：
請(qǐng)注意，VConsole 只是 vConsole 的原型，而非一個(gè)已實(shí)例化的對(duì)象。
所以在手動(dòng) new 實(shí)例化之前，vConsole 不會(huì)被插入到網(wǎng)頁(yè)中。大概功能如下圖：
看起來(lái)很完美，但是有個(gè)小缺點(diǎn)：網(wǎng)絡(luò)請(qǐng)求，需要刷新頁(yè)面，可是很多內(nèi)嵌的 H5 頁(yè)面是沒(méi)有機(jī)會(huì)刷新頁(yè)面的，所以需要客戶端童鞋配合增加刷新的功能方便調(diào)試。
九、場(chǎng)景分析
既然移動(dòng)端調(diào)試有這么多種方案，那在實(shí)際操作中，我該如何取舍？
說(shuō)了這么多鐘方案，這里總結(jié)一下各個(gè)方案的適用場(chǎng)景，根據(jù)不同的場(chǎng)景去選擇最佳的調(diào)試方案，這樣才能更快速的輸出，Carry 全場(chǎng)：
1.Safari：iPhone 調(diào)試?yán)?，查錯(cuò)改樣式首選；
2.iOS 模擬器：不需要真機(jī)，適合調(diào)試 Webview 和 H5 有頻繁交互的功能頁(yè)面；
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ī)頁(yè)面、抓包工具；
6.Whistle：基于 Node 實(shí)現(xiàn)的跨平臺(tái) Web 調(diào)試代理工具；
7.Chrome Remote Devices：依賴 Chrome 來(lái)進(jìn)行遠(yuǎn)程調(diào)試，適合安卓手機(jī)遠(yuǎn)程調(diào)試靜態(tài)頁(yè)；
8.localhost 轉(zhuǎn) ip：真機(jī)調(diào)試，適合遠(yuǎn)程調(diào)試靜態(tài)頁(yè)面；
9.vConsole：內(nèi)置于項(xiàng)目，打印移動(dòng)端日志，查看網(wǎng)絡(luò)請(qǐng)求以及查看 Cookie 和 Storage；
十、白屏處理
移動(dòng)端的白屏是最頭疼的問(wèn)題，這里順帶提供幾種分析問(wèn)題的思路，以供參考。
1.方案分析 ☆
一般上線后出現(xiàn)問(wèn)題，我們最容易想到的就是：是否是新代碼引起的問(wèn)題。所以有效解決手段就是「控制變量法」。
2.代碼注釋法 ☆
莫名奇妙的白屏，適合頁(yè)面無(wú)異常日志，同時(shí)無(wú)請(qǐng)求發(fā)送，問(wèn)題集中在單一頁(yè)面的情況。這種問(wèn)題比較直觀，肯定是某一頁(yè)面出現(xiàn)了代碼異常或是無(wú)效的 return，導(dǎo)致頁(yè)面渲染終止，但并不屬于異常。這時(shí)候，「代碼注釋法」將是你的最佳選擇，逐行去注釋可以代碼，直到定位問(wèn)題。
3.類庫(kù)異常，兼容問(wèn)題 ☆
這種場(chǎng)景也會(huì)經(jīng)常遇到，我們需要用可以調(diào)試頁(yè)面異常的方式，如 Safari，Spy-Debugger，Whistle，vConsole 查看異常日志，從而迅速定位類庫(kù)位置，從而找尋替換或是兼容方案。
4.try catch ☆☆
如果你的項(xiàng)目沒(méi)有異常監(jiān)控，那么在可疑的代碼片段中去 Try Catch 吧。
5.Debug 包 ☆☆☆
在你的項(xiàng)目中裝上 vConsole，并配合客戶端 debug 插件，360 度無(wú)死角監(jiān)控異常，這才是最有效的方式。
6.ES6 語(yǔ)法兼容 ☆
一般我們都會(huì)通過(guò) Babel 來(lái)編譯 ES6 ，但是額外的第三方類庫(kù)如果有不兼容的語(yǔ)法，低版本的移動(dòng)設(shè)備就會(huì)異常。所以，先用上文講述的調(diào)試方法，確定異常，然后去增加 polyfill 來(lái)兼容吧。
關(guān)于我們：
Infocode藍(lán)暢信息技術(shù)有限公司成功為多家世界財(cái)富500強(qiáng)企業(yè)以及其他著名品牌提供優(yōu)質(zhì)服務(wù)，是您靠譜的互聯(lián)網(wǎng)開(kāi)發(fā)供應(yīng)商。
服務(wù)客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無(wú)錫、廈門(mén)、重慶、西安等大中型城市及地區(qū) 為您提供：H5開(kāi)發(fā)，小程序開(kāi)發(fā)，H5外包，微信開(kāi)發(fā)，H5商城開(kāi)發(fā)，小程序商城開(kāi)發(fā)，網(wǎng)站開(kāi)發(fā)外包，H5游戲開(kāi)發(fā)，小程序開(kāi)發(fā)外包，小程序設(shè)計(jì)、APP開(kāi)發(fā)外包，UI設(shè)計(jì)，SEO優(yōu)化，SEO外包，視頻后期制作等優(yōu)質(zhì)服務(wù)
網(wǎng)站優(yōu)化公司：網(wǎng)站優(yōu)化的作用
如何實(shí)現(xiàn)SEO關(guān)鍵詞排名提升成為了企業(yè)亟待解決的問(wèn)題
提升網(wǎng)站快速排名的SEO策略，讓你的網(wǎng)站名列前茅
打造高效SEO網(wǎng)站系統(tǒng)，提升您的在線業(yè)務(wù)