Step1.下載&安裝Charles

去官網下載對應平台的Charles，然後安裝
安裝就如同一般的應用，直接按「Next」或是「下一步」，這邊就不贅述了

Step2.付款/註冊/破解(!?)

由於免費版有些限制，覺得好用的朋友可以付費註冊使用
畢竟身為軟體開發者，支持正版才能促進良性循環

但是網路上稀奇古怪的東西這麼多，Google一下，破解版本還是有的…
只能說看大家良心了

Step3.確認Windows的防火牆暢通

在Windows上安裝Charles的時候，應該會出現下面這個詢問視窗(軟體不同，純示意圖)

基本上這邊應該要選「私人網路」接著按下「允許存取」。如果安裝時你勾選的是「公用網路」，由於安全性問題，Windows會把電腦外部想跟Charles建立連線的裝置或是封包擋下來，導致Android裝置無法從外面連入。

為了確保Android裝置能夠順利從連到主機上的Charles，我們要開啟防火牆檢查一下，開啟「控制台」中的「防火牆」(Win10控制台中，好像叫做Windows Denfender防火牆)

※不論你在之前是不是都選擇「私人網路」，都檢查一下比較好，不然到時候連不上又找不出原因就哭了QQ

選擇左邊的「進階設定」

接著按照步驟讓「 ?」都變成打勾符號，當然，名稱是Charles的項目前方都沒有?就不需要任何操作

1. 選擇「輸入規則」
2. 選擇輸入規則中的名稱前面符號是「 ?」的「Charles.exe」
   (範例圖中只有一個，不過有超過一個就對各項目重複執行流程2~5)
3. 選擇右邊的「內容」，會出現一個小視窗
4. 小視窗內選擇「允許連線」
5. 最後按下確定

Step4.設定Charles，查看Android手機的http封包

該安裝的都安裝好啦，不過由於Charles預設不會啟用查看https封包的功能，我們先練習將Android手機的封包轉傳給電腦上的Charle，並查看http封包的內容，等到步驟熟悉之後再練習查看https封包。

開啟Charles吧!，Charles打開之後預設就會直接開始紀錄本機上進出的封包，你可以馬上看到你的電腦有哪些封包傳出跟傳入。

簡單講解一下

看到下圖左下方黃色底的網址，這是代表是有封包傳去或是有封包從該網址傳入

可以發現黃色底的https://1-edge-chat.facebook.com前面的icon是一個鎖，代表以https協定傳送，相對的，黃色底網址上面一列的藍色icon就代表是用未加密的http協定傳送

由於等等我只要看Android手機上的封包，所以先不顯示本機端送出/傳入的封包

點選上方選項列的Proxy -> Windows Proxy，你會發現預設是勾選的，點一下該選項就能夠取消紀錄本地端的封包，如果要恢復的話就在點選一次同個選項

接著按左上角的清除按鈕，把現有的紀錄清掉

然後點選上方選項列的Help -> Local IP Address
Charles會列出正在使用的網卡名稱，以及連線對應所使用的ip
像是我這邊是只有使用無線網卡連著Wi-Fi，ip是192.168.0.12

找到網卡使用的ip之後，由於封包要轉傳給Charles，我們要知道Charles所建立的Proxy的Port是多少，才能將封包交給他

什麼是Port阿?

假設我們把電腦當作一棟大樓，那麼可以把電腦中的每個應用程式當作是一個人，每個人都住在同一棟大樓裡，不過一個人可能不會只有一戶，根據需求，有的人可能有2,3戶，甚至更多，像是有些人比較有錢，可能就會把整層好幾戶買下來打通之類的。而這邊比較特別的是，每個人都不會出門，都會待在家裡做自己的事情。

那麼今天如果有快遞要送包裹給大樓裡某個人，應該怎麼做呢?，首先，快遞會根據「大樓地址」找到大樓在哪，舉例來說像是「台北市天堂路二段384巷5號」，這邊的「大樓地址」對應到電腦上就是我們所謂的ip，而「包裹」就是被傳送的封包。

不過根據地址找到大樓之後，大樓裡面住了這麼多人，要怎麼把包裹交給正確的收件人呢?，答案也很直接，就是根據包裹上收件人的地址，收件人的地址理論上來說是「大樓地址」+「戶地址」所組成的，延續上面的例子，完整的收件人地址會像是「台北市天堂路二段384巷5號3樓之5」，快遞就能夠根據「3樓之5」這個戶地址來找到正確的收件人，然後把包裹交給他，這邊的「戶地址」對應到電腦中，就是我們所謂的port。

其實上面的例子就是我們一般寄包裹的流程，只是我們把現實生活中的流程跟電腦中的一些專有名詞做對應，讓大家比較好了解

ps.這邊只是以最簡單的例子做比喻告訴大家port的意義是什麼，關於port還有更多更深知識，有興趣的人就去Google一下吧

整理一下

• 包裹：封包
• 應用程式：收件者
• 大樓地址：ip位址
• 戶地址：port

打完之後發現好長XD，我們言歸正傳

