我々が開発するアプリの多くが、インターネット経由でAPIにアクセスします。macOS上で実行されるCharles Proxyは、iOSからの HTTP と HTTPS のトラフィックをキャプチャできるため、障害をデバッグしたり、パフォーマンスを測定することができます。try!Swift Tokyoでは、Charles Proxy の作者である Karl が Charles for iOS という新しく強力なアプローチを発表します。これにより、あなたのiOSデバイスでトラフィックを直接キャプチャすることが可能となります。
追記 (2018/03/28)
トークの際には審査中だったCharles Proxy for iOS がリリースされました
Charles Proxy is now available on iOS. Read the release announcement:https://t.co/xJheT53UQv
— Charles Proxy (@charlesproxy) 2018年3月28日
Or visit the App Store:https://t.co/YA4EZbvRHA
iOSでCharlesを導入する
ニュージーランド出身です。5年間日本語勉強しましたが、殆ど覚えていません。ここかあらは同時通訳です。
1985年から勉強しました。かわいいロボットがたくさん出てきました。デバッグも学びました。
デバッグコンセプトは3ページ目に現れます。 デバッガはなかった、マルチタスクに対応していなかったので、別コンソールで表示するようなことはできない。
自分のコードがどうなっているか簡単にはみられなかった。直感でやる必要があった
オークランド大学で働くようになって
Webmediaと言う会社で働いた
スティーブ・ジョブズにとどめを刺されたFlashで開発していました。
アニメーションを作れた素晴らしいツールでした。でも開発者にとっては大変でした。マウスでプログラミングをし、メニューからコマンドを選んだが、デバッギングができない。
何を作ったか
まずフラッシュをインストールしなきゃ、、冗談です
今も動きます。３Dがでてきます。
これらはすべてシンプルなHTTPリクエストをフラッシュの中で使っていました。
ネットワーク関係のことがうまくいかなかった時、何が行けないのか、コードが悪いのか、なにかリクエストが間違っているのか。あるいはサーバー側がリクエストハンドリングに失敗したのか、分からない。それか予期せぬ物が返ってきてハンドリングできないのか。よくわからなかったわけです。
リクエストで問題が起きるポイントはたくさんあります。探すのは苦労します。
一つ一つ問題を潰していく
ソフトウェア開発者なら同じ苦労をしたと思います。
そこで、この間の送受信されるデータの中身をみられるHTTPプロキシーサーバーを作ろうと思ったわけです。
このような形でCharlesが登場しました
早速何時間も節約できました。
このロゴのために撮った写真がこれです。
18年たちました
目的は今も同じです。問題を調査し、トラフィックを有効なものにする
先程のサイトに戻りましょう
表示されないものがあります
Charlesで通信を覗きます
lengthが0です。表示できるものを返していないわけです
レスポンスを返したか？がNoだということがわかります
こういう形でCharlesは機能します。
Flashのプロジェクトのために作りました
いまはライセンスを販売しています。WebでAjaxが使われるようになってみなさんCharlesを使い始めるようになりました。
2008年にはアプリの時代になりました。我々のアプリの多くはAPIを使っています。何がサーバーと送受信されたか 見る必要が出てきた。デバッギングに欠かせないわけです。
しかし現在のプロセスはちょっとめんどくさいです。PCで実行し、Wi-Fiネットワーク設定を行いプロキシとして使うようにします。
でもこれはちょっとめんどくさいです。
プロキシ設定したのを忘れて通信できなくなったり
iOS上でCharlesを実行したかった。
CHARLIEです。
Javaで書かれていて移植が必要。
そしてObjective-Cで書いていたので初のSwiftプロジェクトにしました
Swiftt2から初めて何度もマイグレートしてきました。
大変だけどこの問題を解決して、Swiftが大好きなんです。
取得したものをデスクトップに送ることができます。
シンプルですが、より機能を追加していきたいと思っています。
NetworkExtensionFrameworkを使っていてVPNコネクションを作る
本体はデバイスのバックグランドで動いている。プライバシーの問題はありません。
アプリを操作します
Charlesに戻るとリクエスト、レスポンスを確認することができます。
JSONも覗けます
デバイスで簡単にデコードできるしPCに共有することもできるExtensionを使って簡単に共有できる
バグをデバイス上で検証できる。どこでもレポーティングを送ることができる。パフォーマンスの計測もできる。
CharlesはWi-Fiでしか計測できませんでしたが、デバイスで動くようになったことでモバイル環境の様子を観測することができるようになりました。
通常のLatency50程度よりかなり遅延していることがわかります。
150msがニュージーランドとUtaのサーバー間で起きていることがわかります。
Charlesをディスクトップで表示し、タイムラインで見ることができます。
どこで時間がかかっているか分かる、並列化できるところが分かる。
前のリクエストに依存して残りが実行されていることが分かる
順不同で呼び出せるようにするか呼び出しを早くするかなどを検討できる。
サーバー距離と関係無く遅延は発生する。計測可視化診断することはこうしたデータがなければ困難。
https通信はTLS暗号化されているのでそのままではプロキシーを通して内容を覗くことは出来ません。
Charles Proxyの証明書をインストールし、それを信頼することで、https通信のデータも覗けるようになります。
Storeに出せることを祈っています
