今の主要ブラウザにはたいていウェブ開発ツールが付いてるようですね。 Firefox、google chrome、IEにはありました。 ウェブ開発ツールにはjavascriptのデバッガやhtml、cssのチェックツール、ファイルのダウンロードタイミングの確認ツール、プロファイラの他、ネットワークのリクエストやレスポンスのビューアが備わっています。 リクエストやレスポンスっていうのはhtmlに書かれているものだけでなくajaxのも対象です。 今回はajaxのレスポンスを調べる機会があり、それにブラウザのウェブ開発ツールを使ったのでメモしておきます。
この投稿のキャプチャー画像について、ネタを思いついたのが先週で画像をキャプチャーしたのも先週です。 それから記事を書くのにちょっと間があいてしまいました。 と言うわけでブラウザのバージョンアップをはさんで微妙に見た目が違うところがあります。 でもまぁ、大勢に影響は無いしキャプチャーしなおすのは面倒なので画像はそのままで使っています。
では本題、まずはfirefox 24(画像は23)付属の開発ツールから。 firefoxの開発ツールはメインメニューの「ツール - Web開発 - 開発ツールを表示」から開けます。 ネットワークツールを直接開く場合は「ネットワーク」メニューをクリックします。
デフォルトではウィンドウの下に開発ツールのパネルが表示されます。 設定次第では別窓で開く場合もあります。 開いたら、ネットワークタブが選択されていることを確認。
そこに書かれている通りページを更新すると通信ログが表示されます。
ファイルを選択すると右側に個別の通信の詳細が表示されます。 表示内容はファイルの種類などによって変化します。
リクエスト/レスポンスヘッダの内容を確認するにはヘッダタブをクリック。 クエリーの内容などは本来リクエストヘッダに含まれている物もあるのですが、このツールではヘッダタブでは確認できません。 パラメータタブを開くと確認できます。 レスポンスのコンテンツを見るには応答タブをクリックです。 レスポンスが文字列の場合はそのままでは見辛いのでコピー&ペーストしてテキストエディタなどで見ましょう。
使ってみると分かると思いますが、firefox付属の開発ツールはクリックメニューがほとんどありません。 できるのは表示されているものを見るのと文字列のコピーすることだけです。 「文字列の表示が切れているけど選択もコピーもできなくて内容が確認できない」場合とかもあり、非常に使いにくいツールとなっています。 普通は通信ログを確認するためにこれは使わないでしょう。 なんかの制限でアドオンが使えない場合のみ使うことになるかと。
firefox付属の開発ツールが使えないなら何を使うかというと、アドオンのfirebug(ver 1.12.1)です。 インストールしたらメインメニューの「ツール - Web開発 - Firebug - Firebugを開く」から開けます。
表示されるパネルは、書いてあることは他のツールと違うけど中身はだいたい同じです。 パネルが開いたらネットタブを選択。
ページを更新すると通信ログが表示されます。
このログは一見ただのリスト表示ですが、行頭の+をクリックするとその行のすぐ下に詳細が表示される変則UIになっています。
リクエスト/レスポンスヘッダの内容を確認するにはヘッダタブをクリック。 クエリーの内容などはリクエストヘッダの「ソースを表示」をクリックでも見れますし、ヘッダタブの隣にあるパラメータタブでも見れます。 レスポンスのコンテンツを見るにはレスポンスタブをクリックです。 右クリックメニューは全タブでほぼ共通ですが、レスポンスの中身が画像などの場合はちょっとだけ変化します。 レスポンスボディーをコピーとか、テキストデータを扱うときに便利な機能も。
ログのチェックには十分ですね。 蛇足ですがリクエストヘッダを書き換えて再送信とかできるかと思ったけど無理でした。
次はgoogle chrome 30(画像は29)です。 メインメニューの「ツール - デベロッパーツール」から開けます。
表示されるパネルは、書いてあることは他のツールと違うけど中身はだいたい同じです。 でもちょっとだけ多機能 ... なのかな? 変わらないか? パネルが開いたらNetworkタブを選択。
ページを更新すると通信ログが表示されます。 少し表示が崩れているのはwindows7の文字サイズを変えたからなんでしょうか?
Nameを選択すると右側に個別の通信の詳細が表示されます。 表示内容はファイルの種類などによって変化します。
リクエスト/レスポンスヘッダの内容を確認するにはHeadersタブをクリック。 クエリーの内容などはHeadersタブの表示の中の Request Headers の下、 Query String Parameters にあります。 Request Headers は view source / view parsed の切り替えが可能。 これはfirebugと同じですね。 Query String Parameters ではエンコードの有無も切り替えられるようです。
レスポンスのコンテンツを見るにはPreviewタブまたはResponseタブをクリックです。 テキストデータの場合はどちらも同じ内容が表示されますが、画像などタイプによって表示内容は変わります。 右クリックメニューは未選択の状態では無し。 PreviewタブまたはResponseタブの中身を選択した状態なら色々なメニュー項目が出てきますが、使えるのはコピーくらいでしょう。 ちなみに、ダブルクリックで単語選択、トリプルクリックで全選択です。 cookieの項目もそうやって選択できるんですが、そちらはどこを選択しているのか分からないのが困り物だったり。
これもレスポンスのテキストデータをそのまま読むには辛いですね。 「テキストエディタにコピー&ペーストして見る」っていうのはどのブラウザでも同じかと。
最後はIE10です。 ツールを開くのはメインメニューの「開発者ツール」から。
表示されるパネルは、書いてあることは他のツールと違うけどやっぱり中身はだいたい同じです。 パネルが開いたらネットワークタブを選択。
通信ログはキャプチャ中のみ残ります。 「キャプチャの開始」ボタンを押してからページを更新しましょう。 「キャプチャの開始」ボタンはトグルボタンで、キャプチャ中は下の図の通り「キャプチャの停止」ボタンになります。 定期的に更新してしまうページとかで無駄なログを残さなくて済むのでちょっとありがたい機能ですね。
行を選択して「詳細ビューに移動」ボタンを押すと個別の通信の詳細なログを見る事ができます。 ログの一覧に戻るときは「詳細ビューに移動」ボタンのところに「要約ビューに戻る」ボタンがあるのでそれを押します。
詳細ビューには要求ヘッダー、要求本文、応答ヘッダー、応答本文が並んでいて分かり易いですね。 ただ、他のブラウザと違って要求クエリーの内容を解釈表示しているところはありません。 HTTPリクエストのコンテンツではなくGETメソッドの行にクエリーが書かれている場合は要求ヘッダの「要求」キーの値を自分で読む必要があります。
ajaxのレスポンスのコンテンツを見るには、もちろん応答本文タブをクリックします。 右クリックメニューの「名前を付けて保存」もありがたいです。 まぁその恩恵はちょっとだけですが。
でお買い物
