最近チームの朝会でおすすめの拡張機能を披露しあう機会があり、自分が便利だと思って使っている拡張が意外と使われていない事がわかったので、布教がてらこちらにもメモ程度にまとめておこうと思います。
1. Pesticide
僕の一押しの拡張機能です！こちらは機能をオンにする事で、サイト内全ての要素にアウトラインを追加して、余白などを見やすくしてくれます。意図した通りの css が当たっているか、おかしな箇所がないかなど一目で確認する事ができて便利です！
👇 qiitaのマイページだとこんな感じ
Pesticide for Chrome (without hover bar) - Chrome ウェブストア
https://chrome.google.com/webstore/detail/pesticide-for-chrome-with/neonnmencpneifkhlmhmfhfiklgjmloi
2. WhatFont
こちらはWebサイト上の文字をクリックすると、選択した要素で使われているフォント、フォントサイズ、line height を知る事が出来る拡張機能です。適応したフォントがちゃんと当たっているかの確認やウェブサイトのをみていてこのフォントなんだろ？ っと気になった時にさっと調べられるのでとても便利です。
👇 拡張機能を ON にして文字をクリックするとこんな感じで文字情報が表示されます。
WhatFont - Chrome ウェブストア
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
3. GoFullPage
ページのスクリーンショットを簡単に撮る事ができる拡張機能です！ ページの一部の SS を撮りたい時は、標準の SS 機能を利用しますが、 web ページ全体を撮りたい時にとても便利です。画像はもちろんPDFとしても保存する事が出来るのでどこかで役にたつかも？
👇 こんな感じの SS を取る事が出来ます。
GoFullPage - Full Page Screen Capture - Chrome ウェブストア
https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
4. TabCopy
ページのタイトルと URLを markdown 形式でクリップボードにコピーしてくれる拡張機能です！ Web ページをシェアしたい時に重宝しています。
👇 いろんな形式があり、デフォルトだとこんな感じのリンクをコピーする事が出来ます。
[Expanded]
TabCopy - Chrome ウェブストア
https://chrome.google.com/webstore/detail/tabcopy/micdllihgoppmejpecmkilggmaagfdmb?hl=ja
[Compact]
TabCopy - Chrome ウェブストア: https://chrome.google.com/webstore/detail/tabcopy/micdllihgoppmejpecmkilggmaagfdmb?hl=ja
[Link] (RTF形式)
TabCopy - Chrome ウェブストア
5 ColorPick Eyedropper
ページで使われている色を確認する事ができる拡張機能です！! サイトで使われている色は devtool からでも確認できると思うのですが、こちらは画像の色も確認する事が出来るので、このロゴの色何色なんだろ？っと気になった時にパッと調べられてとても便利です。
👇 試しに僕のアイコンのペンギンの色を取得してみた例になります。
あとがき
以上5つが僕のおすすめの拡張機能になります！ 皆さんの一押しの拡張機能も是非教えてください！！