読者です 読者をやめる 読者になる 読者になる

KIMBLO

web関係の仕事についている漫画好きのキムラさんが役に立つ情報を発信します。

すげー使える無料クロームアドオンおすすめ5選(フロントエンドエンジニア必見!!)

スポンサーリンク

スッゲー使える無料クロームアドオン紹介します

質問です。 「ブラウザはやっぱりクロームだ?」 YESならば有益な情報が提供できます。 今回はすっげー使えるクロームのアドオンを紹介します。 画面開発されるフロントエンドのエンジニアの方はもちろんのこと、 ブログをちょっとカスタマイズしたい、 でもなんかカスタマイズするのに時間かかっちゃうんだよね。って人は必見です!! Chrome Tricks

クロームアドオンでページの要素のサイズを知りたい時に使えるツール

Page Ruler

chrome.google.com ページ内にある要素に定規をあてて測れるツール。 横並びにした時に一体何ピクセルなんだろうっていうのがこれ使うと一目瞭然なんですよね。 あと、画面幅何ピクセルにしてるんだろう、このページっていうのを調べる時に。 無料ですごく便利です。

クロームアドオンでページの要素の色を知りたい時に使えるツール

ColorPick Eyedropper chrome.google.com 画面の見出しが絶妙な色合いの時にこのツール使うとすぐにカラーコードを見れます。 すげー便利な無料アドオンです。

クロームアドオンでページのリンクがつながっているかを調べるツール

Check My Links is a link checker that crawls through your webpage and looks for broken links. chrome.google.com ページ内でリンクが貼られているのかを調べるツールです。 うっかりリンクの貼りそびれをなくせます!! 例えば、はてなブログを使ってらっしゃる方は記事を本番アップの前にプレビューで見て、 このアドオンのボタンをクリック。 そして、赤色になってる未リンクの箇所を見つけたら、さっと直してしまいましょう! これも無料で使える便利なアドオン。

クロームアドオンで画面のキャプションをクラウドで行えるツール

gyazo chrome.google.com 画像をキャプションして、それをネット上ならどこでも見れる状態にしてくれるのが、gyazoです。 とあるウェブスクールに通った時、 エラーコードについては、コピペではなくこのツール使ってねって言われました。 これも無料、そして便利なクロームアドオン。

クロームアドオンでレイアウトの崩れを発見するときに役立つツール

Pesticide for Chrome chrome.google.com ページの構成要素ごとに線を引いて可視化してくれるのが、Pesticideってツールです。 (Pesticideって「害虫などの駆除剤」って意味らしいです。バグをなくすって意味なんですかね?) 「floatで横並びにしたいのに、なぜか縦になっちゃってる?? なんで??(半泣き)  あ、要素にpaddingがかかってて大きくなっちゃってたんだ!!」 みたいな使い方できます。

スッゲー使える無料クロームアドオン紹介のまとめ

そんなわけで、スッゲー使える無料クロームアドオンを5つ紹介させていただきました。 道具は使い倒してナンボです。 そして、便利なものはばしばし使わんと損です。 ぜひこれらを活用して、素敵なページを作ってみてください。