【エンジニア・開発者向け】Chromeで使える拡張機能おすすめ9選!!

この記事を見ているということは、日々の開発をもうちょっと便利にしてくれるものがあったらいいのにと思っているのではないだろうか。できれば快適にスイスイとキーボードをカタタタターンッッとコードを連ねていきたいでしょう。

そんな君に今回はChromeの拡張機能の中でも開発を手助けしてくれるようなものを紹介したい。ただ残念かな、便利なものはその便利さゆえ、有名なものも多いだろう。もしかしたら知っているものも多いと思うが、何かしら君の今後の開発を助けてくれるものが見つかるかもしれない。では見ていこう。

開発時におすすめのChrome拡張機能9選

CSS Viewer

CSS Viewerはその名の通りCSSを見ることのできる拡張機能で、アイコンをクリックしてからみたい部分をクリックするとこんな風にその部分のCSSを見ることができる。

font-familyたfont-size、background-colorやword-spaceingなどなど。transformやtransitionなどが出てきるのもいいですね。要素の検証からもCSSは見ることができるけど、やっぱり拡張機能使った方が圧倒的に見やすい

ボタンをぽちぽちすればオンオフを切り替えることができるんだけど、ショートカットキーで行うこともできますね。

  [f] Freeze/Unfreeze the widget in place,
  [c] Shows selected element simpleCssDefinition on a modal, and
  [esc] Disable the viewer.

すごいのがCSSを簡単にコピーできるところで、見たいCSS部分でCキーを押すとその部分のCSSが表示される。

コピーしたものを貼り付けてみるとこんな感じで、普通にCSSとして使えそう。

クリックするだけでこれができてしまうのはなんか怖いですね。Chromeの開発者ツールでぽちぽちいろんな要素を見てやっている人はCSS Viewer使うと作業がもうちょっと楽になるかもしれない。フロントエンド好きな人は入れておいた方が便利そうだぞ。

ColorZilla

カラーピッカーの拡張機能ですね。便利だからあった方が良いと思うけれども別にColorZillaじゃなくても別のカラーピッカーでもいいと思う。ColorZillaはマウスでホバーするとその部分の色をこんな風に表示してくれる。

クリックするとその色をコピーしてくれますね。

これはカラーコードでコピーしてくれているけど、拡張機能の詳細から設定を変更することでhslやrgb()表記にしてくれる。

よく使うのはカラーコードだと思うからそのままでいいと思うけど、他のもので表示して欲しかったら設定を変えてみるといいね。それとColorZillaは過去取得した色の履歴を参照することができる。

いろんな色を参照しつつ何か作業したいときや、過去の良い感じの色を参考にしたい時なんかに使うと良さそう。

履歴からならカラーコードだけじゃなくて、rgb()やhsl()といった表記でも色を取得することができますね。

ClearCache

ClearCacheはその名の通りキャッシュをクリアしてくれる拡張機能。拡張機能を使わなくてもcommand + y(Windowsだとctrl + yかな)を打って閲覧データの削除からキャッシュを削除することはできるけど、なかなかの面倒さ。

キャッシュ削除を手軽にやってくれるのがClearCacheなんだけど、インストールして追加されたアイコンをクリックするとキャッシュを削除してくれる。

いつまでの期間のキャッシュを削除してくれるの?っていうところなんだけど、これは設定から確認することができてデフォルトだと1時間になっていますね。

その他にキャッシュ以外に削除する項目を含めることもできる。

何か頻繁に消したいものがあったらチェック入れてもいいけど、うーん別にCacheだけでいいんじゃないか感がある。それと一番上の[Automatically reload active tab after clearing data]にチェックを入れると、ClearCacheのアイコンをクリックしてキャッシュを削除したらページのリロードが走るようになります。

何か開発しているとCSSが反映されねえ!画像が変わらねえ!とか幾度も経験すると思うので、そういう経験がある人はキャッシュ系の何かは入れておいた方がいいかも。

Click&Clean

Click&CleanはClearCacheと同じようなものでボタンをクリックすると、キャッシュや履歴を削除してくれる。

いろんなボタンがあるのは見てわかる通り、ボタンによってできることが違う。

chrome store

でまあ色々機能があるよっていうところで便利なんだけど、個人的にはこの拡張機能の良いところはChromeを閉じたときにデータを削除できるところだと思う。設定項目が色々あるんだけど、[Chromeが閉じるとき、個人データを削除]にチェックを入れるとChromeと閉じた時に発動してくれる。

キャッシュされた画像やファイルを削除してくれるから、Chrome閉じた時に自動で消してほしいっていう人は試してみるといいかも。

OctTree - Github code tree

