CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

HTTP通信をモニタする

 Charlesは設定したポートを通るHTTP(S)の通信をモニタすることができます。Webアプリケーションを開発する上で可視化しづらい通信のやり取りを一つ一つ監視できます。もちろん自分が開発するアプリだけでなく、自分が普段利用しているサービスがどういった通信を行っているのかといった確認にも使えます。Web上のツールだったりゲームだったり、ログを見るだけでも楽しいですね。

 試しにCharlesを起動した状態で任意のWebページを開いてみましょう。多くのファイルを読み込んでいる様子が分かります。

monitor1

 Charlesは時系列でログを並べるだけでなく、ドメイン単位でグループ化し、ツリー表示で閲覧できるため特定のWebページの通信を監視するのに適しています。ログを選択すると右側のビューに詳細な内容を表示します。

monitor2

多彩なビジュアライザ

 この詳細ビューは送受信されるデータの形式に応じたビジュアライザでデータを確認することができます。

各種シンタックスハイライト

syntax highlight

 HTML, JavaScript, CSS, JSONなどはシンタックスハイライト表示に対応しています。JSONの場合はツリー表示にも対応しています。

Query String

 レスポンスだけでなく、もちろんリクエストデータも閲覧可能です。

query string

HTTP通信を書き換える

 Charlesの便利な機能の一つにHTTP通信のリライト機能があります。この機能を使うことで同じリクエストを何度でも、そして一部の値を書き換えて再送信するということが何度でもできます。この機能はデバッグに非常に役立ちます。例えばJavaScriptでAjax通信のテストする場合に有用でしょう。

再リクエストを行う

 任意のログを選択してコンテキストメニューを開くと[Repeat]という項目があります。これを選択することで同じ内容(Rawデータ)を再送信できます。

repeat

リクエストの中身を書き換える

 単純な再リクエストだけでなく、内容を変えることも可能です。任意のログを選択してコンテキストメニューを表示し、[Edit]という項目を選択します。すると詳細ビュー側がリクエストの編集画面に切り替わります。

Query Stringを書き換える

 [Query String]のタブを選択します。新しい値の追加・削除はもちろん、任意の値を変更できます。

edit

Headersを書き換える

 [Headers]のタブを選択します。Query Stringなどのように専用のエディタになっているわけではありませんが、各項目の追加・修正・削除を行えます。

edit header

 もちろんRawデータそのものを直接書き換えることもできますので、まったく違った内容に置き換えることもできてしまいます。使い方によっては非常に強力な機能です。


  • 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