うじゃうじゃとあるChromeの拡張機能の中で
私が使用してるWeb製作に便利な拡張機能をまとめました。

ページ全体のスクリーンショットが撮れる！「Fire Shot」

「Fire Shot」

WEB製作はもちろん、それ以外の状況でもサイトのスクショを
取りたい状況はあると思いますが、そんなときにはこの拡張。

サイト全体をキャプチャ、見えている部分のみキャプチャ、
選択しているキャプチャといろんなパターンに対応できます。

注意点は、サイト全体をスクショするときに、Chromeの表示倍率が
「100%」でないと正確なサイズのスクショが取れないので、
スクショを撮る前に100%表示にしておきましょう。

これと同じようなスクショ系の拡張はたくさんあるのですが、
他のは英語だらけなのに、この拡張は日本語対応されているので、
英語アレルギーの方も安心して利用できます。

CSSの内容の確認に便利「CSS Peeper」

「CSS Peeper」

WEBサイトのCSSを確認したいとき、デベロッパーツールを使って
確認してると思いますが、正直あれって打ち消されてるCSSとかも
うじゃうじゃあって見にくいですよね。
もっと必要なところだけ簡単に見られたらいいのに・・・
そんなときにおすすめなのがこの拡張!

この拡張を使うと選択した要素に現在適用されている
サイズやフォントの情報や色などのCSS情報が見やすく表示されます。

サイトの色を簡単に調べられる「ColorZilla」

「ColorZilla」

先ほど紹介した「CSS Peeper」を色のみに特化した拡張。
ただこの拡張のすごいところはCSSで指定した色だけでなく
画像の色もブラウザ上で簡単に確認できちゃいます。

さらにサイトの配色の割合も表示したりもできるので、
色の確認をしたいときには非常におすすめです。

フォントの詳細を確認「WhatFont」

「WhatFont」

先ほど紹介した「CSS Peeper」をフォントに特化させた拡張。
機能面では特に「CSS Peeper」よりもいいところはあまりないのですが、
動きが軽いのでフォントだけ知りたいときはこちらをおすすめします。

様々なブラウザの確認が1度にできる「Multi-browser Screenshots」

「Multi-browser Screenshots」

この拡張を使用すると、chrome、ieなどの様々なブラウザの
様々なバージョンの表示を1度に表示させることができます。
ただし、画像として表示されるので詳細なサイズ等は確認できません。

サイト分析に最適「SimilarWeb」

「SimilarWeb」

競合サイトの調査やアクセス順位を調べたいときなどに
この拡張機能を使えば、いつでも１クリックだけで、
そのページの分析をすることができます。

ワンクリックでキャッシュを削除できる「Clear Cache」

「Clear Cache」

ツールバーの拡張機能ボタンを押すだけでキャッシュを削除することができます。
古いキャッシュが残っているせいでWebページの表示が崩れたりする場合に役立ちます。

キャッシュだけでなく、アプリケーションのキャッシュ、Cookie、閲覧履歴、
ダウンロード履歴、自動入力フォームのデータなどを同時に削除するように指定したり、
削除対象となる期間を変更することもできます。