デバッグ作業を補助してくれるブラウザの拡張機能「Web Developer」
入社2年目になり、1年目よりは少し気持ちに余裕が出てきたので、
そろそろ自分が効率的に作業を行えてるのかを見直す際に調べてたらWeb Developerを発見しました。
Web Developer
今更紹介するツールではないですが、使い始めて便利と思いましたので改めて紹介します。
・Google Chrome、FireFox,Operaの拡張機能
コーディングする際に表示や動作はユーザーの閲覧環境によって変化し、様々な状況を想定してテストを行う必要が出てきます。その様々の状況をワンクリックで簡単に再現できるツールがWeb Developer。
Web Developerには様々に機能がありますが、
今回は個人的に便利と感じたツールを紹介します。
インストールしますと右上に歯車のアイコンのボタンが追加されます。
クリックしますと、閲覧しているぺージに機能が適用されます。
部分の一部の機能を抜粋してます。
メニュー【Images】
・Display Alt Attributes alt属性値を表示
・Display Image Paths 画像バスを表示
・Hide Background Image 背景画像を隠す
・Hide Image 画像を隠す
・Outline All Images 画像をアウトラインする
・Reload Images 画像のみをリロード
・View Image Information 別タグで開きそのぺージの画像の詳細が見れる（画像パス・width・height・alt）
・Replace Images With Alt Attributes 画像を隠しalt属性値を表示
Replace Images With Alt Attributesをクリックをする前
Replace Images With Alt Attributesをクリックした後
【Resize】
ウィンドウサイズ変更、サイズをカスタマイズする事も可能
View Responsive Layouts レスポンシブ レイアウトを確認
【Information】
View Color Infotmation サイト内で使用されているカラーを一覧表示してくれる機能
View Link Information リンクを一覧表示
とてもシンプルでわかりやすいく、以上の機能のみでもかなり効率が上がる気がしました。
興味のある方はこちらからダウンロードできます。
https://chrispederick.com/work/web-developer/
その他にも様々な機能がありますが、今の所は上記の機能で十分効果発揮してますので、
順に使いこなせればと考えてます。
