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

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

（1）IOS 調(diào)試

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

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

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

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

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

注意事項(xiàng)：

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

（2）Android 調(diào)試

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

對(duì)于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

通過以下命令來測(cè)試 adb 是否安裝成功，如果還不行，請(qǐng)檢測(cè)保存的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í)，已添加的設(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ù)端返回?cái)?shù)據(jù)結(jié)構(gòu)時(shí)進(jìn)行的操作。這里主要介紹使用 Charles 抓包。

（1）Charles 概述

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

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

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

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

• 普通的 HTTP 請(qǐng)求過程：

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

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

（2）HTTP 抓包過程

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

① 開啟Charles代理

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

2. 激活http代理功能：

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

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

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

③ 開啟Charles錄制功能

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

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

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

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

（3）HTTPS抓包步驟

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

① HTTPS 的基本原理

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

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

• Android 手機(jī)

將Android手機(jī)與 Charles 進(jìn)行連接，輸入好IP地址和端口號(hào)后，打開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)打開，即安裝完成。

③ 激活Charles的SSL代理

④ 將指定的URL請(qǐng)求開啟SSL代理功能

如果點(diǎn)擊某一個(gè)請(qǐng)求后發(fā)現(xiàn)是亂碼，則需要將指定的URL請(qǐng)求開啟SSL代理功能?！鹃_啟后，enabled是置灰的】

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

至此，可以進(jìn)行數(shù)據(jù)的分析

（4）Charles 其他操作

① 弱網(wǎng)模擬

打開弱網(wǎng)設(shè)置模塊如下圖，勾選允許弱網(wǎng)調(diào)試后，在下面的參數(shù)中調(diào)整弱網(wǎng)的參數(shù)：

② 修改請(qǐng)求和響應(yīng)的內(nèi)容

設(shè)置Charles的斷點(diǎn)：

對(duì)指定的URL開啟斷點(diǎn)功能：

編輯請(qǐng)求與響應(yīng)的內(nèi)容：

• 編輯請(qǐng)求：點(diǎn)擊edit Request編輯請(qǐng)求的內(nèi)容，編輯完成后點(diǎn)擊execute，發(fā)出去這個(gè)請(qǐng)求給服務(wù)端

• 編輯響應(yīng)：點(diǎn)擊edit response，可對(duì)響應(yīng)內(nèi)容進(jìn)行編輯，完成后點(diǎn)擊 execute，將修改后的數(shù)據(jù)發(fā)送給客戶端

③ 視圖切換和關(guān)鍵字篩查

Charles主要提供兩種視圖：

• Structure：視圖將網(wǎng)絡(luò)請(qǐng)求按照訪問的域名分類
• Sequence：視圖將網(wǎng)絡(luò)請(qǐng)求按照訪問的時(shí)間排序

如果響應(yīng)的請(qǐng)求太多了，可以進(jìn)行篩選：

④ 標(biāo)識(shí)

開啟以上設(shè)置的標(biāo)識(shí)如下：

• 第一個(gè)：SSL設(shè)置
• 第二個(gè)：弱網(wǎng)控制
• 第三個(gè)：斷點(diǎn)設(shè)置