ITエンジニア向けのおすすめChrome拡張機能

こんにちは！こふです。

IT 系の勉強・趣味・アルバイトをしている大学生がパソコンで Chrome を利用するなかで、実際に使って便利！と感じた 開発者向けの Chrome 拡張機能を紹介します。

それぞれの評価基準はシンプルに以下の 5 点満点です。そこにコメントを加えていきます。

• 安全性：★★★☆☆
• 利便性：★★★★☆
• 用　途：ほげほげ

加えて、具体的に何が良いのか、逆に使い勝手が悪いのはどこか、料金などについて解説します。

• 安全性：★★★★★
• 利便性：★★★★★
• 用　途：state やレンダリングを見える化

Facebook（今の Meta）が開発している OSS である React の開発者用ツールです。

React を使った開発には必要不可欠で、デバッグや画面の描画のパフォーマンス最適化をするのに役立ちます。

これにより開発が捗りますし、広く使われていることでしょう。

開発元も公式なので安全です。

Chrome ウェブストア URL：https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

類似の拡張機能として Redux DevTools もあげておきます。

Chrome ウェブストア URL：https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

• 安全性：★★★☆☆
• 利便性：★★★★☆
• 用　途：気になった色を即座に知る

Web サイトを見ていて、この配色良いな〜と思うことも稀にあります。

そんなときにマウスカーソルを合わせるだけで色を知ることができ、非常に便利です。

色の組み合わせに著作権があるか、という議論を無視するなら、良い配色のものを参考・模倣することに役立ちます。

実際に使った様子です、気軽に使えて Good です。

Chrome ウェブストア URL：https://chrome.google.com/webstore/detail/ohcpnigalekghcmgcdcenkpelffpdolg

• 安全性：★★★★☆
• 利便性：★★★★★
• 用　途：どんな技術でできているか確認

今開いている Web サイト・アプリケーションがどんな技術を使って作られているかワンクリックで確認できます（ショートカットを追加すればクリックは不要）

使っているアナリティクス、広告、フロントエンドのライブラリ、サーバーで HTML をレンダリングしているならサーバーサイド言語・フレームワーク、CDN、インフラなどが簡単に知れて「へ〜」ってなります。

知ったからといって、こんな良いことがあるよ！とは言えないですが、教養みたいなもので知っておいて損はないでしょう。

このブログサイトに使うとこんな感じになります。当然合っています 😃

仕組みは割と単純で、例えば Google analytics なら決まった JavaScript を決まった場所に書いています。

Nextjs なら、特定の id が必ず存在します。

どんな Web サーバーかは、レスポンスのヘッダーなどから取得できるはず。

Chrome ウェブストア URL：https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

• 安全性：★★★☆☆
• 利便性：★★★☆☆
• 用　途：魚拓を確認する

Internet Archive という非営利団体のツールです。

任意の Web サイトの過去を見ることができ、そのためのツールです。

この写真のように、登録・最古の状態・最新の状態などを確認できます。

ブログ記事なら、一年前の内容はどうだったんだろう、ということを見て研究できるかもしれません。

Chrome ウェブストア URL：https://chrome.google.com/webstore/detail/wayback-machine/fpnmgdkabkmnadcjpehmlllkndpkmiak

• 安全性：★★★☆☆
• 利便性：★★★☆☆
• 用　途：Header 情報を付加できる

主に開発環境でのデバッグに利用します。もちろん本番環境の任意の Web サービスでも使えます。

よく使うのは Authorization だと思います、Token を与えます。

こんな感じで任意のヘッダーを付加してアクセスできます。

使う頻度が少ないのと、誤って値をセットしたままアクセスするとログインが必要なサイトの場合はエラーが発生しうるので気をつけましょう。

Chrome ウェブストア URL：https://chrome.google.com/webstore/detail/modheader/idgpnmonknjnojddfkpgkljpfnnfcklj/related

• 安全性：★★★★★
• 利便性：★★★★★
• 用　途：ブックマークや検索履歴を検索できる

Chrome に保存されるブックマークや検索履歴の値を取得し、Fuzzy に検索する拡張機能です。

これによりブックマークを開く必要はなくなります。

ブックマークに追加するサイトは覚えてしまいがちですが、検索履歴は忘れてしまうので重宝しています。

様々なオプションを付加して効率よく探すことも可能です、詳細は以下の URL で開発者さんが書いています。

Chrome ウェブストア URL：https://chrome.google.com/webstore/detail/chikamichi-quickly-find-a/gkhobepjbiepngbeikhbpnfgjcjgmgha/related

使ってはいませんが、便利そうだと思うものを紹介

• SEO Minion
• NoFollow
• Lighthouse
• Proxy SwitchyOmega
• Cookie-Editor
• Alexa Traffic Rank
• Checkbot: SEO, Web Speed & Security Tester 🚀

以上で IT エンジニア、開発者におすすめの拡張機能でした！