他のブログでもたまに取り上げられているので、わざわざ紹介しなくても良いかなと思っていたのですがものすごく便利なのでやっぱり紹介したいアプリ。それがプロキシデバッグアプリ「Charles」!「私の救世主や〜!!!」というぐらい便利に使えるときがあります。
プロキシデバッグ!Charlesって何?
Charlesを使うことで、Webの通信のデバッグを行うことができます。いろいろなデバッグができるのですが、本記事では「マップローカル」という機能を紹介します。この機能を使うと、指定したファイルだけローカルのファイルを参照させることが出来るようになります。つまり、本番環境でJSやCSSだけローカルのテストファイルに差し替えてデバッグができるようになるということです。
テスト環境が無かったり、本番環境とテスト環境が違う動作をしてしまう場合には有効なデバッグ方法だと思います。ちなみに、こちらのCharlesは有料アプリですが、購入前でもお試しすることができます。お試し版は、毎回30分間のみしか起動しません。
使い方
Macの場合の使い方です。Charlesを起動し、ツールバーの「Tool」から「Map Local」へと進みます。すると、下記の画面が表示されます。
「Add」ボタンからローカルファイルを参照するURLを設定します。「Port」や「Query」は空の状態でも大丈夫です。そして「OK」を押して確定します。
もう一度「OK」を押します。
最後にツールバーの「Proxy」から「Mac OS X Proxy」にチェックを入れます。このチェックを入れ忘れると、設定が反映されないので忘れないようにしてください。
設定が完了したら、マップローカルで設定したURLのファイルがローカルのファイルを読むようになるのでブラウザでデバッグしていきます。簡単で便利ですので、ぜひお試しを!
Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy
Charles Web Debugging Proxy - Official Site
※Win/Mac版があります。
価格
1-4 User LicensesUS$50 / license
5+ User LicensesUS$40 / license (20% discount)
10+ User LicensesUS$30 / license (40% discount)
※お試しバージョンもあり。(1回30分起動の制限付き)
U-NOTEをフォローしておすすめ記事を購読しよう