Charlesの初期設定

いつも使いたいときに設定方法を忘れてしまうので記録しておく。
今回はiOSアプリのネットワークのデバッグで利用した。React Native Devtoolが安定しない為…。

Charlesをダウンロード&インストール

Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy

v5系が最新だが、自分のMacでは起動中にJavaのエラーが出たのでv4系をインストールした。

インストール後にこのようなダイアログが表示されたら、

Grant Privilegesを実行する。

Macに証明書をインストールする

メニューバーの Help > SSL Proxying > Install Charles Root Certificate を選択する。

証明書をダブルクリックして「この証明書を使用するとき: 常に信頼する」を選択し、閉じる。

SSL Proxyingの設定

ほとんどの通信はSSL暗号化されているので、この設定をしないとリクエストやレスポンスの中身を見ることができない。

メニューバーから Proxy > SSL Proxying Settings… を選択。

ワイルドカードですべてのSSL通信をProxyする設定にする。

通信をチェックしてみる

このようにMacのブラウジングの通信を見ることができた。

ログを見やすくする設定

メニューバーから View > Sequence と選択する。通信順に見ることができる。
次に、Charles > Preferences に進み、Viewersタブを選択。Combine request and responseのチェックを外し、Timeをmillisecondsにする。

このような見え方になる。