Proxyデバッグソフト「Charles」がすごい
最近、色々な業務でMacのProxyデバッグソフト「Charles」が大活躍しています。
主に次のようなケースで利用しています。
本番環境にあるJavaScriptやCSSを修正して欲しい
本番環境がASPだったりしてローカルで環境を生成できない際にチャールズを利用してJavaScriptファイルやCSSファイルだけローカルのファイルを参照することができます。
メニューのToolsからMap Localを選択、Map Fromにサーバー上のURLを、Map Toにローカルパスを記述します。そうするとPCからURLにアクセスする際にローカル上のファイルに差し替えられます。
URLは存在しないものでも大丈夫なので、Ajaxなどを実装するには架空のURLをローカルのファイルに向けておけば大丈夫です。
本番環境にあるJavaScriptやCSSを修正して欲しい2
Macで検証する際には上記の設定のみでいいのですが、Mac以外(たとえばIEやiPad、iPhone)で利用したい際も、各デバイスのプロキシーの向け先をCharlesをインストールしたMacに変更すれば大丈夫です(同一ネットワーク上にマシンが存在する必要はあります)。
IEではインターネットオプションの「接続タブ」から「LANの設定」を選択、プロキシサーバーにチェックをいれアドレスにCharlesをインストールしたMacのIPをポートには「8888」を入力します。
iPad、iPhoneでは設定からWi-Fiで接続しているネットワークのアローアイコンから詳細設定ができますので、下部にあるHTTPプロキシを「手動」に設定しCharlesをインストールしたMacのIPを入力ポートには「8888」を設定します。
こうすることで各デバイスがCharlesをインストールしたMac経由で通信を行うことになりCharlesの機能が利用可能になります。
通信を盗み見る
PCサイトではあまりありませんが、スマホだと認証をおこなった端末でないと表示がされなかったり、アプリにラッピングされたサイトなどがあります。そういったサイトのHTMLやJavaScript、CSSの内容を見るのは困難ですがCharlesを利用すると簡単に確認できます。Sequence上でCharlesが行った通信をすべてログとして記録できますので、上記の設定でiPhoneなどをCharles経由で通信するようにしておけばそれだけで、サイトやアプリがおこなってる通信を傍聴できます。(ログが溜まり過ぎると落ちてしまうので、定期的にゴミ箱アイコンを押してクリアするか、レコードアイコンからログの記録を中止しまょう)
回線速度のシュミレーション
WiFiではすばやく表示できるが、3Gならどうなるか・・・というのを簡単にシミュレーションできます。メニューのProxyからThrottle Settingを選択Throttle Presetを3GにすることでCharlesを介した通信が1024kbpsに制限されます。
UAの偽装
SafariやGoogle Chromeにはありますが、iOSシミュレーターにはUAの偽装機能がありません。UAでCharlesで偽装してしまいましょう。(web viewを前提としたサイト作成の場合UA制限を受けることが多いのです)
トップメニューのToolsからRewriteを選択、Enable Rewriteにチェックを入れましょう。Locationsにhogehoge.com/*を追加、RulesはTypeはModify Headerを選択、Whereは Requestにチェックを入れて、Match NameにUser-Agent、Replace NameにUser-Agentを入力してReplace Valueに偽装後のUAを記述します。
$50ぐらいするソフトですが、試用版がありますので一度試してみてください。(試用版は30分毎に自動で落ちます。)
参考
Charles Web Debugging Proxy の使い方 | gaspanik weblog
フロントエンドの開発効率が3倍に...！？デバッギングプロキシCharlesの使い方 :: 5509
本番環境でテスト？！ Charlesを使った簡単サイト修正 | CSS-EBLOG
0-9, Fiddler、CharlesでのUA差し替えの方法
![Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)](https://images-na.ssl-images-amazon.com/images/P/4048913913.09._OU09_SCMZZZZZZZ_.jpg)
