H5 移動端調試全攻略

時間 2021-08-13

標籤 php 前端 node chrome npm 瀏覽器微信網絡 iphone ide 欄目無線简体版

原文原文鏈接

隨着移動設備的高速發展，H5 開發也成爲了 F2E 不可或缺的能力。而移動開發的重中之重就是掌握調試技巧，修 Bug 於無形。php

1、概要

由於移動端操做系統分爲 iOS 和 Android 兩派，因此本文的調試技巧也會按照不一樣的系統來區分。尋找最合適高效的方式，才能讓你事半功倍。前端

文章會列舉目前適合移動端調試的多種方案，快來選擇你的最佳實踐吧！node

2、iOS 設備

Safari：iphone 調試利器，查錯改樣式首選，須要咱們作以下設置：chrome

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

大功告成，這時候經過手機的 Safari 來打開 H5 頁面，咱們經過瀏覽器開發選項能夠看到：npm

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

iOS 模擬器：不須要真機，適合調試 Webview 和 H5 有頻繁交互的功能頁面。瀏覽器

首先下載 Xcode ，運行項目，選擇模擬器 iphonex，編譯後就會打開模擬器，以下：微信

能夠看到 H5 已經在「殼子」中運行起來了，下來就能夠嘗試調用 Webview 的方法，和「殼子」交互了。更多的調試技巧能夠參考文章：iOS 模擬器調試。網絡

具體的調試功能仍是依賴瀏覽器的開發選項，與上無異，就不贅述了。iphone

3、抓包

Charles：Mac OS 系統首選的抓包工具，適合查看、控制網絡請求，分析數據狀況。ide

Charles 抓包首先須要配置手機代理，Wifi - 配置代理（IP 地址） - 手動，以下圖：

配置好手機代理，這時候打開 Charles ，就會收到確認提醒，選擇容許。接下來就能夠捕獲手機的請求了，可是這些都是常規操做，咱們來點高級的。

有意思的是：咱們能夠用本地文件來替換線上文件，方便調試，遠程定位線上問題。

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

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

OK，大功告成，快去改動本地文件吧，今後不再怕線上調試了。須要注意的是若是抓取 HTTPS 請求，要安裝信任證書，下文會詳細說明。

與之相應的是 Windows 平臺的 Fiddler，功能大體類似，這裏就不細說了。

4、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 抓包，須要安裝根證書，下文會詳細說明。

5、Whistle

上面推薦了一款操做簡單的調試利器，升級一下，看看更增強大的調試工具 whistle。

whistle：基於 Node 實現的跨平臺 Web 調試代理工具。

whistle(讀音[ˈwɪsəl]，拼音[wēisǒu])是基於 Node實現的跨平臺抓包調試代理工具，有如下基本功能：

查看 HTTP、HTTPS請求響應內容
查看 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 的幫助信息：

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 來啓動服務：

w2 start

看到以下的輸出，說明服務已經正常啓動了：

這時候在瀏覽器打開連接，同時手機上配置代理（同 Charles），接下來就能夠愉快的調試了。值得注意的是，whistle 的功能遠非如此，更多的擴展請移步官網文檔，貼張圖先預覽下：

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

6、安裝 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 下。

7、真機調試

上面說了不少，可是實際開發過程當中，咱們不會等上線了纔去驗證兼容性，因此你可能須要提早「真機調試」。這裏提供兩種方式：

Chrome Remote Devices：依賴 Chrome 來進行遠程調試，適合安卓手機。

首先，開啓 Android 手機的「開發者選項」，勾選「USB 調試」。
而後，Chrome 中輸入：chrome://inspect，進入調試頁面。

很全面的一篇文章，能夠參考：Chrome 遠程調試。

localhost 轉 ip，掃描二維碼手機顯示，這個比較簡單。

能夠在瀏覽器安裝一個 Chrome 插件，用於將當前頁面連接轉換成二維碼，這樣就能邊開發邊真機預覽，很是方便。

8、調試工具

這裏推薦一款調試工具：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 頁面是沒有機會刷新頁面的，因此須要客戶端童鞋配合增長刷新的功能方便調試。

9、場景分析

既然移動端調試有這麼多種方案，那在實際操做中，我該如何取捨？

說了這麼多鍾方案，這裏總結一下各個方案的適用場景，根據不一樣的場景去選擇最佳的調試方案，這樣才能更快速的輸出，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；

10、白屏處理

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

1.方案分析 ☆

通常上線後出現問題，咱們最容易想到的就是：是不是新代碼引發的問題。因此有效解決手段就是「控制變量法」。

2.代碼註釋法 ☆

莫名奇妙的白屏，適合頁面無異常日誌，同時無請求發送，問題集中在單一頁面的狀況。這種問題比較直觀，確定是某一頁面出現了代碼異常或是無效的 return，致使頁面渲染終止，但並不屬於異常。這時候，「代碼註釋法」將是你的最佳選擇，逐行去註釋能夠代碼，直到定位問題。關注公衆號逆鋒起筆，回覆 pdf，下載你須要的各類學習資料。

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

這種場景也會常常遇到，咱們須要用能夠調試頁面異常的方式，如 Safari，Spy-Debugger，Whistle，vConsole 查看異常日誌，從而迅速定位類庫位置，從而找尋替換或是兼容方案。

4.try catch ☆☆

若是你的項目沒有異常監控，那麼在可疑的代碼片斷中去 Try Catch 吧。

5.Debug 包 ☆☆☆

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

6.ES6 語法兼容 ☆

通常咱們都會經過 Babel 來編譯 ES6 ，可是額外的第三方類庫若是有不兼容的語法，低版本的移動設備就會異常。因此，先用上文講述的調試方法，肯定異常，而後去增長 [polyfill](https://link.zhihu.com/?target=https%3A//polyfill.io/v2/docs/examples) 來兼容吧。