CodeZine(コードジン)

特集ページ一覧

フロントエンド開発が捗るHTTP通信モニタリングツール「Charles」を使いこなす

LINEフロントエンドレンジャーのWeb開発術 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2015/02/20 14:00

目次

ローカルファイルへのマッピング

 ローカルマッピングはネットワークから読み込んだファイルをPCローカルの別のファイルと置き換える機能です。この機能を用いることで開発環境ではもちろん、本番環境で稼働するアプリケーションのデバッグを行うことが可能です。稼働する環境には一切干渉せずコードをまるっと置き換えて外部エディタで編集、そのまま動かすことができるのはWebアプリケーション(JavaScriptアプリケーション)の強みだなと思います。ただし、Chromeなどのデベロッパーツールとは違い、リアルタイムで編集反映はできません。通信時にファイルを置き換えるため必ず編集後はリロードが必要になります。

マッピングルールを追加する

 Ctrl(Command)+Shift+Lでマッピングのダイアログを開きます。

local mapping1

 マッピングが有効化されていない場合は[Enable Map Local]にチェックを入れます。[Add]を押すと新規で追加するビューが開きます。

local mapping2

 プロトコル、ホスト、パスなどを入力します。この時入力にはワイルドカードを用いることができます。各項目は省略することも可能です。パスのルールを入力し終えたら置き換えたいファイルをローカルから選択します。これでパスのルールに引っかかるファイルは選択したファイルに置き換えられます。

通信のログからルールを追加する

 すでに置き換えたい目的のファイルがログ上にあるのであれば単純な追加はこちらのほうが楽です。該当のログを選択し、コンテキストメニューから[Map Local]を選択すると、先程と同様ルールを追加するビューが開きます。

local mapping3

 デフォルト値で選択した通信に基づいた内容が入力されています。内容を確認し、問題なければ追加をします。

うまくファイルが置き換わらない

 ルールはしっかり設定されているはずなのにファイルが置き換わらない。よく見ると読み込んでいるはずの該当のファイルのログが見つからない。そういう時はアプリを終了させたり削除して再インストールすることで解消する場合があるようです。

通信制限をかける

 Charlesには通信の上り下り速度を設定するThrottleの項目があります。この値をいじることで劣悪なネットワーク環境で動くモバイル端末を再現することも可能です。メニューから[Proxy]→[Throttle Settings]を開きます。

throttle

 プリセットとして用意された項目を選んだり、自分で値をカスタマイズすることができます。スマートフォンのアプリケーションはPC以上に多様な環境で動作することが考えられます。レスポンスが返りきるまで異様に遅かったり、タイムアウトの処理がしっかりしていなかったりすると思わぬバグを招きかねません。開発段階でこうした問題をテストして、前もって潰しておくことは非常に重要です。

SSL通信をプロキシする

 ここまでHTTP通信を前提に話を進めましたが、SSLの通信をプロキシすることもできます。ここまでの説明を元にHTTPS通信をモニタしてみた方がいたら気づかれたかもしれませんが、HTTPS通信は暗号化されているため内容を見ることができません。しかしCharlesが提供するSSL証明書を受け入れることにより、HTTPS通信の内容もモニタできます。

 上記のページでSSL証明書がダウンロードできます。このページへ端末でアクセスし、SSL証明書をダウンロードします。ダウンロードすると信頼されていない証明書をインストールしていいか聞かれますので、問題がなければ許可をします。端末側はこれで準備完了です。PC側に戻り、[Proxy Settings]を開きます。

ssl

 SSLのタブを開き、[Enable SSL proxying]にチェックを入れてSSLのモニタを有効化します。この状態で先ほど証明書をインストールした端末でHTTPSのサイトにアクセスをしてみてください。先ほどまで見えなかったSSLの通信をHTTPの時と同じように見ることが可能です。もちろんHTTPでできていた操作はすべて行うことが可能です。

adbと一緒に使ってみる

 最後に小ネタとしてAndroid限定でadbとの連携を見ていきます。JavaScriptのコードの中にconsole.logでログを吐くコードがあった場合、通常それは端末の中でしか見ることができませんが、logcatを起動させておくとログに流れるconsole.logを見つけることができます。リアル環境で稼働するJavaScriptファイルをconsole.logが埋め込まれたファイルに置き換えることで少しだけ便利なconsoleデバッグを行えます。

 adbはAndroidのSDKの中に含まれます。

 SDKをインストールするとplatform-toolsの中にadbがありますので、Androidの端末をPCに接続した上で起動します。

$ ./adb logcat

 するとAndroidのログが流れ始めます。これだとconsole.logを見つけることは困難なので、console.logを使う時に適当なプレフィックスを付与しておくとgrepでフィルタできて便利です。

console.log("[jsdebug] hoge");

 上記コードを置き換えるファイルの中に埋め込みましょう。

$ ./adb logcat | grep jsdebug

 grepなどでlogの内容を抜き出します。alertを使ってデバッグするよりかはいくぶんか捗ると思います。

 ただし、logcatはブラウザのデベロッパーツールのようにオブジェクトを見やすい形では表示できないため、toStringされた値が流れます。オブジェクトの中身をツリー表示したい場合は別途オブジェクトをパースして見やすく整形するコードを入れておくとさらにconsoleデバッグが捗るかもしれません。

 以上、すべての機能ではありませんがCharlesの便利な機能の解説をしてきました。PCだけでなく、スマートフォンのWebアプリ開発でも威力を発揮するツールです。ちなみにCharlesは30日間フリーで試用することができますが、一部に制限が付いているため試してみて便利だと思ったら購入を検討するのもいいと思います。

 最後になりますが、LINE株式会社ではこういったデバッグツールを使いこなすJavaScriptエンジニアも募集しています。プラットフォーム・グローバルなJavaScriptアプリケーションの開発に興味のある方はぜひご応募ください。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:LINEフロントエンドレンジャーのWeb開発術

もっと読む

著者プロフィール

  • 縣 亮太(LINE株式会社)(アガタ リョウタ)

    LINE株式会社Webフロントエンド担当のJavaScript書き。NAVERまとめやLINE内Webアプリを担当する。 Backbone.jsが好きで仕事でもプライベートでも利用する機会が多い。 最近はKnockoutjsに注目しており、JavaScriptのデータバインディングな世界を試行錯誤...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5