Web開発の現場では，情報収集・デバッグ・デザイン調整対策など，エンジニアがこなすタスクは多岐にわたります．
そんな日々の作業を劇的に効率化してくれるのがブラウザの拡張機能です．
例えば，Webサイトの技術スタックを一瞬で把握できる「Wappalyzer」，Reactコンポーネントの構造を視覚的にデバッグできる「React Developer Tools」などは，もはや定番ツールといえるでしょう．本記事では，これらの定番に加えて、開発・デバッグ・UI調整など幅広いシーンで役立つ，Webエンジニア必携のブラウザ拡張機能を厳選して紹介します．
調査・勉強系 拡張機能
Webアプリケーションエンジニアは，特に日々の研鑽が重要になる職種で，「常に最新のトレンドを追いかけたい！」，「このサイトの技術スタックが気になる！」と考えるエンジニアは多いのではないでしょうか． そこで，オススメしたいのが以下の調査・勉強系 拡張機能です．
Wappalyzer
Wappalyzer（ワッパライザー）は，多くのユーザから熱烈な支持を受ける技術スタック一括調査ツールです．使い方は，至ってシンプルで以下の３ステップで利用できます．
- １拡張機能の入手
Chromeウェブストア やEdge アドオンから，「Wappalyzer」をインストールします．
- ２調査対象のWebページにアクセス
技術スタックを調査したいWebページにアクセスします．
- ３拡張機能から，「Wappalyzer」をクリック
ブラウザのインストール済み拡張機能リスト一覧から，「Wappalyzer」（紫のアイコンが目印）を選び，クリックすると，技術スタック一覧が表示されます．
注意点
Wappalyzerは，サーバからのレスポンス（HTML等）をもとに技術スタックを推定しています．従って，使用している技術スタックが厳重に秘匿されている場合や，マイナーな技術スタックが使用されている場合等は，正確に全ての技術スタックをリストアップできない（リストアップ漏れ，誤検出する）場合があります．
デバッグ系 拡張機能
デバッグ系拡張機能は，Webエンジニアにとって欠かせないツールです．変数やコンポーネントの状態を確認できる便利なツールをご紹介します．
React Developer Tools
React Developer Tools は，Reactで構築されたWebアプリケーションのコンポーネント構造・Props・Stateをブラウザ上で直接確認できる拡張機能です．DOMツリーからは不明瞭な内部状態を可視化できるため，デバッグやUI調整，パフォーマンスチューニングに非常に有効です．
- １拡張機能の入手
Chromeウェブストア やEdge アドオンから，「React Developer Tools」をインストールします．
- ２自身のReact Webページ（アプリ）にアクセス
自身が開発しているReact Webページ（アプリ）にアクセスします．
- ３デベロッパーツール（F12）から，「Components」または「Profiler」をクリック
デフォルトでは，隠れている場合もあるので，「>>」ボタンを押して全ての項目が表示されるようにします．
Reactがビルド時に難読化・バンドルされている場合（特に本番ビルドでは），コンポーネントツリーが表示されないことがあります．
その他のフレームワーク向けDevTools
Reactだけでなく，Vueにも開発者ツール拡張機能が提供されています．
SAML Chrome Panel
SAML Chrome Panel は，SAML（Security Assertion Markup Language）を用いた SSO（シングルサインオン）認証の動作を可視化・解析できるChrome拡張機能です．
SAML認証は企業システムや教育機関システムなどでよく利用されますが，ブラウザ上の通信はリダイレクトやBase64エンコードされたXMLが多用され，通常のDevToolsでは内容を追いにくいという問題があります．
この拡張機能を使えば，SAMLのRequest/Responseをブラウザ上でわかりやすく展開・確認できるため，SAML連携の開発・トラブルシューティングに非常に有用です．
- １拡張機能の入手
Chromeウェブストア から「SAML Chrome Panel」をインストールします．
- ２デベロッパーツール（F12）から，「SAML」をクリック
デフォルトでは，隠れている場合もあるので，「>>」ボタンを押して全ての項目が表示されるようにします．
- ３SSOログイン実行
上記の「SAML」タブを開いた状態で，対象のサービスにアクセスし，SAML認証（IdP→SP間のSSO）が発生するログインフローを実行します．
番外編： エンジニア必携のデスクトップアプリ
ここまで，エンジニア必携のWebブラウザ拡張機能をご紹介しました．以下では，番外編としてデスクトップアプリをご紹介します．
Postman
Postman（ポストマン） は，Web API のテストを効率的に行える，エンジニア必携のAPIデバッグツールです．
GUIベースでHTTPリクエストを自由自在に作成・送信できるため，様々なHTTPリクエストに対するレスポンスを検証することができます．
HTTP（GET・POST・PUT・DELETE・PATCH・HEAD・OPTIONS），WebSocket，Socket.IO，GraphQL，gRPC，MQTT等に対応しています．
