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

CSS

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

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

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

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

firefox-11-3d-view-any-websites
しかしこの機能はFirefox Ver 47.0から廃止されました。便利な機能だったので残念です。

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

Google Chrome拡張機能「Pesticide for Chrome」

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

chrome_%e3%82%a6%e3%82%a7%e3%83%95%e3%82%99%e3%82%b9%e3%83%88%e3%82%a2_-_%e6%8b%a1%e5%bc%b5%e6%a9%9f%e8%83%bd

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

chrome_%e3%82%a6%e3%82%a7%e3%83%95%e3%82%99%e3%82%b9%e3%83%88%e3%82%a2_-_pesticide_for_chrome

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

yahoo__japan_%e3%81%a8_%e3%83%86%e3%82%99%e3%82%b9%e3%82%af%e3%83%88%e3%83%83%e3%83%95%e3%82%9a

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

yahoo__japan

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

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

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

 

 

 

コメント

タイトルとURLをコピーしました