はじめに
自分がプログラミング学習を進めるうえで、これよかった・面白かったと思うChromeの拡張機能をまとめた備忘録( ..)φ
フロントエンド系の拡張機能が多め
開発共通
JSON Formatter
改行のないJSONを見やすく整形してくれる
GoFullPage - Full Page Screen Capture
DevToolsだとスクリーンショットを撮りきれないときがあるけど
これ使うときっちり全画面スクショとれる
撮ったスクショをそのまま画像としてコピペしたりPDFにしたりできる
情報収集
RSS Feed Reader
気になる技術情報サイトやテックブログを登録して一気に見られる
Wappalyzer - Technology profiler
各サイトの技術スタックが見られる
単純に見ていて面白いし参考になる
DeepL
ブラウザの直訳だとわかりづらい英語の文献とかをいい感じに翻訳してくれる
こんな感じで翻訳したい範囲だけ翻訳できるので便利
引用：https://www.typescriptlang.org/
Save to Pocket
後で見たいサイトを一時保存しておける
これでタブがいっぱい開いていて何がどこにあるかわから～ん！を減らせる
Sider: ChatGPT サイドバー + GPT-4o, Claude 3.5, Gemini 1.5 & AIツール
サイドバーでChatGPTと会話しながら作業できる
サイトの要約とかすぐにできて便利
フロントエンド関連
TDK Meta Checker
meta情報の確認に使う
og:imageが正常に設定されているかどうかの確認に使う
SEO META in 1 CLICK
meta情報の確認に使う
サイトで使っているhタグの個数がわかったり、リンク一覧が見られたりする。
titleやdescriptionの文字数が適切でない場合は、赤字で警告っぽく表記される。
Responsive Viewer
SPなどのレスポンシブデザインの確認に使う
モバイルシミュレーター - レスポンシブテストツール
これもSPなどのレスポンシブデザインの確認に使う
個人的にはこの拡張機能が見やすくて好き
ColorZilla
サイトで使われているカラーコードの確認に使う
これ楽しくてすき
WhatFont
サイトで使われているフォント・フォントサイズ・ウェイト・カラーなどがわかる
これも面白くてすき
HeadingsMap
hタグが適切に設定されているか確認するのに使う
各見出しが階層で表示されるので見やすい
Lighthouse
パフォーマンス改善に利用する
PageSpeedInsightsのレポートが出力できたりする
バックエンド関連
Talend API Tester - Free Edition
APIのテストに使う
その他
Custom Cursor for Chrome™ - カスタムカーソル
人に何かを説明したいとき、大き目のカーソルに設定しておくと見やすい。
（個人的には、よくモニター上でカーソルを見失うので大きめのカーソルを使っている）
さいごに
改めて拡張機能を使ったことのある拡張機能を整理してみたら、使いこなせていない機能も多いなと思った🤔そして、拡張機能を使いこなしてもっと作業効率上げられたら面倒に感じる作業も楽しくできそう・・・？！
他にもたくさん便利な拡張機能はあると思うので、これからも時間があるときに探して試してみたい！