Google Chrome版Firebug:デベロッパーツール取扱説明書

第1回 詳説:デベロッパーツールの使い方

この記事を読むのに必要な時間:およそ 3 分

Resourcesパネルの使い方

続いて,Resourcesパネルの使い方です。まず,Resourcesパネルはデフォルトでは次のように無効にされています。これは,Resourcesパネルがネットワークを監視するためパフォーマンスを劣化させてしまうからです。

画像

上記の通り「Only enable for this session」を選択すれば,そのタブを表示している間だけネットワークの監視を有効にすることができます。まずはこちらを選択してください。なお,⁠Enable resource tracking」をクリックすると現在表示しているタブはリロードされます。

画像

Resourcesパネルが有効な状態でページをロードすると,このように読み込みを開始したHTMLに始まって,そのページ内のCSS/JavaScript,画像ファイルなどのネットワークを経由して取得したファイルがすべて一覧されます。左側のファイル名が取得したファイルの一覧で,その右の棒グラフはそのリソースを取得するのにかかった時間を表しています。

右上の少し大きな棒グラフはファイルのタイプごとにかかった時間を集計しています。その下に青い縦線と赤い縦線がありますが,青い線はDOMContentLoaded(DOMの構築が終わったとき)のタイミング,赤い線はonload(画像も含めた読み込みの完了)のタイミングを表しています。

また,左のファイル名を選択すると次のようにヘッダーとレスポンスの中身を確認することもできます。

画像

なお,Resourcesパネル上部のボタンで左側に表示するファイルのタイプをフィルタリングすることができ,次のようにXMLHttpRequestをチェックすることも可能です。これはAjaxアプリを作る際に重宝します。

画像

Scriptsパネルの使い方

続いて,Scriptsパネルの使い方です。Scriptsパネルを開いたら,まずデバッグしたいJavaScriptが記述された場所を選択します。

画像

続いて,デバッグしたい行にブレークポイントを設定します。

画像

ブレークポイントを設定した行まで処理が進んでくると,次のようにそこで処理がストップします。

画像

右上のボタンで処理の再開(F8)⁠ステップオーバー(F10)⁠ステップイン(F11)⁠ステップアウト(Shift+F11)などを行うことができます(括弧内はWindowsでのショートカット)⁠

右側のビューでは監視する変数を追加したり,コールスタックやスコープ内の変数などをチェックできます。特に次のようにローカル変数とグローバル変数だけでなく,クロージャで参照している変数もチェックできる点が優れています。

画像

なお,ブレークポイントはリロードしても残るため,ページの読み込み時の処理にもブレークポイントを設定することはできますが,動的に追加されるJavaScriptにはブレークポイントを設置しにくいという問題があります。そういった場合,ソースコード中にdebuggerステートメントを入れておくことで,その位置でブレークすることが可能です。

画像

ただし,debugger命令は強力でループ中に記述してしまうとループから抜けることが困難になるといったことも起こり得るので注意が必要です(といっても,デベロッパーツールを閉じればブレークは解除されるのでブラウザ自体を再起動しないといけないような事態にはなりません)⁠

Storageパネルの使い方

Storageパネルでは,WebSQLDatabase,WebStorage,Cookie,Application Cacheのステータスを確認できます。

画像

WebStorageについては編集と削除,それ以外は削除のみが可能です。

Consoleパネルの使い方

Consoleパネルでは,JavaScriptをその場で実行することができます。また,console.logなどに渡されたオブジェクト・値はこのパネルに出力されます。そのほかにもエラーが起きた際の警告など,大抵のメッセージはここに出力されます。

画像

このコンソール上ではいくつかの特殊な関数が用意されています。

$document.getElementByIdのショートカット
$$document.querySelectorAllのショートカット
$xdocument.evaluate(XPath)のショートカット
$1, $2, $3, $4$1から$4にはコンソールでの実行結果が4回分だけ記憶されています。
copy(text)引数に渡した文字列をクリップボードにコピー
dir(object)引数に渡したオブジェクトを解析(DOM要素を渡したときもオブジェクトとして扱う)
dirxml引数に渡したノードをツリー表示
inspect引数に渡したオブジェクトに応じて適切に解析を行う(localStorageを渡すとStorageパネルに切り替えるなどの処理も行う)⁠
keysオブジェクトのプロパティを配列で返す
monitorEvents引数に渡したDOMについて各種イベントを監視する。第2引数で監視するイベントの種類を制御できる。
unmonitorEventsmonitorEventsを解除
profileJavaScriptのプロファイリングを開始する
profileEndJavaScriptのプロファイリングを終了する
valuesオブジェクトが持つ値を配列で返す

dirとdirxmlの違いは,次のとおりです。なお,console.logやinspectで出力した場合はdirxmlが使用されます。

dirによるDOM出力

dirによるDOM出力

dirxmlによるDOM出力

dirxmlによるDOM出力

まとめ

今回はデベロッパーツールの使い方を詳細に解説してみました。次回は今回説明していないTimelineパネルとProfilesパネルの使い方を,第3回はAuditsパネルの使い方を解説する予定です。お楽しみに!

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/