Web開発に欠かせないFirefoxアドオン

Programming

Web開発のときだけ火狐使いっていう人よくいるよね。今回はそんなFirefoxで、日曜プログラミングでも現場でも使っている開発系アドオンをご紹介。ﾋﾟｬｲ。

Firebug


Firefoxと言ったらこれでしょ！っていう定番アドオン。例えば

  • 「コンソール」タブで直接Javascript打ったり
  • 「HTML」タブで要素を調べたり
  • 「ネット」タブで表示のボトルネックとなっているファイルを見つけたり

などなど、便利すぎて反吐が出るぐらい機能盛りだくさん。

ついでに、FirebugにCookieを見る機能を追加するFirecookieもおすすめだったり。

ColorZilla


カーソル上の文字、背景、画像のRGB値とカラーコードが見れちゃう。文字色だったら上記のFirebugで十分調べられるけど、画像のRGBがわかるのは便利。
画像の背景色に合わせてCSSの背景色も合わせたりとか簡単に。

JSONView


最近はjQueryでJSON読み込んでよしなにすること多いけど、このアドオンを入れておけばブラウザ上でJSONが見られて便利っす。
ツリー階層を閉じたり開いたりもできちゃう。

Live HTTP Headers


HTTPヘッダならFirebugでも確認できますが、ヘッダだけの確認ならこちらのアドオンがおすすめ。リプレイ機能もすばらしい。

User Agent Switcher


User Agentを簡単に切り替えできるアドオン。最近は主にiPhone用ビューが読み込まれるかの確認などに使ってます。デザイン的な確認はやはりSafariじゃないとダメだけど。

Selenium IDE


忘れてたので追記。ブラウザでの結合テストが簡単に行えちゃうすんごいアドオン。画像では、「Googleトップページを開いて、"mnemoniq hatena"で検索して、結果から2番目のリンクをクリックしたら、"プロスチーマーに、俺はなる！"とか痛い宣言がある」っていうのをテストした結果。テストケースは簡単に作れるし便利でっせ。

やっぱりFirebugの機能がヤバすぎて、他のアドオンが微妙に見えちゃう。