文章目錄
- 一、前言
- 二、環境
- 三、代理配置
- 四、IOS 配置
- 五、Android 配置
- 六、小結
一、前言
說起前端分析工具，我翻來翻去，把 Chrome/Safari/Firefox/IE…的性能工具翻了一個遍，真是覺得工具五花八門，但是…
原理沒變，
想著也該寫個公眾號文章了，以讓別人知道我在干什么，可是寫什么主題呢？
http1.1/2.0 協議下的性能分析？ 看話題就覺得沒啥觀眾，
瀏覽器不同內核對前端處理的邏輯？會有人問：啥是內核？感覺很受傷，
…
并且從歷史上的文章來看，一步步基礎操作的文章比較受歡迎，所以有了寫這篇文章的想法，
我在整理前端工具的時候，發現 charles 工具還不錯，雖說是收費的工具，但是支持的平臺挺多，
但是在網上看到挺多文章說 charles 錄制 https 的時候，都沒有把錄制 android/IOS 上的 https 應用寫的非常清楚，在這里一步步寫出來給大家參考下，
正文從這里開始，
二、環境
-
macOS Sierra Version 10.12.6
-
Charles 4.2.5
-
iphone Version 9.1（不同版本有稍微的區別，只要能找到相應配置即可）
-
華為EMUI Version 5.0.3 / Android Version 7.0
三、代理配置
-
首先打開Charles，主界面如下，
-
查看下代理配置，點 Proxy Setting…，同時把錄制按鈕點亮（其實默認就是亮的）
這個埠要記住，默認是 8888，
-
安裝Charles自己的根證書，點擊 Help>
SSL Proxying>Install Charles Root Certificate
-
查看下 keychain 中的 Charles 證書是否始終信任，
- 保存Charles的根證書，點擊 Help >
SSL Proxying>Save Charles Root Certificate，（保存到哪里不用我說了吧？要一定要說的話，那就是隨你的便！)
- 查看下本地 IP，點擊 Help >
Local IP Address，
以上都是電腦上的準備作業，下面開始配置手機，因為 IOS 和 Android 的配置有不同，所以這里，分成兩部分寫，
四、IOS 配置
- 點開 wifi 的資訊界面，并點擊“手動”配置代理服務器，這里的 IP 就是前面看到的 IP，埠是前面配置的埠，
- 在手機上配置了上一步之后，在電腦上會出現如下提示，這肯定是點 Allow 了，
-
在手機上輸入一個https的網址時會出現如下提示，點擊信任， 這一步還有另一個方法，就是點擊設定->通用->關于本機->證書信任設定-> 找到 charles proxy custom root certificate，然后開啟信任，
-
在手機上打開 https 的頁面，在電腦上查看錄制效果，上邊是電腦上 Charles 的錄制結果；下邊是手機上的打開的頁面，
五、Android 配置
-
在手機上配置代理，怎么找到如下這個頁面的呢？要在 wifi 的連接上按住不動，出現個選單，然后點擊 Modify network，并且在新視窗中點擊 Show advanced options，
-
在手機上配置了上一步之后，在電腦上會出現如下提示，這肯定是點 Allow 了，
-
在手機上安裝證書，
3.1. 把保存的根證書檔案傳到手機上，（我是用微信的檔案傳輸助手傳的，你想用什么就隨便了，前提是你能找得到檔案保存在哪里了，）
3.2. 點擊 Install from SD card，找到證書檔案（下面右圖最上面的一個檔案），
3.3. 輸入屏保密碼和證書名，我知道這里會有人問，為啥這一步要用拍的圖，而不是截的圖呢？哈哈，這就是因為呀，手機上不允許在這一步直接用截圖功能！
- 在手機上打開 https 的頁面，在電腦上查看錄制效果， 上邊是電腦上 Charles 的錄制結果；下邊是手機上的打開的頁面，
正文至此完，
六、小結
在這個沒有講虛幻的原理和邏輯的文章中，一步步的操作是不是讓你有很腳踏實地的感覺？
其實我強忍著沒有寫 charles 的抓包原理和邏輯（其實就一個 proxy，有啥好講的呢），
這樣的抓包程序，并不是原理有多復雜，而是邏輯有點繞(不是操作上感覺邏輯繞，而是解釋邏輯起來有點繞)，點開了也不難懂，就是網路中的資料包是怎么走的，只要明白這一點，管它是什么手機，管他是什么系統在運行類似這樣的抓包工具，都是可以配置得出來的，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/282640.html
標籤：其他