在Charles裡面，我們可以在選項列Proxy->Proxy Setttings設定Proxy的Port號碼，預設應該是8888
除非8888 Port已經被其他應用程式使用了，理論上不需要更改
記下來這組數字即可，等等會用到

Step5.設定Android手機，將封包轉送給Charles

首先先到Wi-Fi設定頁面，連上與你使用中的電腦所連線的同個AP(Access Point，簡單來說就是Wi-Fi分享器或是路由器)

由於我是用HTC，就以HTC手機為例囉
長按已經連線的Wi-Fi，然後選擇「修改網路」(左圖)

接著按照右圖的步驟

1. 打開進階選項
2. Proxy：選擇「手動」
3. Proxy主機名稱：填入上面在Charles Help->Local Address IP中找到的ip位址
4. Proxy通訊埠：填入上面在Proxy->Proxy Setttings中找到的port號碼
5. 儲存!

設定完成之後，如果該裝置是第一次連線，Charles會跳出出現對話視窗，詢問你是否要讓某個ip進行連線，按下Allow即可

ps.如果之後要移除該ip的話，可以在Proxy -> Access Control Settings中設定

如果沒有出現這對話視窗的話代表有哪邊設定不對，或是防火牆有問題等等…

有個可以試試看方法：在Proxy -> Access Control Settings中加入Android裝置所使用的ip地址

真的不行就只能請大家自己Google了，或是官網也有提供一些問題的解答
最下面的Reference的部分我也有放一些有關解決問題的資源
尤其是投影片後面有幾頁有指出到連不上Charles的可能原因跟怎麼檢查

接著用Android手機隨便瀏覽一些網站，就可以看到在Charles中出現許多記錄啦~

Step6.來吧，https，讓我看看 (android 7.0以下適用)

基本的紀錄&查看http封包流程學會了之後，接著我們要來處理https的封包啦

不過醜話要說在前頭
以下的方法從Android7.0 開始就無法使用了，

原因是Google希望如果你要debug，你就自己看自己apk的封包就好了，不要看到別人的，所以自己安裝憑證的方式似乎不能使用了

SDK 24 以上要用 charles proxy debug 自己的 app 就要在 manifast 中加入 networkSecurityConfig

詳細的解說可以在下方Charles文件連結中找Android 的部份查看，而我手邊目前沒有7.0的裝置，需要試試看在補充給大家

如果你手機的系統是Android 7.0以下，Let’s Go~

在Charles內，透過Man-In-The-Middle攻擊查看https封包內容的功能是預設關閉的，我們要設定一下開啟這功能，

首先，需要在電腦上安裝Charles 的CA 證書
安裝方式很簡單，只要按下Help -> SSL Proxying -> Install Charles Root Certificate

接著會跳出有關該憑證的資訊視窗(左圖)，有興趣可以看看(!?)，然後按下「安裝憑證」

Windows會開啟憑證匯入精靈(右圖)，這邊就跟你平常安裝軟體一樣(!?)，使用預設值，一直按下一步，當然設定上有需要可以自己更改，最後沒問題的話，憑證就安裝成功啦

電腦這邊設定好了，那就換設定Android手機啦，手機也需要安裝同一個憑證~

在Android設備上開啟這個網址，下載憑證

這邊一樣是以HTC手機為範例，設定介面應該大同小異~

接著選擇設定->安全性->從儲存裝置安裝

找到下載資料夾，選擇charles-proxy-ssl-proxying-certificate.pem這個檔案(左圖)，接著輸入憑證名稱(右圖)，名稱這邊沒有什麼限制，輸入能清楚辨認用途的名稱即可，或是可以跟我一樣打Charles-SSL-CA

下面的認證使用的部分選擇「VPN及應用程式」
最後按下確定，基本上就完成啦

如果你要確定憑證已經安裝完成了，你可以在設定->從安全性->信任的憑證裏頭找到(左圖)，HTC有區分系統跟使用者的憑證，可以輕易在使用者的部分發現剛剛安裝的憑證

另外，手機應該會彈出通知，告知你「網路可能會受到監控」，這邊只是純告知，不用理會這通知哈哈(右圖)

好了~憑證都安裝好了，該弄得的都弄好了
不過奇怪!Charles裡面的https紀錄還是看不到封包內容阿

這是因為Charles預設就是不會去解析https的封包給你看啦
如果你想對截取某個網站上的所有https封包，要在網址上點右鍵->Enable SSL Proxying，這樣就可以看到未來透過該網域傳送的封包的內容了

另外可以看到，選擇Enable SSL Proxying之後，下圖紅色框框內的icon就變成原本是http才會出現的icon，代表封包內容在Charles內可以以明碼的方式查看

Step7.Charles進階功能

Charles除了接收跟紀錄封包之外，還擁有更改封包內容、根據關鍵字過濾封包、模擬弱網路環境、進行壓力測試…等等好用的功能

大家可以參考下面的連結，雖然是Mac的介面，不過用相同的方式操作Windows版本的Charles也是沒有問題的，只是介面不一樣，文字內容都是相符的

打完收工~ The End