OctTreeはGithubで力を発揮してくれる拡張機能で、インストールするとこんな感じでGithubでリポジトリを見ると左側にOcttreeのマークが出てくる。ここにマウスをホバーするとリポジトリのディレクトリ構造がバアアアアって表示される。

Githubっていちいちクリックしてフォルダの中見て・・・ってやんないといけないから面倒だけど、こういう風に表示してくれたら結構ありがたいよね。

それと登録しないと使えない機能だけど、ファイル検索したりブックマークしたりっていうこともできる。Youtubeの動画でどんなことができるのかは分かりやすいから使っている人も使ったこのない人も一度目を通してみるといいです。

使いこなすとGithubの使いやすさ変わってきそうですよね。ファイルを検索してタブのようにしてみることができるのはかなり便利でしょう。

WebMaker

WebMakerはすぐさまHTML・CSS・JSを試すことのできる拡張機能。Chromeに表示されるアイコンをクリックするとHTML・CSS・JSを書くことのできるページに飛ぶ。

ここに色々書くことができるんだけど、サクッと試す時なんかには便利だね。

Libraryの追加なんかもできるから、何かライブラリを使って試したい時には追加して使ってみるといいと思います。

拡張機能使わないでもCodePenやJsFiddle使って試すこともできるけど、それよりもサクッと試したい時に使える。

ただまあうん、書いておいてなんだけどCodePenとかでいいんじゃないか感もある。

Wappalyzer

WappalyzerはそのWebサイトでどんな技術が使われているのかを表示してくれる拡張機能。使っているCMSや言語、データベースとかが分かってしまう。

これすごいですよね、Webサーバーやデータベースまでわかってしまうのは怖いね。色々表示されるサイトとそうでもないサイトがあるな、Youtubeだと3つしか表示されん。

YoutubeはPolymerとHammerとか出てきますね。Polymerってどうなんだろう、Youtube使っているならちょっと気になってしまう。Wappalyzer入れるといろんなWebサイト見るのが楽しくなりますね。結構色々出てくるの多いから、あのサービスどんなの使っているんだろう?って気になったら使ってみると新たな発見があるかもしれない。

それとこの拡張機能にはPRO版があるんだけど、それを使うと企業情報とかをみることができるみたい。(MORE INFOのタブ)

料金はまあそれなりにしますね。

無料でも色々しれて面白いけどなあ。このサービスこんな技術使っているんだあ・・・っていうのが分かるとなんかこういいよね。ちなみに表示されるリンクをクリックすると、その技術が使われている上位サイトなんかもみることができる。

なかなか面白い。ちなみにWappalyzerはGithubでコードを見ることができるからどんな風に判定しているのか知りたかったら覗いてみるといいかもね。

Developer Tools

開発しているときにそれを手助けしてくれるものとして、ライブラリなんかのDeveloperToolsを入れておくと色々便利だったりする。例えば、React Developer ToolsVue.js Devtoolsなどがそうですよね。

例えばこんな風にVueならdataの確認なんかをすることができる。propsをみたり要素を見たり色々できるから開発する時にはそういったツールがないか調べてみるといいです。ReactやVueを使った開発をするなら結構必須な気がする。

JSON Formatter

JSON FormatterはJSONを綺麗に整列してくれる拡張機能。ブラウザでGETのAPI叩いて見てみるとJSONが文字の羅列になっていて地獄の醜さになっていますよね。それをシュッと、jqコマンドを使った時のように綺麗にしてくれる。

JSON Formatter

こんな風に綺麗に表示してくれるんだけど、インストールしたら特に何もする必要はない。拡張機能をONにすれば使える。APIをよく使う人はこういうの目にすることが多いから自動で整形するようにしておくと便利かと思います。

まとめ

いくつか開発時に使える拡張機能を紹介したけど、結構使っているものが多かったでしょうか。今回紹介したものは以下の9つ。

  • CSS Viewer
  • ColorZilla
  • ClearCache
  • Click&Clean
  • OctTree - Github code tree
  • WebMaker
  • Wappalyzer
  • Developer Tools
  • JSON Formatter

君がどういった開発をするかはわからないけど、何か使えそうなものがあったら試してみるといいかもしれない。個人的にはWappalyzerがなかなか面白い。サイトがどういった言語やフレームワークでできているか見れるのは楽しいぞ。

関連記事

見てくれてありがとう、Chrome関連で少しだけ関連記事を置いておきます。

これは作業で使えるChromeの拡張機能を紹介している記事。開発とは関係ないけど、普段使いに使える拡張機能があるかもしれない。

この辺りはプライバシーを守ろうということで、そういうことを行う拡張機能や設定を紹介しています。僕らの情報ってかなりとられていますからね・・・

おすすめの記事