プロキシアプリCharlesで通信まわりのデバッグが快適になったので布教したい

この記事は[チームラボエンジニアリングアドベントカレンダー](https://qiita.com/advent-calendar/2019/team-lab-engineering)6日目の記事です。
# はじめに
iOSアプリ開発でCharlesを使ってみたところ、通信まわりのデバッグがたいへん快適になりました！
モバイルだけでなく、Web開発でも通信周りのデバッグでCharlesは威力を発揮しそうです。
導入も簡単で、10分あれば設定が完了します。

この記事では、以下についてまとめています。

- Charlesの導入方法
- 通信をキャプチャしたい端末側の設定(PC, iOS実機, iOSシミュレータ)
- Charlesでのデバッグ方法

とにかく、みんなCharles使おうぜ！という布教記事です:innocent:


# Charlesについて

公式サイト
https://www.charlesproxy.com/

モバイル開発・Web開発かかわらず、こんなことでお困りではないでしょうか？

- サーバがメンテナンス中で通信まわりの実装の確認ができない
- 開発用のモックサーバを書き換えに行くのが面倒
- 正しい順番で複数のAPIを呼べているか不安…

プロキシアプリCharlesを使えば、自分のPC上で通信をキャプチャ＆編集できるので、これらの悩みが一気に解決します！


有料アプリ(50US$)ですが、30日間は無料で利用できます。
ただし5分に1回ぐらい購入してねアラートが出る、かつ30分でアプリが強制終了します…
イラっとしたら購入しましょう :moneybag: 


# Charlesでできること
- 通信のモニタリングがリアルタイムできる！(ブレイクポイントも置ける)
- 通信のリクエスト・レスポンスを自由に書き換えられる！
- 低速の通信状況をシミュレータできる！
- リバースプロキシを試せる！

…などなど通信まわりのハンドリングが自由自在にできます。
激アツです:fire:



# Charlesの導入方法

バージョン: 4.5.4 (2019/11/28時点での最新版)
### 1. Charlesのダウンロード

- [公式サイトのダウンロードページ](https://www.charlesproxy.com/download/)からDLする。(Mac版は赤枠内)
<img width="1037" alt="スクリーンショット 2019-11-26 13.45.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/3963e591-a958-2de8-4dc6-b3da16a043f7.png">

- Charlsを立ち上げる。
<img width="623" alt="スクリーンショット 2019-11-28 21.28.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/72451fc4-3e44-b334-7259-00fb7fe18ae5.png">


### 2. プロキシの設定
- プロキシの設定を行う
<img width="147" alt="スクリーンショット 2019-11-26 14.32.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/e3f18023-62fd-be94-e80f-08123e94fe5a.png">


- 画像のように設定されていればOK
<img width="592" alt="スクリーンショット 2019-11-26 14.31.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/919af243-cfe4-a10d-b4af-d6875d0b9fdc.png">

### 3. 証明書の設定
- 証明書の設定を行う
<img width="655" alt="スクリーンショット 2019-11-26 14.33.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/f12d497e-121a-32a8-78b4-228529d4edd3.png">

- キーチェーンアクセスが表示されるので、`Charles Proxy CA`を探す
<img width="212" alt="スクリーンショット 2019-11-26 14.30.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/cb1ae602-ebf2-c244-89fe-d64d29f35349.png">

- 「常に信頼」に変更する
<img width="391" alt="スクリーンショット 2019-11-26 14.31.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/7ad030c6-7a52-b0fb-2d73-388b43a20400.png">

### 4. SSLプロキシの設定
- SSLプロキシの設定を行う  
<img width="243" alt="スクリーンショット 2019-11-26 14.34.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/a671a3bc-d3c0-1de9-19af-74ebc5c06f63.png">

- 「Enable　SSL Proxying」にチェックを入れ、「Add」をクリック
<img width="590" alt="スクリーンショット 2019-11-26 14.34.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/dc1b7820-12a3-ee2b-e138-dd6e3bdaf2d9.png">

- Hostにワイルドカード「*」を設定
<img width="440" alt="スクリーンショット 2019-11-26 14.35.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/b39ff3d4-b411-2437-329c-4dc6b53f5fd6.png">


これで下準備は完了です！簡単！




# Charlesで通信をキャプチャしたい端末側の設定
### 1. ローカルPC
- 「Proxy」 → 「macOS Proxy」を選択
<img width="248" alt="スクリーンショット 2019-12-01 23.09.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/5244d3d4-a61d-5612-a373-68b92811ca83.png">

- PCの通信が表示されればOK
<img width="489" alt="スクリーンショット_2019-12-01_23_18_21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/3f0b2105-b82c-8172-dcbc-9633519f1214.png">




### 2. iOSの実機
※ 画像のOSのバージョンは12.3.1ですが、13.2.2も同様に設定できました。

#### プロキシの設定
実機の通信をキャプチャーするためには、Charlesを起動させているPCと同じIPアドレスで接続する必要があります。

- [Charles側]以下を選択して、表示されたローカルIPアドレスをメモしておく  
<img width="166" alt="スクリーンショット 2019-11-26 14.38.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/da5e71f7-ef02-f352-8824-f6c35c540f1f.png">

- [実機側]Charlesを起動させているPCと同じwifiに接続して、接続先の詳細から「プロキシを構成」を選択
<img width="166" alt="スクリーンショット 2019-11-26 14.38.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/94375915-b14a-3c06-a7ba-c0bbc42b5efa.png">


- 「手動」を選択して先ほどメモしたIPアドレスを入力
<img width="166" alt="IMG_0016.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/6563175d-1950-0760-15d1-d8fd50f2f132.png">



#### 証明書の設定
- [実機側]PC側でCharlesを起動した状態で、Safariから http://www.charlesproxy.com/getssl を開き、「許可」を選択
<img width="166" alt="IMG_0018.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/60cf01ff-03fd-8ffc-c4ac-1fe4b31ea4ae.png">

- 「設定」を開いて、インストールを完了させる
<img width="166" alt="IMG_0020.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/fbcd4197-c68a-3a7f-fa9c-7c56cb4d4ee7.png">
<img width="166" alt="IMG_0020.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/218e62e4-96ca-219b-cf91-0b729b95a967.png">

- [Charles側]設定が完了すると、一度だけ以下のアラートが表示されるので「Allow」を選択
<img width="777" alt="スクリーンショット 2019-11-26 14.41.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/11e18aef-0e6d-a5b0-9ff1-8a393b61ed90.png">

- Charlesにシミュレータの通信が表示されていればOK

### 3.シミュレータ
※ 画像のシミュレータのXcodeバージョンは11.1です。

- [Charles側]「Help」→「Install Charles Root Certificate in iOS Simulators」を選択して証明書をインストールする
<img width="657" alt="スクリーンショット 2019-12-02 0.52.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/34b75db7-4933-fbb9-4cd6-ee89ce23caf3.png">

- [シミュレータ側]設定から「about」を選択
<img width="200" alt="スクリーンショット 2019-12-02 0.52.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/40e2fe43-d6fa-7840-bc0f-bd035d6fd627.png">


- 「Certificate Trust Settings」を選択
<img width="200" alt="スクリーンショット 2019-12-02 0.52.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/a416cd88-facb-cc8f-cda0-752be58cd1c1.png">


- Charlesの証明書をONに変更する
<img width="200" alt="スクリーンショット 2019-12-02 0.52.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/e2bed177-b0b7-0439-e399-24aa25d7f3dd.png">

- Charlesにシミュレータの通信が表示されていればOK

# Charlesでのデバッグ方法
Charlesには色々なデバッグ機能がありますが、ここでは私が最もよく使っている2つのデバッグ機能をご紹介します。

### 1. 通信のレコーディング
- 「Proxy」 → 「Start Recording」 を選択  　
<img width="124" alt="スクリーンショット 2019-12-02 1.40.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/ef52407c-9aaf-1349-3d18-b7d784bf0bfd.png">

- もしくは画面上部の記録スタートボタンを押下する  <img width="400" alt="スクリーンショット 2019-12-02 1.40.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/f6728f60-c6ce-a901-9912-57838a28ceab.png">

- 通信が一覧で表示されるので、詳細を確認したいURLをクリック
<img width="350" alt="スクリーンショット_2019-12-01_23_18_21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/eb490885-9e4a-5641-6daa-99570d58b2ee.png">




### 2. 通信のレスポンス書き換え
- ブレイクポイントを設定する 「Proxy」→ 「Brakepoint Settings」  
<img width="124" alt="スクリーンショット 2019-11-26 15.05.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/e8d7bb14-a3d6-8e11-3242-f9ddba169484.png">

- 「Add」→ブレイクポイントを貼りたいURL(= 書き換えたいURL)を設定する
<img width="438" alt="スクリーンショット 2019-11-26 15.06.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/a36f835d-4087-3a8e-43fb-eaee8eb1baf9.png">

- ブレイクポイントが追加される
<img width="541" alt="スクリーンショット_2019-11-26_15_05_56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/37cff117-8b9a-6f45-94b9-60e08eed1ff6.png">

- ブレイクポイントを貼ったURLとの通信が走ると、通信をキャプチャするので「Edit Response」タブで通信のレスポンスを書き換え
<img width="858" alt="スクリーンショット_2019-11-26_15_05_10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539259/630dfc2e-63c9-77ec-862a-5ae94b4f7171.png">

- 編集が終わったら画面下部の「Excute」をクリックすると、編集後の通信が走る





# まとめ
プロキシアプリCharlesの導入とデバッグ方法について、簡単にご紹介しました。

公式サイトでは以下のようにCharlesが紹介されています。

`Charlesは、デバッグを迅速で信頼性が高く、高度なものにします。時間とフラストレーションを節約できます！` 

実際にこのアプリを使ってみて、デバッグの時間とフラストレーションを節約できてるなーと実感しています:innocent:
Charlesを使って快適なデバッグライフを送りましょう！




# 参考文献
- [CharlesでiOS Simulatorの通信をキャプチャする方法](https://qiita.com/ruwatana/items/93cafe2369faec4b2598)
- [CharlesでレスポンスのステータスコードをRewriteする](https://satoshin2071.github.io/charlesderesuponsunosutetasukodoworewritesuru/)