Firefox を使っていて Web 制作をしている方に人気の add-on、Firebug 。
javascript 方向にも秀でているらしいのですが、私はもっぱら css チェックや xhtml の構造チェックに使ってます。
Inspect を押して画面内の調べたい場所をクリックすると、そのクリックした場所の xhtml 該当部分がすぐ見れて、その部分にかかっている css も一覧ですぐ見れる！その上、その css や xhtml の値や数字も変更して見た目がどう変わるかもすぐ確認できちゃったり。
仕事中は使用頻度が凄く高く、コレがあるおかげで大分作業時間も短縮できて助かってます。
表示が意図したものにならなかったり、崩れてしまったり、後から一部分変更したい時などに大活躍。
何度も何度も Inspect を押すので、最初は Firefox のツールバーに Inspect （眼鏡のアイコンのもの）を置いていました。けど、本当に回数が多いのでそれすら面倒なくらいになってきまして、最近はマウスにショートカットを割り当てています。
Firebug のショートカット一覧
Firebug Keyboard Shortcuts
よく使うのは、以下の 3 つ。
- Open Firebug Panel : F12
- Close Firebug Panel : F12
- Toggle Inspect Mode : Ctrl+Shift+C (Mac なら ⌘+Shift+C)
サイドボタンが 2 つあるマウスなので、サイドボタン 1 に F12、サイドボタン 2 に Ctrl+Shift+C を割り当てています。
これが思っていたよりずっと快適だったので、オススメしてみます。
Photoshop で画像の切り出しをしたり、コーディングをしたりとアレコレ移動して見ている場合、左手はキーボード右手はマウスが多いです。なので F12 はちょっと押しにくいですし（右手をマウスから離す必要があるため）、かといって Firefox のツールバーに何度も何度もマウスを移動させるのも結構面倒で大変です。
Inspect を押したり、F12 を押すのも数回なら別に良いですが、作業中下手をすれば数百回行う作業なので塵も積もれば山となるということで…マウスのサイドボタン一発にしてしまうことでかなり楽になりました。
Firebug のショートカットを割り当てたことでマウスサイドボタンで「前のページに戻る」「次のページへ進む」などができなくなりましたが、マウスジェスチャーかキーボードショートカットでページ移動系は行っています。ページ制作中は、その作っているページを開いたままにしておき「Inspect を使って問題点を確認→修正→リロード」、という作業を繰り返することが多く、ページ移動はあまりしません。ですのでジェスチャーやキーボードショートカットでページ移動するのに不便は感じていません。
Web 制作で同じような作業をよくする方は、マウスボタン割り当てオススメですよ～ :mrgreen: