Web制作に使えるFirefox拡張機能9+1

/web/tool

Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。

Sig.がメインで使っているのブラウザはOpera。なのでFirefoxは制作ツールとして使ってます。サイトの解析とか、エラーチェックとか表示確認。Operaにも便利なWidgetはたくさんありますが、諸々の動作確認も考慮するとFirefoxのほうが効率が良かったりします。閲覧用と制作用に分けたほうがさっぱりする、てのがデカいけど。

今日はそんなFirefoxから普段使っている拡張機能を紹介します。

Web Developer
Web制作者向けの開発補助ツール。まあ、基本ですね。CSSの無効化、class/id名の表示、ブロック要素の枠線表示、HTMLの検証... などなど。
View Source Chart
HTMLソースを見やすく階層表示してくれるツール。複雑な<table>コーディングなどのソース読解に便利。
User Agent Switcher
FirefoxのUser Agent名を偽装する拡張機能。主に携帯サイトの確認などに使用してます。
Sage
FirefoxにRSSリーダーを追加する。
Pearl Crescent Page Saver
(画面に収まらない部分も含めた)サイトの完全なスクリーンショットを撮影する。
CSSViewer
(親要素の継承も含めた)CSSの適用状況を表示できる。
Firebug
カユいところに手が届くデバッグ・ツール。ソースの表示およびリアルタイム編集と確認。DOMの表示。通信時間のレポート。エラー位置の特定など。
Font Finder
右クリックから、選択したテキストのフォント情報を確認できる。
はてなブックマークカウンタ
表示しているページのはてなブックマーク数を確認できる。
All-in-One Sidebar
通常はダイアログや別ウィンドウに表示される機能を、サイドバー内で表示できるようにする。

蛇足

ちなみに起動時間やページ表示速度で見ると、Firefoxは意外と重い。中でもメモリを大量消費する仕様は有名で、放っておくと異常なほどのメモリを消費し、重くなったりフリーズしたりする。そしてブラウザ最速はOpera

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。

2 Comments

road wrote:
デバッグとかだとやっぱり多彩なエクステンションのあるFxは便利ですよね。ご存知かも知れませんがいくつかお勧めのエクステンション挙げさせていただきます。

HTML Validator
http://users.skynet.be/mgueury/mozilla/
そのまんまです。Firebugみたいにアイコンで一目でわかるのでHTMLのバグ潰しに効果的です。

OperaView / IE Tab
http://operaview.mozdev.org/
http://ietab.mozdev.org/
ブラウザの切り替えなどで。

最近はPHPばっかりですが、身近にCSSのすごい人がいるので色々勉強になります。うーむ、奥が深いです。。。 2007–02–24 22:06
Sig. wrote:
お~ソースありがと。
「聞いたことはある」程度だったので^^b

他人のソースの修正を依頼された場合、問題を起こしているのは大抵はHTMLの構文エラーだったりします。の閉じ忘れなんかは、慣れてても良く見落としたりするので、初期に気付けないと泥沼です。
俺はOperaの右クリックからHTML検証してますね~。

CSSは「できる」て人は意外にいないけど、やってることは簡単なので、自動化の進む昨今、コーダとしては凄く焦ってたりします。プログラマのがよっぽど凄い... 2007–02–25 15:43