Web制作に使えるChromeの拡張機能まとめ

Web制作

 

今や日本でもトップシェアのWebブラウザ、「Google Chrome」。

 

特にWeb制作を行う方なら、検証機能が便利なためChromeを使っている方は多いと思います。

今回はそんなChromeの使用を更に便利にする、Web製作者向けの拡張機能を紹介していきます。

 

Clear Cache

ページ内のキャッシュを1クリックで削除します

サーバー上でコーディング作業を行っていると、キャッシュが残っていてHTMLやCSSが反映されないことが度々あります。

 

ブラウザの機能からキャッシュを削除することも可能ですが、1クリックでキャッシュを消せるこちらの方が作業効率が段違いです。

個人的に、コーディングを行うならば必須のツールです。

 

ColorPick Eyedropper

選択した場所のカラーコードがわかる拡張機能です

拡張機能を起動して、調べたいところにマウスを乗せるとその場所のカラーコードとRGB値がわかります。

 

デザインで使われている色を正確に知りたいときに役立ちます。

 

FULL Page Screen Capture

表示しているページを全てキャプチャしてくれます

通常だとパソコンのスクリーンの範囲までしかキャプチャできませんが、この拡張機能はページの一番上から一番下までを一枚の画像にしてキャプチャしてくれます。(あまりにも長いページは分割されます)

 

LPなど、縦に長いページの模写コーディングを行いたいときに最適なツールです。

 

Image Downloader

ページ内の画像を全て一括で保存してくれます

模写コーディングで素材を抜き取りたいとき等に使えるツールです。

 

ただし、bakcgroundに指定されている画像は保存してくれないので手動で保存する必要があります。

 

What Runs

ページ内のCMS、スクリプト、プラグイン、フォント等の情報を調べることができる拡張機能です

WordPressの有無やフレームワーク、プラグインがなんだろう?と思ったときに1クリックですぐ調べられます。

 

Wappalyzer

WhatRunsと同系統の拡張機能で、こちらも1クリックでページ内のCMSやフレームワークを表示してくれます

 

情報量はWhatRunsの方が圧倒的に多いのですが、Wappalyzerは拡張機能のアイコンが表示しているページのCMSやフレームワークを表してくれるメリットがあります。

表示される内容も若干ですが異なるので、気になった方はダウンロードしてみてはいかがでしょうか。

 

WPSNIFEER

表示されているページのWordPressテーマを1クリックで調べることができます

先程紹介したWhatRunsだとテーマまではわからないので、そこまで知りたい方向けの拡張機能です。

 

ちなみに、サイト内で使用されているプラグインによってはこの拡張機能が動作しないことがあります

(当ブログではなんらかのプラグインが影響してるため機能していません。プラグインを全て停止したら動作しました。)

 

ato-ichinen

表示されている検索結果を、1年以内のものだけに絞り込む拡張機能です

設定を変えることで、1ヶ月以内や1週間以内、任意の期間などのフィルター設定も可能です。

 

Web系は検索することが多いので、古い情報が邪魔だな・・・と思ったときに使えますし、普段遣いにも役立つ拡張機能です。

 

おわりに

色々紹介しましたが、人によって用途が異なると思うので本当に必要そうなのだけ入れるのをおすすめします。

拡張機能を入れまくると、Chromeの動作が重くなるので・・・。

 

個人的に、特におすすめなのは「Clear Cache」です。1クリックでキャッシュを消せるのはほんと便利。

Chromeをメインに使っている方はぜひ参考にしてみてください。