基于目前主流場景——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設置
• 第二個：弱網控制
• 第三個：斷點設置