SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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データそのものを直接書き換えることもできますので、まったく違った内容に置き換えることもできてしまいます。使い方によっては非常に強力な機能です。

次のページ
スマートフォンの通信をプロキシする

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEフロントエンドレンジャーのWeb開発術連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/8461 2015/02/20 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング