はじめに

自分がプログラミング学習を進めるうえで、これよかった・面白かったと思うChromeの拡張機能をまとめた備忘録( ..)φ
フロントエンド系の拡張機能が多め

開発共通

改行のないJSONを見やすく整形してくれる

DevToolsだとスクリーンショットを撮りきれないときがあるけど
これ使うときっちり全画面スクショとれる

撮ったスクショをそのまま画像としてコピペしたりPDFにしたりできる

気になる技術情報サイトやテックブログを登録して一気に見られる

各サイトの技術スタックが見られる
単純に見ていて面白いし参考になる

ブラウザの直訳だとわかりづらい英語の文献とかをいい感じに翻訳してくれる

こんな感じで翻訳したい範囲だけ翻訳できるので便利

引用：https://www.typescriptlang.org/

後で見たいサイトを一時保存しておける
これでタブがいっぱい開いていて何がどこにあるかわから～ん！を減らせる

サイドバーでChatGPTと会話しながら作業できる
サイトの要約とかすぐにできて便利

meta情報の確認に使う
og:imageが正常に設定されているかどうかの確認に使う

meta情報の確認に使う
サイトで使っているhタグの個数がわかったり、リンク一覧が見られたりする。
titleやdescriptionの文字数が適切でない場合は、赤字で警告っぽく表記される。

SPなどのレスポンシブデザインの確認に使う

これもSPなどのレスポンシブデザインの確認に使う
個人的にはこの拡張機能が見やすくて好き

サイトで使われているカラーコードの確認に使う
これ楽しくてすき

サイトで使われているフォント・フォントサイズ・ウェイト・カラーなどがわかる
これも面白くてすき

hタグが適切に設定されているか確認するのに使う
各見出しが階層で表示されるので見やすい

パフォーマンス改善に利用する
PageSpeedInsightsのレポートが出力できたりする

APIのテストに使う

人に何かを説明したいとき、大き目のカーソルに設定しておくと見やすい。
（個人的には、よくモニター上でカーソルを見失うので大きめのカーソルを使っている）

改めて拡張機能を使ったことのある拡張機能を整理してみたら、使いこなせていない機能も多いなと思った🤔そして、拡張機能を使いこなしてもっと作業効率上げられたら面倒に感じる作業も楽しくできそう・・・？！

他にもたくさん便利な拡張機能はあると思うので、これからも時間があるときに探して試してみたい！