【初心者向け】Web開発をするなら絶対入れておきたいChrome拡張機能11選

Web開発に便利なChrome拡張機能を紹介しています。現役エンジニアはもちろん、非エンジニアでもWeb開発に興味がある人は入れておくと非常に便利に感じるはずです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

これからエンジニアを目指す人や、普段はディレクターとして働いている人向けにWeb開発で便利なChrome拡張機能をまとめています。

エンジニアやデザイナーと一緒に仕事をしている人には、業務効率の上がるものが多いので、Chromeに追加しておくと良いでしょう。

 

また、オンラインのプログラミングスクールTechAcademyでは、未経験でもプログラミングを習得することが出来ます。

 

ato-ichinen

スクリーンショット 2016-03-16 14.05.57

Google検索の結果を1年以内に絞り込みすることができます。

プログラミング言語のバージョンが変わってからの結果だけ見たいという時に利用できます。デザインのトレンドやプログラミングの最新情報はよく変わっていきます。出来るだけ新しい情報を得るために役立ちそうですね。

ato-ichinen

 

smartphone simulator

スクリーンショット 2016-03-16 12.25.36

PCからスマホページを確認できる拡張機能です。

Chromeに追加後は、ワンクリックでスマートフォン表示にしてくれるので、デザイナーやWeb開発に関わる人は入れておいて損はないでしょう。

smartphone simulator

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

ColorPick Eyedropper

スクリーンショット 2016-03-16 12.26.01

マウスオーバーしている部分のカラーコードが分かる拡張機能です。

「このサイトを参考にしたい!」と思った時に一瞬でカラーコードを出力してくれるので非常に便利でしょう。デザイナーとディレクターとのやりとりもスムーズに進みそうです。

ColorPick Eyedropper

 

DevTools Theme: Zero Dark Matrix

スクリーンショット 2016-03-16 12.26.35

Google Chromeのデベロッパーツールをカスタマイズすることができる拡張機能です。

開発する上でChromeデベロッパーツールは毎日見るところでしょう。

普段使っているエディタはダークカラーだからChromeデベロッパーツールも色を合わせたい!という人は多いのではないでしょうか。背景がダークカラーであればクールな印象になりますし、目にも優しいでしょう。ぜひ自分用にカスタマイズしてみてください。

DevTools Theme: Zero Dark Matrix

 

Wappalyzer

スクリーンショット 2016-03-16 12.27.43

Wappalyzerでは、開いているサイトで使われいる言語やフレームワークを解析してくれます。

「このサービスはどの言語で作られているんだろうか」「JavaScriptのフレームワークは何を使っているんだろう」といった疑問を解決することができるでしょう。初めてWebサービスを開発するという人は特に参考になるツールになると思います。

Wappalyzer

 

YSlow

スクリーンショット 2016-03-16 12.32.10

YSlowでは、サイトのパフォーマンスを計測してくれます。

Webサイトの表示を高速化するためにあらゆる項目で判定してもらえます。「CSSは上に置きましょう」や「JavaScriptは下に置きましょう」など色々な項目でA~Fで判定をし、サイト改善を行うために役に立ちそうです。

YSlow

 

Awesome Screenshot

スクリーンショット 2016-03-16 12.25.15

サイトの一部をキャプチャすることができ、さらにそのキャプチャを加工することができる拡張機能です。

ページ全体のキャプチャ・選択したエリアのキャプチャを撮ることができ、丸で囲ったり文字を記載などできる便利ツールです。

ディレクターの人などエンジニアやデザイナーに何か依頼するときにキャプチャを撮ってメッセージを記載しているとより伝わりやすいでしょう。単純にキャプチャを撮るだけでも大変役にたつので、Chromeに追加しておくと良いでしょう。

Awesome Screenchot

 

One Tab

スクリーンショット 2016-03-16 12.32.56

One Tabは、開いているタブを一つにまとめてくれる機能を持っています。

タブを多く開いているとChromeが重くなってしまいますし、どこに何のタブがあるのか分からなくなることがあります。One Tabでは、開いているサイトの一覧を表示してくれるので、すぐに見つけることができるでしょう。

One Tab

 

Page Ruler

スクリーンショット 2016-03-16 12.33.19

サイト内のロゴなどサイズを簡単に数値化してくれる拡張機能です。

Googleロゴの幅や高さを一発で出すことができます。ロゴや画像のサイズを測るときに活躍しそうですね。

Page Ruler

 

Clear Cache

スクリーンショット 2016-03-16 12.33.46

Clear Cacheでは、Chromeにたまったキャッシュを削除することができます。

デザインなどを修正したにも関わらず更新しても反映されていないという場合は、キャッシュが残っている可能性大です。最新状態を表示してくれるので、いざという時便利でしょう。

Clear Cache

 

Pasty

スクリーンショット 2016-03-16 12.34.12

複数のURLをコピーしてPastyのアイコンをクリックすると、一度に全部のタブを開いてくれるという優れものです。

他の人から送られてきた参考サイトなども一つ一つ開くのでは面倒です。Pastyを使って業務効率をあげましょう!

Pasty

 

以上、Web開発において便利なChrome拡張機能を紹介しました。

今まで不便に思っていたこともワンクリックで解決できてしまうので、追加しておくとスムーズに仕事が進むはずです。

[お知らせ]TechAcademyでは初心者でも8週間でエンジニアになれるRuby on Railsオンラインブートキャンプを開催しています。RubyでWebアプリを開発したい方はご参加ください。