Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!

Article views154 VIEW

WEBを制作している方が使用しているブラウザは、ほとんどがGoogle ChromeかFirefoxだと思います。

製作中に「あれ?なんか横幅がおかしい・・・?スマホで右端に空白が出てるぞ・・・?」なんて事たくさんありますよね。

そこでブラウザに搭載されている要素の検証でどこがおかしいか調べますが、いかんせんパッと見ではわかり辛く、エラー部分を探すのに時間がかかってしまいます。

過去にはFirefoxに3Dビューというものがあり、各コンテンツをビジュアル化してくれる優れた機能がありました。

Firefox 11 3D View any Websites - Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!
しかしこの機能はFirefox Ver 47.0から廃止されました。便利な機能だったので残念です。

その代わりとなる機能を探した結果、Google Chromeの拡張機能を発見しました。

Google Chrome拡張機能「Pesticide for Chrome」

Chromeウェブストアから「Pesticide for Chrome」を検索します。

Chrome ウェブストア   拡張機能 1024x577 - Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!

検索結果の「Pesticide for Chrome」をChromeに追加します。

Chrome ウェブストア   Pesticide for Chrome 1024x394 - Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!

追加したらブラウザに虫のアイコンが増えます。

Yahoo  JAPAN と デスクトップ 1024x625 - Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!

虫のアイコンをクリックすると

Yahoo  JAPAN - Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!

この様に各要素の横幅をビジュアル化してくれます。

この機能のおかげでレスポンシブの確認もすごくはかどりました。

これはWeb製作者必須の拡張機能です!みなさんも使ってみてはいかがでしょうか?

 

 

 

Pocket
pinit fg en rect gray 28 - Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!
line88x20 - Chrome拡張機能「Pesticide for Chrome」はWeb製作者必須ツールだ!
[`evernote` not found]

Posted in CSS

Leave a Comment

CAPTCHA