コーダーが作ってくれたウェブページを確認するのに、今まではChromeの「要素を検証」を使うことが多かったのですが、はるかに効率化が出来るツールを教えて頂きました。

教えて頂いた方は、日本でも有数の制作会社様で時には何千ページにも及ぶ大規模サイトを作って来た会社さんで同時に何千ページのチェックをしてきたことで圧倒的なノウハウを構築されていました。

「要素を検証」や「ソースを表示」するだけでは、不十分でチェックをするには、Firefoxの拡張機能その名も「Web Developer」です。

何故Firefoxなのか

chrome版でも同じ作者が「WebDeveloper」を公開していますが、Firefoxのみツールバーを追加することが出来ます。

ツールバーがあるかないかでこれまた作業効率が一段と変わります。

余談ですが、chromeが出る前からWebの仕事をしている方ってFirefoxの根強いファンが多い気がします。

便利機能抜粋

altを表示

こんな感じで画像に隣接する場所にaltを表示してくれます。

altってブラウザ表示しているだけでは見えないので見落としがちになるので本当にありがたいです。

他にも幅や高さを表示したり、パスを表示したり、ファイルサイズを表示したりといったソースを見なければ分からないことが画面上に表示できます。

フォームの情報を表示

もう一つチェックする上で時間を要すものがフォームですが、これもいろいろな操作が出来て、フォームの情報を画面内に表示したり、チェックボックスを外したりといったことが出来ます。

その他

チェック用途ではないですが、そもそもWebDeveloperの機能として、CSSファイルをブラウザ内で閲覧、編集したり、様々なブロック、要素の情報を表示することが可能です。

まとめ

普段使いは変わらずChromeを使いつつチェック検証用のブラウザとしてFirefoxが決まりました。