羊毛布団を洗濯機にかけられないことを知りました。ago（@kyo_ago）です。
意外と知られていない機能が多い！？Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。
1. ショートカット一覧
以下のページでFirebugのショートカット一覧が公開されています。
http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts
取り合えず以下の二つだけでも覚えておくと効率的かもしれません。
- F12でFirebugの有効、無効の切り替え
- 広いコマンドラインモード時にCtrl+Enterでコードを実行
また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。
2. Firefox本体のツールバーに「要素を調査」ボタン
Firefox本体のツールバーに「要素を調査」ボタンが設置できます。
「ちょっと要素を調べたい」と言った場合に、いちいち「Firebug起動」->「調査ボタンクリック」ではなく、一気に要素の調査を開始できるので便利です。
Firefox本体の「ツールバー(T)」->「カスタマイズ(C)」からドラッグ&ドロップで設置できます。
3. console.debug
コンソールタブに引数の内容と、呼び出し元ファイル名、行番号を表示します。
引数の内容をコンソールタブに表示するにはconsole.logが使われることが多いですが、呼び出し元ファイル名、行番号が一緒に出力されるので通常のデバッグではこちらの方が便利だと思います。
ただし、console.logと違ってFirebug以外の開発環境では標準でサポートされていないので注意してください。
4. XMLHTTPRequests（Ajax）の通信内容を表示
コンソールタブでXMLHTTPRequests（Ajax）の通信内容を表示します。
過去のバージョンでは標準でXHRの通信内容がコンソールタブに表示されていましたが、最近のバージョンでは表示されなくなっていました。
このオプションを有効にすると、過去のバージョンと同様XHRの通信内容がコンソールタブに表示されるようになります。
これに関しては接続タブから確認することも可能ですが、接続タブを有効にすると若干重くなるので簡単に確認するのであればこのオプションの方が手軽だと思います。
5. コンソール内容の継続
画面をリロードしてもコンソール内容がクリアされなくなります。
表示後即リダイレクトしてしまう場合のエラー確認や、リンククリック時にエラーが発生してイベントが停止できず画面遷移してしまう場合のデバッグなどに役に立つと思います。
6. イベントを記録
HTMLタブ内の要素に対する右クリックメニューから、対象の要素に発生する全てのイベントをコンソールタブに出力することが可能です。
これに関しては以前もこのブログで紹介しましたが、便利なわりにあまり使われてない気がするので再度紹介いたします。
「本当にイベントが発生しているのか？」、「この動作時にはどんなイベントが発生しているのか？」といった場合に役に立つかもしれません。
7. 要素の変更時にブレーク
HTMLタブ内の要素に対する右クリックメニューから、対象の要素に変更が行われた際にブレークさせることが可能です。
これに関してはスクリプトタブが有効になっており、読み込みが成功していないと動作しないので注意してください。
（スクリプトタブが無効状態だと何も発生しません）
JSが競合して同時に要素を変更している場合などに役に立つかもしれません。
8. XHR でブレーク
「7. 要素の変更時にブレーク」のXHR でブレークする版です。
外部通信を監視したい場合には使えるかもしれませんが、JSONPはキャッチできないので注意してください。
（逆にHTML要素に対して「7. 要素の変更時にブレーク」を有効にするとJSONPをキャッチ出来ます）
9. 通信内容の継続
画面をリロードしてもネットタブの通信内容がクリアされなくなります。
「5. コンソール内容の継続」の通信内容版です。
複数画面の表示速度を比較したい場合に使えるかもしれません。
10. ブラウザキャッシュの無効化
有効にすると常にサーバからデータをダウンロードするようになります。
私はWeb Developerの「無効」系メニューをToolbarに設置して使っていますが、ブラウザキャッシュの無効化を行いたいだけであればこのオプションでも良いかもしれません。
（Web Developerの「キャッシュを無効にする」とは連動します）
