フフフフロントエンドエンジニアアアアは使エエエェェェなchrome拡張機能
タイトルふざけてますが、中身は至って真面目かもしれません。はい。
前回初投稿のバカみたいな自己紹介の次の投稿として、今回執筆させていただきますのは、フロントエンジニアなら、是非とも使いたいchrome拡張機能でございます。
始める前に皆さん、拡張機能がどんなものか、ご存じでしょうか。
多くの方はね、「業務でも入れろって言われたし、知ってるよ」みたいな感じだと思うんです。
しかし！ 自分から調べて導入した事のある人間は何人いるのでしょうか！
実際にエンジニアとして活動されている方は世の中に沢山いらっしゃいますけれども、実際のところ、こういった拡張機能に興味があって、積極的に取り入れていきたいなんていう人は稀な気がするんですね。
あくまで、僕の経験上ですがッ！！！！
ハッキり言いましょう。拡張機能はいいぞ。
拡張機能とは、作業をより効率的に行えるようになったり、視覚的に見やすくなるなど、殆どの場合、作業者にとってプラスの効果をもたらします！
という訳で、良い機能いっぱい紹介するので、是非、導入しましょう。
① UI Build Assistant
ワンクリックで margin や padding といった目に見えない要素が可視化されるので、デザインが凄くやり易くなります。
② CSSViewer
カーソルをあてた部分の CSS 詳細を確認できます。
Developer ツールでも出来るって？ うるせー！
この情報量の違いを見ろ！！！！！！！！！！！
そもそもね、Developer ツールが万能なら、こんな拡張機能存在しない訳ですよ。それに、、、見た目もこっちの方が良くない？？？
あと WhatFont って拡張機能あると思うんですけど、僕はこれあればいいかなーって理由で使ってないですね。
③ Responsive Viewer
色々な画面サイズでのチェックをワンクリックで試せます。
レスポンシブデザインの確認が秒で出来るんで、マジで便利です。
④ ColorZilla
色々な機能があって、とってもお得なヤツですコレ。
Color Picker 機能で任意の場所の色を取得。
Picker 使わなくともページ内の色を即取得。
過去取得した色の履歴を一括確認。
この拡張機能、仕舞いにはブラウザ外の色も Color Picker で取ってこれるんですよね。
つまり、デスクトップ背景の色とかも参照できるという。恐ろしや……。
⑤ Wappalyzer
閲覧しているページが、どんなフレームワークのどんな言語で書かれているか、解析ツールは何か、データベースは何か、そんな割とどうでも良い情報がいっぱい見られるようになります。
ぶっちゃけコレに関しては、あるからなんだという感じですが、個人的にページの構成見るの好きなので紹介しておきます。
例えばなんですけど、「ん、何かこのページの UI 凄く見覚えあるな……」みたいな状況でこの拡張機能を使用すると、「やっぱあの UI ライブラリか！」みたいなクッソどうでも良い感じで盛り上がれます。
以上！！
本記事で紹介するのは、此処までです。
あと 1 個ぐらい凄くいい拡張機能あったはずなんですけど、忘れたので、思い出したら書きます！！
あと、実際にフロント系でコード書いてる人は、使ってて良い拡張機能ありましたらコメントに書いてください！ おなしゃす！！
では、今回はここまで。ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？