Charlesを使ってデバッグを効率化する

新年明けましておめでとうございます。
本年もどうぞ宜しくお願い致します。

さて今回は制作部フロントエンジニアの苅部から、Charles(チャールズ)というアプリケーションをご紹介させていただきます。
このアプリケーションはHTTPプロキシを設定できるソフトで、通信の内容を覗いたり改変したりする事ができます。
日々のデバッグ作業に応用できますのでフロントエンジニアやディレクターの方、是非この機会に活用されてみてはいかがでしょうか。

Charlesを使ってできること

デバッグで主に利用する機能は以下の4点です。

  • 通信内容の詳細確認
  • 通信内容の制御
  • 帯域制御
  • スマートフォン実機でのデバッグ

設定方法

最初に、初期設定についてご説明します。
※ ここではMacOS利用にて、スマートフォンがMacOSと同じネットワークに接続していることを前提とします。

MacOS

  1. CharlesのWEBサイトからダウンロードします。
    https://www.charlesproxy.com/download/

  2. Charlesをインストールします。

  3. SSL通信も有効にするためSSLの証明書をインストールします。 SSL証明書の設定についてはオフィシャルのドキュメントを参考にしてください。
    https://www.charlesproxy.com/documentation/using-charles/ssl-certificates/

スマートフォン

Macと同じネットワークに接続し、HTTPプロキシを設定します。
サーバ/プロキシホスト名にはMacのIPアドレス、ポートはCharlesで設定しているポート番号（デフォルトでは8888）を指定します。

  • iOSの場合

  • Androidでの設定

※ SSL通信を有効にするためには、MacOS同様に端末へ証明書のインストールが必要となります。
※ 端末からネットワークへ接続するとMacOS側にダイアログで"A connection attempt to Charles…“というメッセージが表示されるので、[Allow]を選択して、端末によるアクセスを許可してください。
※ Android2系ではプロキシ設定のできる機種が限られているようです。

デバッグ方法

機能ベースではイメージしづらいため、実際の利用シーン別に操作方法をご説明します。

1. スマートフォン実機でデバッグを行いたい

例えばスマートフォン実機/商用環境にて何か問題が発生していて、すぐにデバッグが必要な場合があるとします。 PCであれば、ブラウザの開発者ツールなどを利用してある程度デバッグをすることができますが、実機でのiOS/Android/WEBVIEWではその方法が取れない場合があります。
こういったケースでCharlesを活用をすることができます。

ここでは[Map Local]機能を使い、mediba.jpへのアクセスでアラートウインドウを表示してみます。

1) ブラウザのDeveloper toolなどで任意のURLを拾います

ここではhttps://www.mediba.jp/includes/js/jquery/jquery.jsとしました。

2) デバッグ用の代替ファイルを用意します

hoge.jsというファイル名にて、alertを実行するscriptを用意しました。

3) Map Localの設定をします

[Tool] から [Map Local]を選択します。
[Enable Map Local]をONにして[Add]を押します。

[Map From]の[Host]の箇所に先ほどのフルパスを貼り付けます。
この後、別の項目にフォーカスするとフルパスが個々の項目に分解されます。
[Map To]では先ほど用意した代替のスクリプトファイルを選択します。

以上の手順によって、
* https://www.mediba.jp/includes/js/jquery/jquery.jsのレスポンスを
* [/Users/hoge.js]の内容で返す

といった設定が完了しました。

リロードを行うと、Macのブラウザでもスマートフォン実機でもアラートウインドウでhello worldと表示される事が確認できると思います。

top

レスポンスとして返ってきているものであれば、img,css,jsなど全てのファイルを書き換えることができます。
これによって"商用環境/スマートフォン実機にて、外部ファイルの影響で問題が起きている"といったような特殊な状況でもすぐにデバッグが可能になります。
location.reloadやlocalstorage、DOM Selectorを利用すれば事象の発生確率の確認くらいはできると思います。

※マッピングがうまくいかない場合

Charlesによってマッピングされているファイルは独自のレスポンスヘッダーが付与されています。

うまくいかない場合は、対象のファイルにX-Charles-Map-Localヘッダーが付いているか確認してみてください。

2. 非同期のデータ(スタブ)を用意したい

