スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。Tweetこんにちは、@yoheiMuneです。今日は、プロキシを使ってスマホの通信内容を確認する方法について、ブログを書きたいと思います。http://flic.kr/p/7Sd7hcこの記事で伝えたいことスマホ向けWebアプリケーションのテストにおいて不具合が発生した場合に、スマホ実機にてデバッグする方法の1つを解説します。スマホとサーバー間の通信内容を確認する、という内容です。スマホ実機でのデバッグはなかなか大変ですが、そのデバッグの1手段として使ってもらえれば幸いです。Macのプロキシを設定するまずはMacBookにインストールされているApacheに、プロキシをインストールします。Apacheでプロキシが使えるかを確認します。ここらへんのモジュールロードが、コメントアウトされていないかを確認します。最初から大丈夫なはず。以下の記述がコメントアウトされていないかを確認します。最初から大丈夫なはず。/private/etc/apache2/other/*.conf続いて、Proxyの設定ファイルを作成します。</Proxy></IfModule>上記の設定の場合、「192.168.1.*」のIPアドレスからの処理を受け付けます。Apacheを再起動(起動していない場合には、起動)します。startこれで、以下のURLを叩いて、Apacheの画面が表示されれば、起動成功です。http://localhost表示されない場合には、上記で記載した設定ファイル(または別の箇所)が壊れているので、頑張って修正します。最後に、Mac本体のIPアドレスを確認します。192.168.1.15複数のネットワークに繋いでいるといっぱい出てきますが、今回は「192.168.1.2」がMac本体のIPアドレスとします。同じLAN上のiPhoneやAndroidから、(ネットワークが他機種との接続を禁止していない限り)、以下のURLでMacのApacheの画面を表示することができます。http://192.168.1.2/これでプロキシの設定は以上です。iPhoneからMacのプロキシ経由で通信を行うまずはiPhoneについて扱います。Webインスペクタとかで詳しく通信内容も確認できますが、一応説明します。iPhoneでProxyを設定するためには、以下の手順で行います。PROXYの欄に、プロキシサーバーの情報を入力するプロキシサーバーの情報は、以下を入力します。Server:192.168.1.2Port:80Authentication:OFFこの設定でProxyの設定が完了です。Safariで、ネットワークエラーとかなくブラウジングできれば、設定成功です。Android4系でプロキシを設定するAndroid4系では、プロキシの設定を行うことができます。以下の手順で設定します。設定アプリを開くWifi設定を開くMacと同じネットワークと同じWifiに接続する接続したWifiを長押し(ロングタップ)する詳細設定ダイアログが出るので、「ネットワーク設定変更」を選ぶ「拡張オプションを表示」をONにして、プロキシ設定を入力するiPhoneと同様に、プロキシサーバーの情報は、以下を入力します。Server:192.168.1.2Port:80Authentication:OFFこの設定でProxyの設定が完了です。ブラウザで任意のページが見れれば、設定は成功です。スマホ端末の通信内容を見るそれでは、通信内容の確認をしてみましょう。Apacheのアクセスログを見ることで、リクエストを把握することができます。-こんな感じでIPアドレスと、通信先やそのHTTPステータスを確認することができます。ログのフォーマットや出力内容を変える場合には、httpd.confなどの設定を変更します。AdminWebなどを確認してみてください。参考URLこのデバッグ手段を身に付けるために、以下の記事を参照しました。貴重で有用な記事、本当にありがとうございます。LANCARD.LAB|ランカードコムのスタッフブログ今回の記事では、主にこの記事を参考にさせて頂きました。proxyを使って人様のアクセスをログするこの記事では、Apacheのプロキシ設定について、ポート番号の設定や、ログファイルの設定も書かれています。実践的に使うなら、こちらも読むと良いと思います。AdminWebApacheのログフォーマットについて、初めて学んだのがこの記事でした。分かりやすくすごく良い記事です。最後に以上、Macを使ったスマホ実機の通信状況の把握を行う方法でした。今回私は、この方法を使って、なぜかロード出来ない音声ファイルについて通信状況を把握するようなデバッグをしてました。結果として、サーバーが特定の状況の時にのみ403を返却する事が分かり、なんとか解決しそうな次第です。スマホ実機でのデバッグは大変ですが、少しずつ手数を増やしていきたいところです。最後までご覧頂きましてありがとうございました。フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。フロントエンドの入社試験99問!難しいですよ〜w。スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。Chrome36βが出た。Imports、Object.observe、他。ご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。