Firebugについてまとめ

JavaScript Firebug まとめ

随時更新

公式ドキュメント

Firebug Console API
http://getfirebug.com/commandline.html

気になったところ
  • $$(selector)
  • dirxml(node)
    • outerHTML相当のHTMLを出してくれる感じ
    • $$(selector)と組み合わせると便利そう。
  • inspect(object[, tabName])
    • 指定したオブジェクトを指定したタブで表示できる。特定要素をHTMLタブで表示させる時、「inspect($$('table#some-id td')[0],'html');」みたいにできる。今まで、「console.log($$('table#tab td')[0]);」を実行してconsoleタブに表示させた後、そこをクリックみたいにやっていた。
  • monitor(fn)
    • 後で試す
  • monitorEvents(object[, types])
    • 後で試す

ためになる連載記事

Firefox 3とFirebugで始めるJavaScript開発：特集｜gihyo.jp … 技術評論社

ためになる講演資料

shibuyaes_send_firebug.pdf FirebugでWeb開発の効率を上げよう (pdf)
APIについてさっくり説明しているので一度目を通しておくといい。

tips他

$$1、debugger

http://labs.gmo.jp/blog/ku/2008/03/_firebug_tips.html
$$1で直前にconsole.logで出力したオブジェクトが参照出来る。
$$1はFirebug1.2で廃止されました。(id:ku0522からの指摘で2008/08/26訂正)
JavaScriptのコード中に「debugger;」と入れるとそこにブレークポイントを設定できる。
ロード時に自動実行されるコードのdebugに便利そう。

Log Events

FirebugのLog Eventsに関して - KAYAC engineers' blog
日本語化されている場合は「イベントを記録」。
特定の要素で発生するイベントを全部表示して追いたいときに、
右クリック「要素を調査」(Inspect Element)を使って、
HTMLタブ上に該当要素を表示させてこれを使うとよさげ。

DOM構築中のconsole.log


Firebug1.2になってからconsoleが動かなくなった - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記
Firebug1.2ではDOMContentLoadedのタイミングでconsoleが定義されるので、
DOM構築中にはconsole.logでlog出力できない。
Firebug1.05ならOK。
Firebug1.2ベータ15までで発生する問題で、リリースされたFirebug1.2では解消されていました。
(2008/08/26訂正)

Firebug拡張

http://www.webmonkey.com/blog/The_Five_Best_Firebug_Extensions

お勧めFirebug拡張

  • YSlow
    • ハイパフォーマンスWebサイトの14のルールを指摘してくれる。
  • Firecookie
    • cookieの中身を表示したり書き換えたりするのが楽チン。
  • Rainbow
    • scriptタブのJavaScriptとHTMLシンタックスハイライトしてくれる。
    • 基本的に自分が開発しているWebサイトのJavaScriptはシンタックスハイライトしてくれるエディタで編集しているはずなので、これは正直要らないと思う。
    • よそのサイトのJavaScriptを読みたいときには便利だと思う。
2008/10/6追記
  • Hammerhead
    • キャッシュ有り・無し両方でのページ読み込み時間を計測出来る。
    • インストール前にabout:configを弄らないといけないので↑のページの説明をちゃんと読む事。