スマートフォンの通信をプロキシする
Charlesの最も重宝する使い方の一つがスマートフォンの通信のプロキシです。スマートフォン側の設定を整えることで簡単にプロキシが可能です。
スマートフォン単体でのデバッグには限界があります。またエミュレータでは見つからないバグも多くあります。そういった時にやはり実機を使ったデバッグは非常に重要ですが、Web上で動くアプリケーション、特にJavaScriptアプリケーションのデバッグは昔から厄介な仕事の一つでした。alertデバッグから始まり今ではweinreなどの便利なツールや、ブラウザに搭載されるデベロッパーツールも非常に強力なものになっていますが、このCharlesのデバッグ手法はそれらと組み合わせて使うこともできます。
このプロキシは普通のWebブラウザだけでなく、もちろんアプリ内WebViewでも有効です。
PC側の準備
Wi-Fiネットワークなど、スマートフォンと同じネットワークに繋げるローカルな環境を用意しましょう。スマートフォンからPCのIPアドレスが見える必要があります。
iOSの設定
まずはiOSでの設定です。
設定からWi-Fiの項目を開きます。Wi-Fiは有効にしてください。接続先のネットワーク右端の(i)マークを選択し、詳細設定に入ります。
下部にあるHTTPプロキシを手動で設定にし、サーバにPCのIPアドレスを、ポートにCharlesが監視するポート番号を指定します。
Androidの設定
次にAndroidでの設定です。
設定からWi-Fiの項目を開きます。接続先のネットワークを長押ししてポップアップを出し、[ネットワークを変更]をタップします。
[詳細オプションを表示]にチェックを入れ、[プロキシ設定]を手動
にします。[プロキシホスト名]の項目にPCのIPアドレス、[プロキシポート]にCharlesが監視するポート番号を指定します。
プロキシ設定がない端末対策
Androidには古いバージョンでプロキシの設定を行えない端末が存在します。その場合上述の設定ができません。
Firefox for Mobileを使う
アドレスバーにabout:config
と入力します。
このようなコンフィグモードのページに切り替わります。
[network.proxy.http]と[network.proxy.http_port]の項目を探してそれぞれIPアドレスとポート番号を入力します。続いて[network.proxy.type]の項目を探し、値を1
にします。この状態でセーブし、Firefoxを再起動するとプロキシの設定が適用されます。
Opera Mobile Classicを使う
OperaもFirefoxと同じようにopera:config
とアドレスバーに打ちこむことでコンフィグのページを表示できます。
[Proxy]のカテゴリに移動し、[HTTP server]の項目にIPアドレスとポート番号をIPアドレス:ポート番号
の形で入力します。
この状態でさらに[Use HTTP]のチェックボックスにチェックを入れ、最後に保存を押します。
これでOperaでもプロキシの設定が適用されます。
どちらのブラウザもシェアとしては低いため、あまり積極的に使える方法ではありませんが、いざという時に覚えておくと助かる時があるかもしれません。
Windows Phoneの設定
Windows Phoneは端末自体のシェアも高くありませんが、同じようにプロキシの設定を行うことができます。もちろんiOS、Androidと同様にアプリ内WebViewでも有効です。
設定からWi-Fiの項目を選択します。
接続先のネットワークを選択し詳細設定に入ります。
[サーバー/URL]にPCのIPアドレス、[ポート]にCharlesが起動するポート番号を指定します。
ここまでの設定を行うことで前述のHTTP通信のモニタ、書き換えを行うことができます。これだけでも非常に便利ですが、次に説明するローカルマッピングはスマートフォンアプリ開発のさらに強力なデバッグ手法です。ちなみにスマートフォンからPCへの接続時、PC側で接続してくるIPを許可するかのダイアログが出る場合がありますので、その場合はIPアドレスを確認の上許可をしてください。