H5 移動端調試攻略

基於目前主流場景——H5 頁面內嵌在 APP 端的應用，我們基於 H5 頁面承載的平臺，遇到很多設備的兼容性問題【如：ios13.6.1 頁面一直循環請求問題、Android5.0 + ios10 白屏問題等】，針對特殊機型，我們並不能直接通過瀏覽器調試出其問題所在。因此，需要我們在真實的設備場景下，採用真機調試的方法，進行進一步問題的分析。

1. 真機調試

（1）IOS 調試

對於 mac 電腦，ios 可以直接使用 USB，將真機連接在 MAC 電腦上，通過 Safari 瀏覽器調試。

手機的準備工作：

• 打開設置，找到 Safari 瀏覽器

• 在 Safari 瀏覽器中找到高級

• 在高級中找到 web 檢查器和 JavaScript

• 將 web 檢查器和 JavaScript 打開

手機準備就緒後，開始在電腦上操作：

• 首先打開 safari 的開發調試，在偏好設置中將開發的選項框選中。此時就會看到開發的菜單欄。

• 將手機連接在電腦上後，打開 Safari 瀏覽器，手機端打開我們的 H5 頁面，在 Safari 中菜單欄中找到開發

• 在開發下拉選項卡中找到連接的設備信息

• 選擇設備後就能看到右側的我們打開的對應 H5 的頁面地址，選中後會發現手機設備中也會有選中標識。

• 點擊後就會打開調試彈窗，上方有調試的選項：包括控制檯、元素、以及來源等

• 網絡對應的就是資源的加載，和 chrome 的調試工具類似，可以查看接口，靜態資源等

注意事項：

• 如果出現工具不全等，建議升級 Safari 版本重試。

• 由於 APP 包本身的問題，導致不是在本地 IDE 打出來的包，直接連接調試 APP 中的 H5 頁面，會無法獲取到檢查的應用程序。

（2）Android 調試

• 對於 Android4.2 以及以後的版本，默認情況下開發者選項是隱藏的，要啓用開發者選項，需要在設置中點擊關於本機，然後點擊版本號 7 次，就會有彈窗提示，打開開發者選項；

• 在開發者選項中，打開 USB 調試開關；將電腦與手機連接，在手機上選擇允許電腦連接；【注：有的充電線是隻能充電的作用，需要的是可以 USB 調試的數據線，前者打開 USB，無響應】

對於 mac，需要安裝 android 和 adb 配置，纔可以在 chrome 的調試工具中看到將要調試的頁面。安裝後需要配置 adb，參考以下文章：https://www.jianshu.com/p/61339291c9e2

• 打開 AndroidStudio，在 File 中打開 Project Structure，複製 sdk 路徑

然後打開終端，輸入以下命令：

 touch .bash_profile

該命令的作用是如果不存在. bash_profile 文件，則創建該文件；然後輸入以下命令：

open -e .bash_profile

該命令的作用是用文本編輯器 TextEdit 打開.bash_profile文件。如果第一次配置環境變量，則該文檔應該是空的。、

接下來，在該文件中加入下面的代碼：

export ANDROID_HOME="/Users/macbook/Library/Android/sdk"  /// Android SDk 路徑 
export PATH=${PATH}:${ANDROID_HOME}/tools  /// 
export PATH=${PATH}:${ANDROID_HOME}/platform-tools  /// adb環境變量 路徑

編輯好後按下 command + S 保存退出即可。

執行以下命令來刷新環境變量：

source .bash_profile

通過以下命令來測試 adb 是否安裝成功，如果還不行，請檢測保存的 sdk 路徑是否正確：

adb version

安裝好 adb 後就進行創建和修改adb_usb.ini文件：

• 手機連接好電腦，終端輸入：system_profiler SPUSBDataType，可以查看電腦的所有接口及設備信息。

• 獲取上述 Android 機的 vendor ID，複製

• 終端輸入：vim ~/.android/adb_usb.ini

• 輸入i，進入編輯模式，將 vendor ID 粘貼進去，然後輸入:wq保存。

• 關閉和重啓 adb：adb kill-server、adb start-server

• 最後，查看手機設備，是否已經連接成功：adb devices

如果查看手機設備時，已添加的設備不是 devices，而是 unauthorized『未授權』狀態，則使用以下解決方法：

• 刪除 adbkey

• 撤銷手機的 USB 調試授權，關閉手機開發者模式，關閉 USB 調試

• 關閉 adb【adb kill-server】，或者重啓電腦

• 重新連接手機，打開開發者選項，開啓 USB 調試

• 彈出是否允許 USB 調試彈窗，重新點擊允許，再執行 adb devices，即可完美解決。

連接成功後，打開谷歌調試工具：chrome://inspect/#devices，手機端打開 H5 頁面，即可看到調試的 H5 頁面地址，點擊後即可調試：

2. 抓包

抓包主要是在數據返回有問題，需要提供 curl 或者分析服務端返回數據結構時進行的操作。這裏主要介紹使用 Charles 抓包。

（1）Charles 概述

