Proxyデバッグソフト「Charles」がすごい

Proxyデバッグソフト「Charles」がすごい

最近、色々な業務でMacのProxyデバッグソフト「Charles」が大活躍しています。

主に次のようなケースで利用しています。

本番環境にあるJavaScriptやCSSを修正して欲しい

本番環境がASPだったりしてローカルで環境を生成できない際にチャールズを利用してJavaScriptファイルやCSSファイルだけローカルのファイルを参照することができます。

メニューのToolsからMap Localを選択、Map Fromにサーバー上のURLを、Map Toにローカルパスを記述します。そうするとPCからURLにアクセスする際にローカル上のファイルに差し替えられます。

本番環境にあるJSを修正して欲しい

URLは存在しないものでも大丈夫なので、Ajaxなどを実装するには架空のURLをローカルのファイルに向けておけば大丈夫です。

本番環境にあるJavaScriptやCSSを修正して欲しい2

Macで検証する際には上記の設定のみでいいのですが、Mac以外(たとえばIEやiPad、iPhone)で利用したい際も、各デバイスのプロキシーの向け先をCharlesをインストールしたMacに変更すれば大丈夫です(同一ネットワーク上にマシンが存在する必要はあります)。

IEではインターネットオプションの「接続タブ」から「LANの設定」を選択、プロキシサーバーにチェックをいれアドレスにCharlesをインストールしたMacのIPをポートには「8888」を入力します。

IEでのプロキシー設定

iPad、iPhoneでは設定からWi-Fiで接続しているネットワークのアローアイコンから詳細設定ができますので、下部にあるHTTPプロキシを「手動」に設定しCharlesをインストールしたMacのIPを入力ポートには「8888」を設定します。

iPhone,iPadの設定

こうすることで各デバイスが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を記述します。

UAの偽装

$50ぐらいするソフトですが、試用版がありますので一度試してみてください。(試用版は30分毎に自動で落ちます。)

参考

Charles Web Debugging Proxy の使い方 | gaspanik weblog
フロントエンドの開発効率が3倍に...!?デバッギングプロキシCharlesの使い方 :: 5509
本番環境でテスト?! Charlesを使った簡単サイト修正 | CSS-EBLOG
0-9, Fiddler、CharlesでのUA差し替えの方法

スポンサードリンク

«Stylus入門 | メイン | Re:美しいプログラムを書く(業務用Webアプリケーション保守編)»

このエントリーのトラックバックURL
https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/677
コメントを投稿