HTTP通信をモニタする
Charlesは設定したポートを通るHTTP(S)の通信をモニタすることができます。Webアプリケーションを開発する上で可視化しづらい通信のやり取りを一つ一つ監視できます。もちろん自分が開発するアプリだけでなく、自分が普段利用しているサービスがどういった通信を行っているのかといった確認にも使えます。Web上のツールだったりゲームだったり、ログを見るだけでも楽しいですね。
試しにCharlesを起動した状態で任意のWebページを開いてみましょう。多くのファイルを読み込んでいる様子が分かります。
Charlesは時系列でログを並べるだけでなく、ドメイン単位でグループ化し、ツリー表示で閲覧できるため特定のWebページの通信を監視するのに適しています。ログを選択すると右側のビューに詳細な内容を表示します。
多彩なビジュアライザ
この詳細ビューは送受信されるデータの形式に応じたビジュアライザでデータを確認することができます。
各種シンタックスハイライト
HTML, JavaScript, CSS, JSONなどはシンタックスハイライト表示に対応しています。JSONの場合はツリー表示にも対応しています。
Query String
レスポンスだけでなく、もちろんリクエストデータも閲覧可能です。
HTTP通信を書き換える
Charlesの便利な機能の一つにHTTP通信のリライト機能があります。この機能を使うことで同じリクエストを何度でも、そして一部の値を書き換えて再送信するということが何度でもできます。この機能はデバッグに非常に役立ちます。例えばJavaScriptでAjax通信のテストする場合に有用でしょう。
再リクエストを行う
任意のログを選択してコンテキストメニューを開くと[Repeat]という項目があります。これを選択することで同じ内容(Rawデータ)を再送信できます。
リクエストの中身を書き換える
単純な再リクエストだけでなく、内容を変えることも可能です。任意のログを選択してコンテキストメニューを表示し、[Edit]という項目を選択します。すると詳細ビュー側がリクエストの編集画面に切り替わります。
Query Stringを書き換える
[Query String]のタブを選択します。新しい値の追加・削除はもちろん、任意の値を変更できます。
Headersを書き換える
[Headers]のタブを選択します。Query Stringなどのように専用のエディタになっているわけではありませんが、各項目の追加・修正・削除を行えます。
もちろんRawデータそのものを直接書き換えることもできますので、まったく違った内容に置き換えることもできてしまいます。使い方によっては非常に強力な機能です。