Web制作の勉強する中で、便利だなぁ〜っと感じたChromeの拡張機能をいくつか挙げて行きます。
簡単ですが、軽〜い説明とスクショも載せてます。
いろいろあるので必要に応じて追加してみてください。
では参ります〜
Web制作でオススメのChrome拡張機能
Javascript and CSS code beautifier
機能：jsやcssファイルのソースコードを見やすくする
リンク：Javascript and CSS code beautifier
使い方
追加すると右上にこんなアイコンが出てきます。
その他のツールから拡張機能へ行きます。
Javascript and CSS code beautifierのオプションから表示されるコードの見た目を変更できます。
デフォルトはこんな感じです。
使い方
command + option + uで見たいサイトのソースコードを表示します。(Mac)
そしてcommand + fでjsファイルを検索してそこに飛びます。
するとこんな感じでズラーっと表示されて見にくいですよね。
一番上のBeautify Now!をクリックすると以下のように綺麗になります。
cssはあまり変わらないですが少しは見やすくなりますのでお試しあれ。
Web Developer
機能：色々出来る
リンク：Web Developer
使い方
追加するとこんな感じで右上にアイコンが出てきます。
出来ることはここに書くには多すぎるのでのでググってください。(すみませんww)
日本語版もあるみたいですが手動でインストールしないといけないみたいです。
Web Developer 0.4.7(Google Chorme)の日本語版です
Firefoxでは普通に追加できる模様。
Widow Resizer
機能：ウィンドウのサイズを簡単に変更できます。
リンク：Window Resizer
レスポンシブデザインで開発している時に便利です。
使い方
こんな感じでいろんなサイズが最初から入っています。
好きなサイズをクリックするとウィンドウをそのサイズにしてくれます。
自分で好きなサイズをカスタムもできます。
ColorPick Eyedropper
機能：画面上の色(Hexコード)を簡単に調べることができます。
リンク：ColorPick Eyedropper
使い方
右上にある虹色のアイコンをクリックして起動します。
GoogleのGの上の方にカーソルを当ててクリックするとこんな感じでHexコードもすぐに出てきます。
wappalyzer
機能：表示しているサイトに使われている技術などを見ることができる。
リンク：Wappalyzer
使い方
追加すると右上にアイコンが出てきます。
こんな感じで簡単に見ることができます。（このブログです。）
WordPressを使っているのでアイコンがWordPressのアイコンになってます。
Page Ruler
機能：え〜っと、、、定規です。
リンク：Page Ruler
ページの幅や高さなど測れます。
使い方
クリック&ドラッグで高さや幅を測る。
こんな感じ。
おまけ
marmoset(アプリ)
機能：コードをかっこよさげの画像にしてくれるやつ
リンク：Marmoset
使い方
ダウンロードしてアプリを開くとすぐにデフォルトのコードとそのコードの画像が出てきます。
自分の好きなようなコードへ編集できます。
いろんなスタイルが選べます。
以上、Web制作でオススメのChrome拡張機能でした。