113
110

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

俺的フロントエンドエンジニア三種の神器に認定したCharlesについて 〜その1〜 Charlesの素敵なところ

Last updated at Posted at 2014-10-30

個人的にフロントエンドエンジニア三種の神器の一つとして認定した。

特にハイブリッドアプリ(いわゆるガワネイティヴ)のデバッグですごく重宝している。

でもちょっと癖のあるUIで取っ付きにところもあり、こいつの魅力を伝えることを妨げる一因にもなっているように思える。

ということで、フロントエンジニア目線で何回かに分けてCharlesの使い方を紹介していこうと思う。

もちろんフロントエンジニアじゃなくても便利に使えるツールなので知らなければ何が出来るかくらいはちょっと見て欲しい。

Charlesの素敵なところ

charles.png

SSLに対応したMITM(Man In The Middle)プロキシサーバーであるところ

ブラウザなどのクライアントとインターネットの中間者となり、その間に流れてくるデータ、つまりHTTPリクエスト、レスポンスの内容を記録したり変更することが出来る。

また、CAとしての役割も果たすことができるためSSLの通信内容も復号化して上記と同様のことが出来る。

この機能がこのツールの土台になっている。

同様のツールとしてはmitmproxyというCLIベースのものもあるので、この手のことがやりたくてGUIなんかいらなくてお金も払いたくない人はこっち使ったほうがいいかも。

リクエストを他のリモートホストへのリクエストにすげ替えることができる

例えば、本番のアプリケーションをターゲットにして画像やJavascriptなどのWebアセットだけローカルマシンのWebサーバーを見るようにするようなマッピング設定ができる。

サーバーへのデプロイをしないで気軽にWebリソースをすげ替えられるのは至極便利。

レスポンスをローカルマシンのデータにすげ替えることができる

特定のレスポンスをローカルマシンのファイルにマッピングすることができる。

これもサーバーへのデプロイをしないで気軽にWebリソースをすげ替えられるのは至極便利。

リクエストやレスポンス単位にブレークポイントを設定できる

プログラムのデバッグ時にはブレークポイント設定してそこまでの処理を一時的にストップさせて、その時点の変数の状態などをモニタリングしたり、時には書き換えたりすると思う。

同様のことがHTTPのリクエスト、レスポンスの単位で出来る。

例えばヘッダー情報を書き換えたりとかBodyを書き換えたりだとかがリアルタイムに出来る。

やりとりした通信をセッション情報として保存したり復元できる

保存したデータはテキストベースのファイルとして書き出せるので他のメンバと共有したりできるので便利。

また、セッション情報があればアプリケーションのクライアントが無くてもCharlesさえあれば同じリクエストを再送信できるのでやっぱり便利。

通信帯域幅のシミュレーション

通信帯域を絞ったりできる。

3Gなどの環境を想定して動作確認をする場合重宝する。

モバイル端末をクライアントにCharlesを使う場合はWifiネットワークを経由することが前提になるため、ユーザーの通信環境と乖離した通信環境でテストしてしまいがちなので、この機能は結構重要。

ChromeのCanary版でも同様の機能あり。

マルチプラットフォーム対応

Mac版、Windows版、Linux版がある。

Windowsにはfiddlerとかあるが、この手ツールを使いこなすにはそれなりの学習コストを支払うことになるのでどこでも使えるのは嬉しい。

特に流れ者エンジニアにとっては重要なところ。

Webインターフェース

Charlesを起動するとhttp://control.charles/ でWebインタフェースにアクセス出来る。

モバイル端末でテストするとき端末側である程度Charlesを制御できるので便利。

また、これはCharlesの制御がWeb APIとして公開されていることも意味しているので、作業の自動化や何か面白い事ができそう。

お手軽な負荷テストができる

JMeterなどの専門系には敵わないがちょっとした確認には便利。

その他(あんまり触ってないが素敵っぽいと思われるところ)

  • ルールに沿ってリクエストとレスポンスの各種情報をリライトできる
  • 扱えるリクエストとして他にもProtocol Buffersやフラッシュ系がある
  • ネットワークのタイムラインが見れる(Chrome Devtoolsのほうが見やすいが)
  • リクエスト単位でブラウザキャッシュさせなくしたりできる
  • レスポンスをW3C Validatorにかけることができる

Charlesの人によっては素敵じゃないところ

有料(US$50)

レジストしないと時間制限付きになるがその都度立ち上げれ使い続けられなくもない。
が、ここはエンジニアの心意気を見せるところなので気に入ったら是非とも購入を。

バージョンアップ時はこんな感じの料金体系みたい(情報古いかも)

  • マイナーバージョンアップは無料。(例:3.0の0の部分)
  • メジャーバージョンアップする場合は有料。(例:3.0の3の部分)
    • ただし購入3ヶ月以内なら無料。
    • それ以外は40%オフで購入可。

その他

Charlesを導入は通信系のデバッグには Charles が便利 を参考にすればよいと思う

次回

113
110
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
113
110

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?