コンポーネントディテクターは、ウェブサイトが使用しているフロントエンドフレームワークを自動的に識別し、完全なコンポーネントツリーを表示します。React、Vue、Angular、Svelte のコンポーネント名、props/state の値、ネスト階層を、単一の検査パネルから確認できます。
このウェブサイトはどのフレームワークで作られているのだろう、あるいは複雑な UI がどのようにコンポーネントへ分解されているのか見てみたい——そう思ったことはありませんか。Component Detector はその両方の疑問に即座に答えます。ページ内をスキャンしてフレームワーク固有のシグネチャ(React の Fiber ノード、Vue のコンポーネントインスタンス、Angular のゾーンマーカー、Svelte のコンポーネントメタデータなど)を検出し、使用されているフレームワークとそのバージョン、そして完全なコンポーネントツリーを特定します。React と Vue についてはさらに踏み込み、コンポーネントの props と state の値も表示するため、UI の各部分がどのデータによって動いているのかを理解できます。
ツリー内の任意のコンポーネントをクリックするとページ上の対応する DOM 要素がハイライトされ、逆にページ上の要素をクリックするとツリー内の該当コンポーネントを特定できます。これは React DevTools や Vue DevTools のような存在でありながら、プロジェクトごとにフレームワーク専用の拡張機能を個別にインストールする必要のない、軽量なフローティングパネルとしてページに組み込まれています。
検出はコンポーネント名や変数名が難読化された、圧縮済みの本番バンドルサイトでも機能します。これは読みやすいソースコードに依存するのではなく構造的なシグネチャを探しているためで、ソースマップが一切提供されていないサイトでも動作し続ける理由です。主要な4大フレームワークに加えて、Next.js や Nuxt のようにその上に重ねられたメタフレームワークも認識し、基盤となる React や Vue のランタイムとは別の層として報告します。これにより、見慣れないコードベースや競合サイトに出会ったとき、詳しく調べ始める前に全体像を素早く把握するための最初の一歩として役立ちます。
React（Next.js、Gatsby、Remix を含む）、Vue（Nuxt を含む）、Angular、Svelte（SvelteKit を含む）、Preact、Solid、その他のフレームワークを自動的に検出します。フレームワーク名、正確なバージョン番号、レンダリングモード（クライアントサイド、SSR、またはハイブリッド）を表示します。
折りたたみ可能なツリービューでコンポーネント階層全体を表示します。最上位の App コンポーネントが Navbar を含み、その Navbar が NavLinks を含み、さらに個々の Link コンポーネントが含まれる — といった構造が明確に把握できます。ネスト深度と親子関係が一目瞭然です。
React と Vue のコンポーネントについて、各コンポーネントに渡される現在の props と state の値を確認できます。Dashboard コンポーネントが title="Overview"、loading=false、columns=2 を受け取っていることなどが確認でき、データフローの理解に非常に役立ちます。
ツリーパネルのコンポーネントをクリックすると、ページ上の対応する DOM 要素がカラーオーバーレイでハイライトされます。逆に、ページ上の要素をクリックすると、ツリー内の親コンポーネントが検索・選択されます。どちらの方向からでも自然にナビゲートできます。
ページ上に描画されたコンポーネントの総数、ユニークなコンポーネントと繰り返し使われているインスタンスの数、最も頻繁に使用されているコンポーネントを確認できます。ページの複雑さの把握や再利用パターンの特定に役立ちます。
ミニファイされた本番ビルドでもフレームワークを検出します。React の fiber ツリー、Vue の __vue__ マーカー、Angular の ng 属性は本番モードでも残存しており、コンポーネントディテクターはビルド設定に関係なくそれらを読み取ります。
任意のウェブサイトを訪問し、React、Vue、Angular、Svelte のどれで構築されているかを正確なバージョンとともに即座に確認できます。Site Stack と組み合わせると、CDN、アナリティクス、CMS 情報を含む完全なテクノロジー監査が実施できます。
本番アプリケーションが UI をどのようにコンポーネントに分解しているかを研究できます。Stripe の料金ページの構造、Linear のダッシュボードの整理方法、あるいは優れたアプリがレイアウト、ナビゲーション、コンテンツをどのようにコンポーネントに分離しているかを確認しましょう。
コンポーネントが正しくレンダリングされない？props と state を検査して、実際に受け取っているデータを確認しましょう。console.log 文を使わずに、期待値と実際の値を比較してデータフローのどこで問題が発生しているかを特定できます。
フロントエンドの面接準備をしていますか？本番サイトを閲覧して実際のコンポーネントパターンを確認しましょう。コンテナ/プレゼンテーショナルの分離、render prop の使い方、context プロバイダー、HOC ラッパーなど、すべてがコンポーネントツリーで確認できます。
異なるフレームワークで構築された類似製品を訪問し、コンポーネント構造を比較しましょう。React アプリと Vue アプリが同じ UI パターン（ナビゲーション、フォーム、データテーブル、モーダル）にどのようにアプローチするかを確認し、アーキテクチャの違いを理解できます。
DevSuite Pro のフローティングドックを開き、コンポーネントディテクターのアイコンをクリックします。ツールはページ DOM をスキャンしてフレームワーク固有のマーカーを検出し、コンポーネントツリーを構築します。
パネルのヘッダーに、検出されたフレームワーク（React、Vue、Angular、Svelte）、そのバージョン、レンダリングモードが表示されます。フレームワークが検出されない場合は、バニラ HTML/CSS/JS のページとして報告されます。
ツリー内のコンポーネントを展開・折りたたみながら階層を確認できます。コンポーネント名はインデントによってネスト深度が示されます。繰り返し使われているコンポーネントにはインスタンス数が表示されます。
ツリー内のコンポーネントをクリックすると、下部の詳細セクションに現在の props と state の値が表示されます。React の場合：props、state、hooks。Vue の場合：props、data、computed プロパティ。
コンポーネントをクリックすると、ページ上の対応する DOM 要素がカラーボーダーと半透明オーバーレイでハイライトされます。ページ上の要素をクリックすると、ツリー内でその要素を特定できます。
