やりたいこと
iOS デバイス (iPhone とか iPad とか）のアプリやブラウザーの通信内容を、F12 ツールみたいにキャプチャーしてデバッグしたい時って、ありますよね？
よろしいならば Fiddler だ
Web Debugging Proxy の大御所、Fiddler ならそれ出来ます！
たぶん。たまにアプリによっては上手くいかないこともあるけど…。
（超機能沢山なのに、割と知られてなくて悔しい。。。）
手順
マシンの準備
まずはキャプチャー対象の iOS デバイスがつながってるのと同じローカルネットワークに Windows PC を一台追加。
Fiddler とプラグインのインストール
Fiddler 本体 はこちらから。
（Windows 版以外に、最近 Mac OS 用と Linux 用が増えてるんですけど、使ったことないのでスミマセン！）
あと、このページから "CertMaker for iOS and Android" もインストールします。
HTTPS 通信の内容まで Fiddler でキャプチャーする関係上、Fiddler 側で一旦暗号化を解除しちゃうので、デバイス側には Fiddler - デバイス間の通信を暗号化するための証明書が必要になります。その証明書をデバイスにインストールするためのサイトを表示したりするプラグインがこれです。
Fiddler 側の設定
起動したら、上部のメニューから [Tools] - [Options] を開きます。
[HTTPS] タブで、以下のスクリーンショットと同じようにチェックを入れていきます。
ここで、"DO_NOT_TRUST_FIDDLER_ROOT" という名前のルート証明書をインストールすることに対する警告が出るかもしれませんが、HTTPS 通信を Fiddler で中身まで含めてキャプチャーするには必須の設定です。そういう証明書がインストールされてるぞ、という認識をしたうえで進めてください。
（もし不要になって、セキュリティの不安があるようでしたら、該当する証明書を削除してください）
続いて、[Connections] タブも同じように以下のスクリーンショットのように設定します。
ここのチェックを入れることで、Fiddler に別のクライアントから、プロキシとして接続できるようになります。
ここらで、一旦 Fiddler を再起動します。
あと、環境によっては、Fiddler に対する着発信の接続を許可する Firewall ルールを追加する必要があるかもしれません。
Fiddler 側での作業の仕上げとしては、Fiddler の稼働しているマシンの IP アドレスを確認します。
ipconfig とかで確認してもいいですし、Fiddler の画面の右上の "Online" って書いてあるところをマウスでホバーしても IP アドレスが表示されます。
iOS デバイス側での作業
ここまでやったら iOS デバイス側の設定です。
まずはブラウザで、Fiddler の証明書取得画面にアクセスしましょう。
Safari ブラウザを開いて、アドレスバーに http://<さっき調べた Fiddler のマシンの IP アドレス>:8888 と入力してアクセスします。
私の環境では、192.168.1.15 だったのでこんな感じ。
これが開いたってことは、Fiddler は外部からの接続を受け付けています。あとは iOS 側設定だけでプロキシとして使えることになります。
次に、この画面の一番下の "You can download FiddlerRoot certificate" のリンクから、Fiddler と iOS の間の通信を暗号化するためのルート証明書を含むプロファイルをダウンロードしましょう。
手順はこんな感じ。
* 「この Web サイトは構成プロファイルをダウンロードしようとしています。」というメッセージが出たら「許可」
* 「プロファイルがダウンロードされました」という画面を確認
* iOS デバイスの [設定] アプリを開き [一般] - [プロファイルとデバイス管理] の画面を開く
* 「ダウンロード済みプロファイル」に "DO_NOT_TRUST_FiddlerRoot" というプロファイルが入っているので、クリックして表示
* 画面右上の「インストール」をクリックし、プロファイルをインストール（この目的で使う限りと理解したうえでこの証明書を入れるのであれば特に問題は無いと思いますが、自己責任にて！）
* 証明書が「検証済み」になったら証明書のインストールは完了です
次に、証明書の信頼設定を変更します。
[設定] アプリから [一般] - [情報] - [証明書信頼設定] で開いた画面から、"DO_NOT_TRUST_FiddlerRoot" の横にあるトグルをオンにすればこの手順は完了です。
最後に、iOS デバイスの Wifi 設定から、プロキシを追加しましょう。
Wifi の設定画面を開き、繋がっている Wifi のネットワーク名の右端の、丸に囲まれた i のアイコンをタップしましょう。
プロキシ設定を手動にして、アドレスを Fiddler が動いている PC の IP アドレス、ポート番号を 8888 に設定して保存すると、設定は完了です！
完成！
iOS 側でブラウザーやアプリの通信を行うと、じゃんじゃん Fiddler 側に通信内容がキャプチャーされてくることを確認できると思います。HTTPS 通信の内容についても Decrypt することで、Fiddler 上で確認することが可能です。
あとかたづけ
トラフィックをキャプチャーする必要がなくなったら以下の設定を削除する。
* iOS デバイスの [設定] アプリから、"DO_NOT_TRUST_FiddlerRoot" プロファイルを削除
* Wifi のプロファイルのプロキシ設定を「オフ」
まとめ
で、何ができるの？
iOS アプリのバックエンドの通信がなにかおかしい、とか、自分で作ったサイトの iOS 版の挙動がちょっと想定と違ってて、どんなデータが送られてきてるのか確認したい、だとか、そういった時に、iOS から送出される HTTP / HTTPS 通信を丸ごとキャプチャーしてデバッグすることが可能です。
その他、実は「指定したファイルだけ差し替える」とか、「通信回線の遅延をエミュレートする」とか、「応答本文内で正規表現にマッチする部分を差し替える」とか、割とこまごまと通信を途中で書き換えることも可能だったりします。JS や CSS のファイルのバージョン不整合で画面の描画や処理がおかしくなってるかも…ってときに、疑いのあるファイルだけを旧バージョンに Fiddler 側で差し替える、なんて芸当も可能です。
つまり、HTTP / HTTPS で通信するあらゆるアプリの通信を途中で捕まえて中身を見たりちょこっと書き換えたりといったアプローチで、デバッグを容易にしうる機能が色々と揃ってるのです。
是非、Fiddler を活用して、楽しいデバッグライフを！
今後の続き物の記事で書きたいこと
いまの設定のままだと、Fiddler には、Fiddler をホストしている PC の通信内容と、iOS デバイスの通信内容がごちゃ混ぜにキャプチャされて、ちょっと見通しが悪いですよね？
これについては、Fiddler Script という、Fiddler 内の自動レスポンスや本文の内容書き換え、通信遅延のエミュレートの内容を記述できるスクリプトを上手く使うことで、Fiddler がホストされているマシン以外からの通信のみキャプチャするように挙動を変えることが可能なのですが、続きで書くと話は長くなってしまうので、今日はここらへんで。気が向いたら第二段で書きます。
参考ドキュメント
Capture Traffic from iOS Device
Configure Fiddler to Decrypt HTTPS Traffic
Configure Windows Client to trust Fiddler Root Certificate