WEBの開発・デバッグ環境として、FireFoxが不可欠なこの頃ですが、ずばり開発環境としてのエクステンションをまとめた記事。
Warping it up! :: Extending Firefox for Web Developers紹介されているなかで、試した事が無いエクステンションが結構あったので早速インストール。なかでも次の三つは激しく便利です。
Web Developer - Firefox Extension
WEBサイトをチェックする上で、およそ考えられる、ほとんどの必要な機能が入ってる。FireFoxで閲覧中のWEBページの、FormやCookie、Imageの各パラメーターを任意に変更したり、Dom構造やブロックレベル要素をアウトライン表示するなど。そして最強なのが、CSSエディタ。WEBページのCSSを自動的に読み込んで、内容を変更すると、実際にWEBページでどう見えるか、FireFox上にリアルタイムに表示してくれる。編集が終わったら、CSSをセーブして、サーバにアップするなどご自由に。
ColorZilla - Firefox Extension
こちらは、WEBページ上のすべての色をカラーピッカーで取得可能。すでにあるページと同じような色調で、新しいCSSデザインを指定したい時などに便利。選んだ色は、CSSの書式でコピー＆ペーストできるので、上記WEB DeveloperのCSSエディタにコピーすれば、その場で見た目を変更しながらチェックできる。
最後に、これも地味ながら便利。最終的にブラウザがレンダリングしているHTMLソースを表示してくれる物で、Javascriptバリバリのページなどの出力結果を確認するのに便利です。
ブックマーク & はてなスター
コメント
Web Developerの存在こちらで初めて知りました。
CSS編集、入れ子構造視覚的に表示などが便利すぎます。便利なツール紹介ありがとうございます。