フロントエンドエンジニア必須のデバッグプロキシソフト「Charles(チャールズ)」。特に運用や調査関係にオススメのツール。

フロントエンドエンジニアの開発が加速する

最終更新日:2017年8月16日

フロントエンドエンジニアだけではなく、ディレクターさんにもオススメです。なぜかフロントエンドエンジニアでも知らない人が多いですが、感動すること間違いなしです。

デバッグプロキシソフト Charlesの説明

簡単にいうとデバッグプロキシソフトとは、webのhttp通信の間に割り込んでいろいろと思い通りにしてしまうソフトです。
公開されている他人のサイトのCSSやJavaScriptを編集して確認することができます。

ウェブサイトを表示するときには、ウェブブラウザがパソコンやスマホから外部のウェブサーバーにリクエストを投げます。
この通信がパソコンやスマホからでていくときに、出て行く先をこっちだよーっと強制できてしまうのです。

例えば、ブラウザが「https://webzin.jp/_media/js/commmon.js」のリクエストを投げたとします。
本来であれば、ドメインの名前解決をおこない、リクエストはwebの大海に飛び出していき、目当てのウェブサーバーを見つけて、「commmon.js」という目的のファイルをもらって帰ってきます。

Charlesを使うと、ブラウザが投げたリクエストはCharlesが受け取ります。そして、Charlesに設定したファイル(例えばデスクトップにあるtest.js)を、あたかもウェブサーバーまでいって取ってきたかのようにブラウザに返します。

つまり、ブラウザは何も気がつくことなく、デスクトップにあるJSファイルを本物のウェブサーバー上のファイルだと思って処理します。

公開してあるウェブページに手を触れることなく、CSSやJSの編集が出来てしまいます!
もちろん、HTMLソースであっても、同じようにローカルで作業することが出来ます。

※注意:便利すぎて、使っているのを忘れることがあります。
 自分のPCでは完璧に見えているのに、お客さんの環境ではなにも直っていない。。というウッカリが発生することがあります。
 そりゃ、自分のPCのローカルファイル読み込んでるだけですから・・

Charles公式サイト

  • * 英語サイトでソフトも英語ですが、難しくないので問題ありません。
  • * Windows版もMac版もあります。
  • * 有料ソフト(50ドル。ほかライセンス形態により異なる)ですが、トライアルは30日です。
    トライアル版の制限として、起動が少しだけ遅いことと、起動から30分で自動クローズします(再起動すればまた30分使用可能)。
    確かpaypalとクレジットカードが使えたと思います。

Charles ダウンロード・インストール

Charles公式サイト

インストールは普通におこなえます。
WindowsでもMacでもなんの問題もありませんでした。

設定・使用方法

メニュー「Tools」→「Map Local」で設定画面が出ます。

ここで設定したファイルをデバッグプロキシの対象とできます。

設定方法の例として、特定のファイルと、特定のフォルダ内のファイル全部の2種類ご紹介します。

以下の例では、「https://webzin.jp/_media/js/common.js」のファイルの通信に割り込んで、「Local path」のファイルをブラウザに返します。

特定のファイル

Protocol: https
Host: webzin.jp
Path: /_media/js/common.js
Local path: /Users/(省略 ー フルパスです)/js/common.js
      

以下の例では、「https://webzin.jp/_media/css/*」のファイルの通信に割り込んで、「Local path」のファイルをブラウザに返します。

特定のフォルダ配下全部

Protocol: https
Host: webzin.jp
Path: /_media/css/*
Local path: /Users/(省略 ー フルパスです)/_media/css
      

設定が終わったら、メニューの「Proxy」→「Mac OS X Proxy」にチェックを入れると、Macのすべての通信にCharlesが割り込みます。

FireFoxのアドオンを入れれば、Firefoxの通信だけを対象とすることができます。

ほかにも様々な機能がありますが、以上だけで充分使えます。
Fiddlerのようなプロキシキャプチャリングソフトとしても使えます。

スマホでもデバッグプロキシを使う

PCと同じLAN内にあるスマホからもまったく同じように利用できます。
スマホの通信の設定で、「HTTPプロキシ」をONにして、サーバーにCharlesが起動しているPCのローカルIP、ポートは「8888」にしてアクセスすれば、PCのほうに許可するかどうかのウィンドウがでますので、許可(allow)をしてください。

これで、iPhoneでもAndroidでも利用できます!

コメント(0)

  • ※コメント確認画面はありません。
  • ※コメント投稿後は再読み込みをしてください。
CLOSE ×