FirebugによるWebコードのデバッグ:Firefox Hacks(2/2 ページ)
複雑に絡み合ったWebサイトの開発において、Firebugを使えば、CSSおよびJavaScriptの単純なテンプレートから複雑なAjaxアプリケーションに至るまでのすべての編集とデバッグを行うことができる。
目に見えないAjaxトラフィックの調査とデバッグ
Firebugは、CSS編集のための便利なビジュアルリファレンスになるだけでなく、Ajaxを利用した複雑なWebページにも対応している。AjaxのXMLHttpRequest(XHR)オブジェクトは、GmailのようなAjaxアプリケーションの重要な部分である。このオブジェクトは、ページの更新のためにWebサーバからデータを取得するのに使われる。「Show XMLHttpRequests」オプションが有効になっている場合、「Console」タブにすべてのXHRリクエストが表示される。これらを展開すると、サーバから受け取った応答とともにヘッダ情報が表示される。
「Net」というタブもあるが、ここにはページに読み込まれるファイルが(HTML、CSS、JavaScript、Flash、画像のいずれであっても)リアルタイムで表示される。このタブは、ページの読み込みにかかる時間の確認と最適化を行うのに適している。要求されている要素群のプレビューができ、それらのサイズと読み込み先のシーケンスも確認できるからだ。
Firebugには、関数ごとに詳細なリポートを提供してくれるJavaScriptプロファイラも用意されている。関数の切り替えは、手動、またはJavaScriptからオートプロファイリングの機能をマークすることで行える。また、このプロファイラは、関数がいつ呼び出され、どんなパラメータが渡されたかを記録している。
また、ブレークポイントの設定により、JavaScriptの実行を任意の行で一時停止させることができる。ブレークポイントは特定の1行をクリックすることで設定でき、ある条件が満たされたときに限って実行を停止する条件付きブレークポイントの設定も可能だ。ブレークポイントにヒットした後は1行ずつステップ実行を行い、プログラムの状態がどのように変化するかをリアルタイムに分析できる。
関数のテストは、コマンドラインに関数名をペーストするだけで行える。また、Firebugではコードのセグメントを取り出して1行に圧縮できるが、これはブックマークレットの作成に役立つ。
まとめ
Firebugは、Web開発を仕事にしている人にもたまにしか行わない人にも恩恵をもたらす。最大の利点は、Firebug内のほぼすべてのものがハイパーリンクになっている点だろう。例えば、プロファイラなど関数が表示されているところならどこででも、関数名をクリックしてソースコード内の該当カ所にジャンプしたり、HTML要素をクリックしてそのスタイルを確認できるのだ。
FirebugはプロのWeb開発者の間で人気があるが、彼らの多くはβ版のころから利用している。Firebugのデザインは直観的に分かりやすいが、本業ではなく趣味でWeb開発に携わる人には、すべての項目の場所や特定のボタンの機能が説明されている数点のドキュメントが役に立つだろう。
関連記事
- Firefox拡張:FEBE――Firefox環境のバックアップとリストア
FEBEにはインストールする価値が十分にある。FEBEを使えば、Firefoxが保存しているすべてのもの+αをバックアップおよびリストア可能となる。自動バックアップをセットしておいて複数の時刻のバックアップを保存するのも朝飯前だ。 - Firefox拡張:Hit-a-Hint、キーボードを使ってWebを素早くサーフィン
PCを扱う上でマウスを使うことほど生産性を落とすことはない。可能ならばブラウジングもマウスなしで済ませたいところだ。そんな願いをかなえてくれるFirefoxエクステンションが「Hit-a-Hint」である。 - GDB/GDBserverによるクロスターゲットのリモートデバッグ
Linuxベースの組み込みシステムで動くアプリケーションのデバッグは厄介な仕事だが、GDBを使えば簡単に片付けられる。ここでは、GDBを使う上で最初の難関となるセットアップ周りについて解説する。
Copyright © 2010 OSDN Corporation, All Rights Reserved.