Charles 是常用的 HTTPS 協議網絡包截取工具，是一款非常好用的抓包工具。

Charles 的優勢如下**：**

• 支持 SSL 代理，可以截取分析 SSL 的請求；

• 支持流量控制，模擬弱網情況；

• 支持 ajax 調試，自動將 json 或者 xml 數據格式化，方便查看；

• 支持重發網絡請求，方便後端調試；

• 支持修改網絡請求的查宿；

• 支持網絡請求的截取和動態修改；

• 支持多平臺（mac、windows 和 linux）。

Charles 的工作原理： Charles 的抓包的本質是通過網絡代理進行抓包。

• 普通的 HTTP 請求過程：

• 加入 Charles 的 HTTP 代理的請求和響應過程：

綜上，其實 Charles 在中間做了一個攔截，對請求和響應進行截取和修改的過程。

（2）HTTP 抓包過程

下面來看看 HTTP 的抓包過程是怎麼的。

① 開啓 Charles 代理

1. 下載安裝後第一次啓動默認會開啓本機的系統代理，因爲我們只監控移動端，所以將此選項去掉：

2. 激活 http 代理功能：

② 手機端 WIFI 添加代理

打開 wifi 設置，選擇已經連接的 WIFI，點擊進入修改網絡，將代理改爲手動；輸入代理服務器的 IP 與端口，IP 即安裝了 Charles 的電腦 IP 地址，端口就是上一步設置 Charles 時設置的端口：

注意： 手機連接的 WIFI 要與電腦在同一個局域網內。

③ 開啓 Charles 錄製功能

當手機連接上代理後，Charles 會彈出相應的提示框，點擊 allow 即可。點擊工具欄上的開始錄製按鈕，即啓動抓包功能。

④ 啓動移動端中的應用開始抓包

在手機上操作相應的頁面進行抓包，在 Charles 的主界面上就可以看到對應的請求內容。

⑤ 分析抓取的數據包

（3）HTTPS 抓包步驟

以上爲 HTTP 請求的抓包流程，但是針對 C 端項目，絕大部分都是 https 請求，所以對於 HTTPS，我們還需要做一些前置的工作，保證可以順利的抓包。

① HTTPS 的基本原理

HTTPS 其實就是 HTTP 的升級版，在 HTTP 上又加了一層處理加密信息的模塊【HTTPS = HTTP + SSL/TSL】。服務端和客戶端的信息傳輸都會通過 TLS 進行加密，所以傳輸的數據都是加密後的數據。這樣就避免了敏感信息被第三方獲取。

② 在手機端安裝 SSL 證書

• Android 手機

將 Android 手機與 Charles 進行連接，輸入好 IP 地址和端口號後，打開 Charles 的證書，直接將證書安裝在 Android 手機上。

然後在手機瀏覽器中打開『chls.pro/ssl』地址，打開後安裝證書到本地，顯示下載完成後，在文件管理中找到剛剛下載的證書，將後綴爲 prem 的文件，更改擴展名變爲 crt。變更完成後點擊證書進行安裝，選擇證書安裝程序，爲證書命名，點擊確定後彈出 "已安裝『命名』"，則成功安裝。

• ios 手機

ios 手機也在 WIFI 中連接打開 Charles 的電腦 IP，同 android 的 Charles 下載證書的步驟，將證書下載到 iOS 手機上。然後在手機 Safari 瀏覽器中也輸入 chls.pro/ssl，則彈出圖 1 彈窗，點擊允許，進入安裝步驟，點擊安裝，進入警告，點擊安裝，則安裝完成。之後在設置→ 關於本機→ 證書信任設置 → 找到剛安裝的證書，將開關打開，即安裝完成。

③ 激活 Charles 的 SSL 代理

④ 將指定的 URL 請求開啓 SSL 代理功能

如果點擊某一個請求後發現是亂碼，則需要將指定的 URL 請求開啓 SSL 代理功能。【開啓後，enabled 是置灰的】

⑤ 抓包流程與 HTTP 抓包流程相同

至此，可以進行數據的分析

（4）Charles 其他操作

① 弱網模擬

打開弱網設置模塊如下圖，勾選允許弱網調試後，在下面的參數中調整弱網的參數：

② 修改請求和響應的內容

設置 Charles 的斷點：

對指定的 URL 開啓斷點功能：

編輯請求與響應的內容：

• 編輯請求：點擊 edit Request 編輯請求的內容，編輯完成後點擊 execute，發出去這個請求給服務端

• 編輯響應：點擊 edit response，可對響應內容進行編輯，完成後點擊 execute，將修改後的數據發送給客戶端

③ 視圖切換和關鍵字篩查

Charles 主要提供兩種視圖：

• Structure：視圖將網絡請求按照訪問的域名分類

• Sequence：視圖將網絡請求按照訪問的時間排序

如果響應的請求太多了，可以進行篩選：

④ 標識

開啓以上設置的標識如下：

• 第一個：SSL 設置

• 第二個：弱網控制

• 第三個：斷點設置

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/OMp-Hj9lLdP8JChI7GRxow