前述の事例と同様にMap Localの機能を利用して、読み込むファイルをJSONなどにしておけば、JSでの非同期処理におけるスタブデータとしても利用ができます。

これにより、例えばバックエンドの実装が終わっていない状態でも、APIの仕様を決めておけばフロントでもある程度先行して実装することができます。

3. 通信のログを確認したい

メインのビューには常にログが流れていきます。
実機でもログが取れるため、実際のリクエスト数がどのくらいでそれぞれのレスポンスにどのくらいのコストが掛かっているかわかります。

個々の項目では、Overviewやリクエスト/レスポンスのRAWの表示が可能です。

4. 通信速度をコントロールしたい

[Throttle Setting]機能にて帯域を制御できます。
例えば通信速度を極端に下げることによってページローダー的な、ロードの状況に応じて消えてしまう要素を確認することができます。
また実際にどの段階でページが描画されるか、ログと照らし合わせて確認できるためボトルネックの発見に繋がります。
例えば外部ファイルロードによるレンダリングブロックのポイント(クリティカルレンダリングパス)を確認することができると思います。

私自身も過去のプロジェクトで、この機能でデバッグを行いAndroidWEBVIEWのパフォーマンスを改善していた事があります。

帯域設定は[Enable Throttling]をONにして、任意のPreset/帯域数値を指定するだけです。

SIM契約の多様化によって十分に速度が出ないユーザーもいるため、低帯域でのパフォーマンス改善も大切かと思います。

5. ヘッダの内容を変更したい

[Rewrite]機能を使うことで、リクエストヘッダやレスポンスヘッダの内容を変更できます。
そのためリクエストでのcookieを変更して認証まわりのデバッグを行ったり、 レスポンスでのCache-controlやExpiresを変更してブラウザのキャッシュ周りのデバッグも可能になります。

ここではリクエストヘッダーのUserAgent変更を例にとって、設定手順をご説明します。

1) Rewrite Settingを表示

[Enable Rewrite]にチェックを入れ、その下の[Add]を押します。

2) ルールセットの名前を設定

任意の名前を設定します。AndroidのUAに変更するため、ここでは"Android UA"としました。

3) Locationsの設定

今回はワイルドカードで設定しました。全てのURLで有効になります。

4) Rulesの設定

Rewriteに関する細かい指定を行います。

  • [Type]: Rewriteの振る舞いを選択します。
    今回は既存のヘッダの変更となるため[Modify Header]を選択しますが、ヘッダー追加/削除,クエリパラメータの変更/追加/削除も可能です。
  • [Where]: Requestを選びます(リクエストヘッダー)
  • [Match]: NameにUser-Agentを入力し、全ての値を対象とするため[Match whole value]のチェックを入れます。
  • [Replace]: NameにUser-Agentを入力し、Valueに任意のUA Stringで設定します。
    ここではAndroidのUserAgentを入力しました。

この設定により、[iPhoneやPCでアクセスしていてもUserAgentは一律Android]となります。
この状態で試しにGoogle検索をしてみます。

  • UAがiOSの場合の検索結果

  • UAがAndroidの場合の検索結果

Androidに変更した状態では、検索結果のアプリ一覧にAndroidアプリが出てきているので
Rewriteがうまくいっている事がわかります。

注意点

  • Charlesはシェアウェアですが、起動してから30分間は通常利用ができます。
    30分経過するとアプリケーションが強制終了しますが、再起動してまた30分間使うことが可能です。
  • 通信のログは止めない限りは残り続けるため、継続して使うとメモリが圧迫されてCharlesが落ちることがあります。

まとめ

これまで紹介したようにCharlesは簡単なGUIに必要十分な機能が備わっており、誰でも気軽にデバッグができるソフトだと思います。
用意されている機能を応用することで通常では難しいデバッグも簡単にできます。
また、問題の切り分けにかかる時間が短縮されるため、業務効率の向上に繋がります。

ライセンスも$50以下ですので、機能から考えるとコストパフォーマンスはとても高いように感じます。 https://www.charlesproxy.com/buy/

Charlesは新しいソフトではありませんが(私自身も3年くらい使っていますが)、もしまだ使われていなければ一度触ってみることをお勧めします！