Web Developerは今更紹介するのも気が引けるアドオンですが、活用し始めてから作業効率があがったので改めて紹介します。
いつもお世話になってます。

Web DeveloperはFirefox（とChrome）のアドオンです。
要素の情報を引き出したり、指定した要素を枠で囲ってくれます。
コーディングデータのクオリティチェック作業ってなかなか時間がかかるんですが、それを補助してくれるアドオンです。

勧められるがままに導入したアドオンですが、使ってみるとなかなか便利でもう手放せません！
最近バージョンアップしたことにより強制的に英語化し、Web Developerが頼れるやつだったと再認識しました…（日本語に戻す方法は最後に紹介します。）

どんなことができるのか

このアドオンは多機能で様々なツールがあるのですが、正直使い切れません。
そこで個人的によく使う機能をピックアップして紹介します。

画像

画像＞alt属性値を表示する
画像のaltの中身を表示してくれます。
画像のすぐ横に表示されるので、視線をあまり動かさずに見比べられるのが嬉しいですね！

画像＞画像を枠で囲う＞altがない画像
alt自体がない画像を探そうと思うとなかなか手間ですが、これだとページ流し見すれば終わりです！

画像＞画像を枠で囲う＞width,height属性がない画像
alt同様なので以下略

画像＞画像を枠で囲う＞幅と高さが調整された画像
width、heightの値が実画像の値と違うものを摘出できます。

リンク

情報＞リンクのパスを表示する
もう目線がナビゲーションバーとカーソルの間を行ったりきたりしなくても大丈夫！

枠表示＞リンクを枠で囲う＞title属性のないリンク
リンクのかかっている要素が枠で囲われます。
リンクをかけるつもりのなかった要素に間違ってかかっていたり等、見落としがちなものを目視で見つけやすいです。

枠表示＞任意の要素を枠で囲う
デフォルトでリンクを囲うものがなかったので更に条件を指定していますが、ここで入力欄にaと入れてあげれば指定の枠で囲われます。
liやh1等あらかじめ設定しておくと便利ですね。

JavaScript

無効化＞JavaScriptを無効にする＞すべてのJavaScript
JavaScriptが機能していない環境下でどのような挙動や表示になるのか確認することができます。

ソース＞実行結果を反映したソースを表示
JavaScript等を使っているページで元のソースとこの操作によって出たソースを比較すると、なにか解決するかもしれませんね。

プロパティ

情報＞要素の情報を表示する
これめっちゃ便利です。
十字になったカーソルを知りたい要素の上でクリックすると、その要素の情報が一覧で出ます。
フォントサイズいくつだろう、要素の幅いくつだろうといった場合にとりあえずこれ。
デフォルトのショートカットキーがCtrl+Shift+Fなので、とりあえずこれ。

ここで紹介したものは、Web Developerの機能のほんの一部です。
機能一覧は以下のサイトで見ることができます。（バージョンによっては機能の増減があるのでご了承ください）

『Web Developer 1.1.8 日本語版』の機能一覧【ミナトラボ】

最新バージョンが英語…

冒頭でも触れましたが、つい最近1.2.1にバージョンが上がって、言語が英語になってしまいました。
こちらの記事参考にダウングレードできましたので、自己責任で試してみてください。

Web Developer勝手に英語化したものを日本語に戻す【適当な備忘】

まとめ

最新版のWeb Developerは以下です。
Firefoxアドオン
Chromeエクステンション

リアルタイムにhtml/cssの属性値を変えたり、JavaScriptによるソースの変化を見るにはFirebugsの方が扱いやすいですが、クオリティを向上する点においてはWeb Developerが効果を発揮します。
用途に合わせて使い分けるのが理想ですね。

Web Developerのほんの一部の機能しか使っていなかったのですが、今回このブログを書くにあたって新たな機能を見つけられたので今後もっと活用していきたいです。
このWebフォントでWeb Developerって読むと舌噛みそうですね