H5移動端調(diào)試攻略

作者：瑾 2022-10-26 09:01:55

針對特殊機(jī)型，我們并不能直接通過瀏覽器調(diào)試出其問題所在。因此，需要我們在真實(shí)的設(shè)備場景下，采用真機(jī)調(diào)試的方法，進(jìn)行進(jìn)一步問題的分析。

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

1. 真機(jī)調(diào)試

（1）IOS 調(diào)試

對于mac電腦，ios可以直接使用USB，將真機(jī)連接在MAC電腦上，通過Safari瀏覽器調(diào)試。

手機(jī)的準(zhǔn)備工作：

打開設(shè)置，找到Safari瀏覽器
在 Safari 瀏覽器中找到高級
在高級中找到 web檢查器和JavaScript
將web檢查器和JavaScript打開

手機(jī)準(zhǔn)備就緒后，開始在電腦上操作：

首先打開safari的開發(fā)調(diào)試，在偏好設(shè)置中將開發(fā)的選項(xiàng)框選中。此時就會看到開發(fā)的菜單欄。
將手機(jī)連接在電腦上后，打開Safari瀏覽器，手機(jī)端打開我們的H5頁面，在Safari中菜單欄中找到開發(fā)
在開發(fā)下拉選項(xiàng)卡中找到連接的設(shè)備信息
選擇設(shè)備后就能看到右側(cè)的我們打開的對應(yīng)H5的頁面地址，選中后會發(fā)現(xiàn)手機(jī)設(shè)備中也會有選中標(biāo)識。
點(diǎn)擊后就會打開調(diào)試彈窗，上方有調(diào)試的選項(xiàng)：包括控制臺、元素、以及來源等
網(wǎng)絡(luò)對應(yīng)的就是資源的加載，和chrome的調(diào)試工具類似，可以查看接口，靜態(tài)資源等

注意事項(xiàng)：

如果出現(xiàn)工具不全等，建議升級Safari版本重試。
由于APP包本身的問題，導(dǎo)致不是在本地IDE打出來的包，直接連接調(diào)試APP中的H5頁面，會無法獲取到檢查的應(yīng)用程序。

（2）Android 調(diào)試

對于Android4.2以及以后的版本，默認(rèn)情況下開發(fā)者選項(xiàng)是隱藏的，要啟用開發(fā)者選項(xiàng)，需要在設(shè)置中點(diǎn)擊關(guān)于本機(jī)，然后點(diǎn)擊版本號7次，就會有彈窗提示，打開開發(fā)者選項(xiàng)；
在開發(fā)者選項(xiàng)中，打開USB調(diào)試開關(guān)；將電腦與手機(jī)連接，在手機(jī)上選擇允許電腦連接；【注：有的充電線是只能充電的作用，需要的是可以USB調(diào)試的數(shù)據(jù)線，前者打開USB，無響應(yīng)】

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

打開AndroidStudio，在File中打開Project Structure，復(fù)制sdk路徑

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

touch .bash_profile

該命令的作用是如果不存在.bash_profile文件，則創(chuàng)建該文件；然后輸入以下命令：

open -e .bash_profile

該命令的作用是用文本編輯器 TextEdit 打開.bash_profile文件。如果第一次配置環(huán)境變量，則該文檔應(yīng)該是空的。

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

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

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

執(zhí)行以下命令來刷新環(huán)境變量：

source .bash_profile

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

adb version

安裝好adb后就進(jìn)行創(chuàng)建和修改adb_usb.ini文件：

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

獲取上述 Android 機(jī)的 vendor ID，復(fù)制
終端輸入：vim ~/.android/adb_usb.ini
輸入i，進(jìn)入編輯模式，將 vendor ID 粘貼進(jìn)去，然后輸入:wq保存。
關(guān)閉和重啟 adb：adb kill-server、adb start-server
最后，查看手機(jī)設(shè)備，是否已經(jīng)連接成功：adb devices

如果查看手機(jī)設(shè)備時，已添加的設(shè)備不是devices，而是unauthorized『未授權(quán)』狀態(tài)，則使用以下解決方法：

