この記事はチームラボエンジニアリングアドベントカレンダー6日目の記事です。
はじめに
iOSアプリ開発でCharlesを使ってみたところ、通信まわりのデバッグがたいへん快適になりました！
モバイルだけでなく、Web開発でも通信周りのデバッグでCharlesは威力を発揮しそうです。
導入も簡単で、10分あれば設定が完了します。
この記事では、以下についてまとめています。
- Charlesの導入方法
- 通信をキャプチャしたい端末側の設定(PC, iOS実機, iOSシミュレータ)
- Charlesでのデバッグ方法
とにかく、みんなCharles使おうぜ！という布教記事です
Charlesについて
公式サイト
https://www.charlesproxy.com/
モバイル開発・Web開発かかわらず、こんなことでお困りではないでしょうか？
- サーバがメンテナンス中で通信まわりの実装の確認ができない
- 開発用のモックサーバを書き換えに行くのが面倒
- 正しい順番で複数のAPIを呼べているか不安…
プロキシアプリCharlesを使えば、自分のPC上で通信をキャプチャ＆編集できるので、これらの悩みが一気に解決します！
有料アプリ(50US$)ですが、30日間は無料で利用できます。
ただし5分に1回ぐらい購入してねアラートが出る、かつ30分でアプリが強制終了します…
イラっとしたら購入しましょう 
Charlesでできること
- 通信のモニタリングがリアルタイムできる！(ブレイクポイントも置ける)
- 通信のリクエスト・レスポンスを自由に書き換えられる！
- 低速の通信状況をシミュレータできる！
- リバースプロキシを試せる！
…などなど通信まわりのハンドリングが自由自在にできます。
激アツです
Charlesの導入方法
バージョン: 4.5.4 (2019/11/28時点での最新版)
1. Charlesのダウンロード
公式サイトのダウンロードページからDLする。(Mac版は赤枠内)
Charlsを立ち上げる。
2. プロキシの設定
プロキシの設定を行う
画像のように設定されていればOK
3. 証明書の設定
証明書の設定を行う
キーチェーンアクセスが表示されるので、
Charles Proxy CAを探す
「常に信頼」に変更する
4. SSLプロキシの設定
SSLプロキシの設定を行う
「Enable SSL Proxying」にチェックを入れ、「Add」をクリック
Hostにワイルドカード「*」を設定
これで下準備は完了です！簡単！
Charlesで通信をキャプチャしたい端末側の設定
1. ローカルPC
「Proxy」 → 「macOS Proxy」を選択
PCの通信が表示されればOK
2. iOSの実機
※ 画像のOSのバージョンは12.3.1ですが、13.2.2も同様に設定できました。
プロキシの設定
実機の通信をキャプチャーするためには、Charlesを起動させているPCと同じIPアドレスで接続する必要があります。
[Charles側]以下を選択して、表示されたローカルIPアドレスをメモしておく
[実機側]Charlesを起動させているPCと同じwifiに接続して、接続先の詳細から「プロキシを構成」を選択
「手動」を選択して先ほどメモしたIPアドレスを入力
証明書の設定
[実機側]PC側でCharlesを起動した状態で、Safariから http://www.charlesproxy.com/getssl を開き、「許可」を選択
「設定」を開いて、インストールを完了させる
[Charles側]設定が完了すると、一度だけ以下のアラートが表示されるので「Allow」を選択
Charlesにシミュレータの通信が表示されていればOK
3.シミュレータ
※ 画像のシミュレータのXcodeバージョンは11.1です。
[Charles側]「Help」→「Install Charles Root Certificate in iOS Simulators」を選択して証明書をインストールする
[シミュレータ側]設定から「about」を選択
「Certificate Trust Settings」を選択
Charlesの証明書をONに変更する
Charlesにシミュレータの通信が表示されていればOK
Charlesでのデバッグ方法
Charlesには色々なデバッグ機能がありますが、ここでは私が最もよく使っている2つのデバッグ機能をご紹介します。
1. 通信のレコーディング
「Proxy」 → 「Start Recording」 を選択
もしくは画面上部の記録スタートボタンを押下する
通信が一覧で表示されるので、詳細を確認したいURLをクリック
2. 通信のレスポンス書き換え
ブレイクポイントを設定する 「Proxy」→ 「Brakepoint Settings」
「Add」→ブレイクポイントを貼りたいURL(= 書き換えたいURL)を設定する
ブレイクポイントが追加される
ブレイクポイントを貼ったURLとの通信が走ると、通信をキャプチャするので「Edit Response」タブで通信のレスポンスを書き換え
編集が終わったら画面下部の「Excute」をクリックすると、編集後の通信が走る
まとめ
プロキシアプリCharlesの導入とデバッグ方法について、簡単にご紹介しました。
公式サイトでは以下のようにCharlesが紹介されています。
Charlesは、デバッグを迅速で信頼性が高く、高度なものにします。時間とフラストレーションを節約できます！
実際にこのアプリを使ってみて、デバッグの時間とフラストレーションを節約できてるなーと実感しています
Charlesを使って快適なデバッグライフを送りましょう！