Blog

ウェブデザイン確認ツール「Web Developer」

2016.09.06Cat:ソフト・ツール 役員
スクリーンショット_H28_09_06_14_21

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

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

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

何故Firefoxなのか

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

スクリーンショット_H28_09_06_14_21

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

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

便利機能抜粋

altを表示

越境EC|システム開発|スターフィールド株式会社

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

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

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

フォームの情報を表示

お問い合わせ CAT S EYE

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

その他

越境EC|システム開発|スターフィールド株式会社_と_Downloads

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

まとめ

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

Author Profile

mezaki
mezaki
スターフィールド株式会社/代表取締役/副社長/EC/レスポンシブWebデザイン/Web制作/システム開発/lamp/.net/1985年生/2008年早大卒/西東京市/ひばりが丘/新宿区/高田馬場/江戸川区/瑞江/B級グルメ/料理/自作PC/熱帯魚/MBA11/ipad3rd/iphone4
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