刪除 adbkey

撤銷手機(jī)的USB調(diào)試授權(quán)，關(guān)閉手機(jī)開發(fā)者模式，關(guān)閉USB調(diào)試
關(guān)閉adb【adb kill-server】，或者重啟電腦
重新連接手機(jī)，打開開發(fā)者選項(xiàng)，開啟USB調(diào)試
彈出是否允許USB調(diào)試彈窗，重新點(diǎn)擊允許，再執(zhí)行adb devices，即可完美解決。

連接成功后，打開谷歌調(diào)試工具：chrome://inspect/#devices，手機(jī)端打開H5頁面，即可看到調(diào)試的H5頁面地址，點(diǎn)擊后即可調(diào)試：

2. 抓包

抓包主要是在數(shù)據(jù)返回有問題，需要提供curl或者分析服務(wù)端返回數(shù)據(jù)結(jié)構(gòu)時進(jìn)行的操作。這里主要介紹使用 Charles 抓包。

（1）Charles 概述

Charles 是常用的 HTTPS 協(xié)議網(wǎng)絡(luò)包截取工具，是一款非常好用的抓包工具。

Charles 的優(yōu)勢如下：

支持SSL代理，可以截取分析SSL的請求；
支持流量控制，模擬弱網(wǎng)情況；
支持ajax調(diào)試，自動將json或者xml數(shù)據(jù)格式化，方便查看；
支持重發(fā)網(wǎng)絡(luò)請求，方便后端調(diào)試；
支持修改網(wǎng)絡(luò)請求的查宿；
支持網(wǎng)絡(luò)請求的截取和動態(tài)修改；
支持多平臺（mac、windows 和linux）。

Charles 的工作原理： Charles的抓包的本質(zhì)是通過網(wǎng)絡(luò)代理進(jìn)行抓包。

普通的 HTTP 請求過程：

加入Charles 的HTTP代理的請求和響應(yīng)過程：

綜上，其實(shí) Charles 在中間做了一個攔截，對請求和響應(yīng)進(jìn)行截取和修改的過程。

（2）HTTP 抓包過程

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

① 開啟Charles代理

下載安裝后第一次啟動默認(rèn)會開啟本機(jī)的系統(tǒng)代理，因?yàn)槲覀冎槐O(jiān)控移動端，所以將此選項(xiàng)去掉：

激活http代理功能：

② 手機(jī)端WIFI添加代理

打開 wifi 設(shè)置，選擇已經(jīng)連接的WIFI，點(diǎn)擊進(jìn)入修改網(wǎng)絡(luò)，將代理改為手動；輸入代理服務(wù)器的IP與端口，IP 即安裝了 Charles 的電腦 IP 地址，端口就是上一步設(shè)置 Charles 時設(shè)置的端口：

注意： 手機(jī)連接的 WIFI 要與電腦在同一個局域網(wǎng)內(nèi)。

③ 開啟Charles錄制功能

當(dāng)手機(jī)連接上代理后，Charles會彈出相應(yīng)的提示框，點(diǎn)擊 allow 即可。點(diǎn)擊工具欄上的開始錄制按鈕，即啟動抓包功能。

④ 啟動移動端中的應(yīng)用開始抓包

在手機(jī)上操作相應(yīng)的頁面進(jìn)行抓包，在Charles的主界面上就可以看到對應(yīng)的請求內(nèi)容。

⑤ 分析抓取的數(shù)據(jù)包

（3）HTTPS抓包步驟

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

① HTTPS 的基本原理

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

② 在手機(jī)端安裝SSL證書

Android 手機(jī)

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

然后在手機(jī)瀏覽器中打開『chls.pro/ssl』地址，打開后安裝證書到本地，顯示下載完成后，在文件管理中找到剛剛下載的證書，將后綴為 prem 的文件，更改擴(kuò)展名變?yōu)閏rt。變更完成后點(diǎn)擊證書進(jìn)行安裝，選擇證書安裝程序，為證書命名，點(diǎn)擊確定后彈出"已安裝『命名』"，則成功安裝。

ios 手機(jī)

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