如何使用charles抓包H5頁面內容

安裝charles

這裏推薦直接去官網下載 https://www.charlesproxy.com/latest-release/download.do
根據本身的電腦選擇合適的安裝包，我這裏選擇macOS dmg格式安裝包。安裝好後直接運行，第一次是試用版

破解方法

考慮到本身常用這個抓包，就在網上搜了下破解方法
方法一：
Registered Name: https://zhile.io
License Key: 48891cf209c6d32bf4
直接用上面的註冊碼，點擊help->register Charles 輸入上面提供的註冊碼，輸完肯定後從新啓動charles便可
方法二：
訪問https://www.zzzmode.com/mytools/charles/ 根據頁面提示完成操做

抓取http報文

想要抓取手機上H5頁面可按照一下步驟：

1. 將手機和電腦鏈接在同一個網絡上，電腦和手機鏈接同一WIFI
2. 在Mac上系統偏好設置->網絡面板可查看到本身電腦的ip
3. 在手機鏈接上同一WIFI後，修改網絡，設置代理，填寫服務器主機名爲第2步中查看到的本身電腦的ip，服務器端口爲8888，點擊保存
4. 此時在手機上訪問的http協議頁面在charles上都能看到網絡請求

抓取https報文

想要抓取https報文，必先安裝證書，若是是想抓取mac瀏覽器訪問的https頁面，mac得安裝證書，同理若是是想抓取手機訪問https頁面，手機得安裝證書

mac上證書安裝

1. 點擊help -> SSL proxying -> install charles root certificate 密碼受權
2. 在彈出的添加證書窗口中，選擇添加，能夠看到在鑰匙串訪問窗口中，該證書已成功添加，可是此時該證書仍然不被信任
   
3. 雙擊此證書，在彈出的Charles Proxy CA窗口中，點擊信任按鈕，使用此證書時，選擇始終信任後關閉窗口，使用帳號和密碼受權後，便可看到此證書已經被信任了
   

此時mac上訪問的https頁面在charles上能看到網絡請求了

手機上證書安裝

1. 手機和電腦鏈接同一網絡後，用手機默認瀏覽器訪問http://chls.pro/ssl 下載pem證書
2. 安裝證書，這裏不一樣的手機安裝證書方式不一樣，我這裏已huawei手機爲例 設置->安全和隱私 ->更多安全設置 -> 加密和憑據 -> 從存儲設備安裝 點擊剛纔下載的pem證書 便可安裝完成。 此時手機上訪問的https頁面也能夠在charles上看到網絡請求了