ライセススタッフが書くブログ。

デバッグ作業を補助してくれるブラウザの拡張機能「Web Developer」

| Web制作のこと
デバッグ作業を補助してくれるブラウザの拡張機能「Web Developer」

入社2年目になり、1年目よりは少し気持ちに余裕が出てきたので、

そろそろ自分が効率的に作業を行えてるのかを見直す際に調べてたらWeb Developerを発見しました。

 

Web Developer

今更紹介するツールではないですが、使い始めて便利と思いましたので改めて紹介します。

・Google Chrome、FireFox,Operaの拡張機能

コーディングする際に表示や動作はユーザーの閲覧環境によって変化し、様々な状況を想定してテストを行う必要が出てきます。その様々の状況をワンクリックで簡単に再現できるツールがWeb Developer。

 

Web Developerには様々に機能がありますが、

今回は個人的に便利と感じたツールを紹介します。

 

インストールしますと右上に歯車のアイコンのボタンが追加されます。

クリックしますと、閲覧しているぺージに機能が適用されます。

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/

その他にも様々な機能がありますが、今の所は上記の機能で十分効果発揮してますので、

順に使いこなせればと考えてます。




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る