FirefoxのWeb制作向けアドオンまとめ

#Web制作の効率化に使えるFirefoxアドオン

メインブラウザは長らくFirefoxを使ってます（と言っても6年くらい）が、
そのなかで使い続けてるWeb制作に有用なアドオンだけを厳選して紹介したいと思います。
また、Firefoxの開発ツールについてもちょっとだけ書きたいと思います。

##テキスト操作系

###Copy Fixer
https://addons.mozilla.org/ja/firefox/addon/copy-fixer/

ブラウザ上で何も選択してないときにCtrl+Cを押すと、ページのタイトルとurlが同時にクリップボードに保存される。
以下のような形式でコピーすることができ、簡単にURLの共有ができます。

Copy Fixer

ホーム - Qiita
http://qiita.com/

Qiitaのトップページで行うとこんな感じでコピペが可能です。

###CoLT
https://addons.mozilla.org/ja/firefox/addon/colt/

リンクのテキストやURLを簡単にコピーすることができます。
ブラウザ上で選択してコピーすると単純に選択しづらかったり、余計な改行やテキストが含まれたり、テキストが全部コピー出来てなかったり、誤ってクリックして画面遷移したり...なんてことがありますがそういった煩わしさから開放されます。

例えば画像のスライス名を決める際、翻訳サイトで英訳してコピーしたい場合はこんな感じでササッとコピペが可能です。

ちなみに、CoLTでもCopy Fixerと同じようにページのタイトルとurlを同時にコピーすることが可能ですが、2段階式のコンテキストメニューから選択が必要なためCopy Fixerのほうが断然速いです。
しかし、CoLTでは貼り付けする際の形式を編集可能という利点があるので、用途に応じて使い分けるのがいいかもしれません。

CoLT

<a herf="http://qiita.com/">http://qiita.com/</a>

CoLTでは貼り付けする際の形式を編集できるので、上記のようにタグにして張り付けたりもできます。

##デバッグ系

###Web Developer
https://addons.mozilla.org/ja/firefox/addon/web-developer/

言わずと知れたWeb開発ツール。
キャッシュ・Cookie・JSの無効化、画像のaltや高さ幅の確認、各種エラーチェック、css非表示など各種チェックが簡単に行える。

###Html Validator
https://addons.mozilla.org/ja/firefox/addon/html-validator/

W3CのMarkup Validation Serviceで検証できる
最近のFirefoxのバージョンアップでソースがタブ内に表示されるようになってから、Html Validatorが機能しなくなったが
configから外部ウィンドウ表示に戻すことで従来通り使用することが可能。

###Pinger
https://addons.mozilla.org/ja/firefox/addon/pinger/

閲覧ページのリンクチェックが可能です。
チェック後にレポートが表示されるので便利。

###Wappalyzer
https://addons.mozilla.org/ja/firefox/addon/wappalyzer/

Webページで使用している技術を簡単に確認ができる。
Apache、PHP、jQueryなどの代表的な技術から、Bootstrapなどのフレームワークまで...割りと何でも確認できる。
ちゃんとページにjQueryやGoogle Analyticsのコードが挿入されているかなどが
ひと目で分かるのでチェッカーとしても活用できる。

##効率化系

###Open With
https://addons.mozilla.org/ja/firefox/addon/open-with/

現在見ているページを他のブラウザで開ける。
Browser-Sync等のライブリロード系プラグインの登場で、これがあると益々便利に。

###Site Launcher
https://addons.mozilla.org/ja/firefox/addon/sitelauncher/

ショートカットキーだけでWebページにアクセスできる。
かなりの数登録が可能。

###Customizable Shortcuts
https://addons.mozilla.org/ja/firefox/addon/customizable-shortcuts/

ショートカットキーのカスタマイズができる。
アドオン等によってショートカットキーが競合した場合の解消に便利。
よく使う開発ツールのインスペクタをF1とかに設定するとラク。

##その他

###Evernote Web Clipper
https://addons.mozilla.org/ja/firefox/addon/evernote-web-clipper/

WebページをEvernoteに簡単にクリップできる。

###feedly
https://addons.mozilla.org/ja/firefox/addon/feedly/

情報収集にfeedly使ってる人はどぞ。

###Just Restart!
https://addons.mozilla.org/ja/firefox/addon/just-restart/

ショートカットキーだけでFirefoxの再起動が可能。
標準で再起動がないので意外と便利。

##使ってたけど使わなくなったアドオン

ここからはURLの掲載を省きます。

###Firebug
FirefoxのWeb開発ツールで代用できるようになった。

###ColorZilla
FirefoxのWeb開発ツールで（ry

###Pearl Crescent Page Saver Basic
FirefoxのWe（ry

###FireMobileSimulator
ガラケー対応がほぼなくなった。

###FireGestures
StrokesPlusで事足りるので不要になった。
Chromeのマウスジェスチャも同様。

###Pixel Perfect
Firebugを使わなくなったのに加え、わざわざPixel Perfectしてる暇があったら
ページ高速化とか、CSS設計見直したりとか、スタイルガイド作成とか...
もっと優先的にやるべきことがあるんじゃね？と正直思ってしまうので。

##Web開発ツールについて
以前、デバッグツールにはアドオンのFirebugを使用していましたが、
ここ1年ぐらいからは、Web開発ツールを使うようになりました。
理由としては、ほぼFirebugと遜色なく使える上に、プラスアルファで便利機能があるからです。

###インスペクタ

Firebugとほぼ同じように使用可能で、上下キーで値の増減とか、プロパティ打ち込む際の補完機能もある。
::before,::afterが選択しやすく、:hover,:active,:focusのスタイル設定も可能。

###パフォーマンス

Chromeと違い、ページをリロードで自動的に計測開始してくれない。
JSフレームチャートが何か見づらいのが玉に瑕。計測しまくってるとたまにフリーズする。

###コンソール

フィルタもあるし見やすい。よくわからんがたまに重くなる。

###スタイルエディタ、デバッガ、ネットワーク

見やすく、使いやすい。
特に問題なし。

###スクラッチパッド
直接JSのコードを打ち込みページ内で実行することが出来る。

###ルーラー
半透明のルーラーを表示できる。

###スクリーンショット
ページ全体をキャプチャできるうえに可逆圧縮のpngで出力してくれるので、
アドオン「Pearl Crescent Page Saver Basic」の代替として使える。

###カラーピッカー
画面上の色をカラーコードで取得できる。
アドオン「ColorZilla」の代替として使える。

##何故Firefoxをメインで使うのか

Firefoxと同じく優れたWeb制作系のアドオンがあるブラウザにChromeがあります。
一時期、パフォーマンスが高速のChromeに乗り換えようと思っていた時期もありましたが、
2014年に脆弱性が最も多く存在したソフトウェアランキング1位に輝いてしまったので辞めました。
（Firefoxも6位ぐらいにランクイン／(^o^)＼）

ただし、Developer Toolsのデバイスのエミュレーションは超絶使えるので
もっぱらChromeはスマホやタブレット表示確認用としてサブで使ってます。

ぶっちゃけ使い慣れてるからというのが大きいです。
特に不満もないですし、ブラウザとしてのパフォーマンスもそこそこありますからね。
あとはフォクすけが可愛い！これに尽きる。(｀・ω・´)