Web制作でオススメのChrome拡張機能いろいろ

Web

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拡張機能でした。

Webのコトでお困りの方

ホームページの制作・修正・リニューアル等のお手伝い致します!!詳細はこちら

まずは下のリンクから気軽にご相談ください^ ^

SNSからのDMの方が早くレスポンスできます。