Google+ もご覧ください
ユーザーアイコン

デバッグツールレビュー

第一回 Charles - 多機能な開発用プロキシ

第一回 Charles - 多機能な開発用プロキシ

Webサイトの開発はもちろん、モバイルアプリでもネットワークを使ってデータを取得したり、逆に送信したりするのは当たり前になっています。そんな時にデータが正しく飛んでいるのか確認したり、ダミーデータを受信したいと考えることはないでしょうか。

そういったネットワーク周りのデバッグに使えるのがCharlesです。Windows、Mac OSXおよびLinux用のソフトウェアでプロキシとして動作します。50ドルのソフトウェアですが、その価値は十分にあると言えます。

今回はMac OSX版を使ってその魅力、使い方を紹介します。

優秀なデバッグプロキシCharles
優秀なデバッグプロキシCharles

立ち上げ、設定

メインウィンドウ
メインウィンドウ

Charlesを立ち上げると最初から母艦のプロキシサーバとして動作します。モバイル、タブレット開発においては不要なのでProxyMac OSX Proxyの選択状態を外します。シミュレータの場合は母艦のネットワークを使いますのでそのままで問題ありません。初期状態のMac OSX ProxyについてはProxy Settingsの画面で無効にできます。

メインウィンドウは左側が接続先のドメイン、右側にその詳細が表示されます。シーケンスビューもありますのでお好み、用途に合わせて切り替えてください。

モバイルデバイスでプロキシの設定
モバイルデバイスでプロキシの設定

次にモバイルデバイスの設定でプロキシに母艦のポート番号8888を指定します1。この場合、母艦に接続できる環境にないといけないので通常は同じLAN内でつなぐ形になると思います。

設定ができたら任意のWebサイトを開いてみましょう。最初はCharles側に接続を許可するか否かの確認ダイアログが表示されます。それを許可すれば、Charlesの画面にネットワークのログがどんどん流れていくはずです。

接続確認ダイアログ
接続確認ダイアログ

Mac OSXプロキシの有効無効はこちらで設定します。
Mac OSXプロキシの有効無効はこちらで設定します。

プロキシ設定画面。ポート番号を変更する場合はこちら。
プロキシ設定画面。ポート番号を変更する場合はこちら。

見られる情報

Charlesではネットワーク接続の情報を色々見られます。

レスポンス内容の閲覧
レスポンス内容の閲覧

  • 接続先のホスト、パス、Content-Type、プロトコルなどのヘッダー情報
  • リクエスト開始時間/終了時間、サイズ
  • リクエスト時のヘッダー、クエリーストリング、Cookie
  • レスポンス時のヘッダー、テキスト、画像サイズ
  • レスポンスのグラフ

各データはRawデータとして実際のデータを閲覧することもできます。ここまで見えれば問題の発見は容易でしょう。

JSONの場合はツリービューで確認できます
JSONの場合はツリービューで確認できます

HTMLにアクセスした後のリソースについても一覧できます
HTMLにアクセスした後のリソースについても一覧できます

さらに読み込みのネットワークグラフ
さらに読み込みのネットワークグラフ

ファイルサイズごとの一覧
ファイルサイズごとの一覧

ファイル種別ごとの一覧
ファイル種別ごとの一覧

次のページではCharlesの主な機能について紹介します。


  1. 設定画面で変更可能です。 

Debugtool

記事をリクエストする

関連記事

コメント