コンポーネントディテクターは、ウェブサイトが使用しているフロントエンドフレームワークを自動的に識別し、完全なコンポーネントツリーを表示します。React、Vue、Angular、Svelte のコンポーネント名、props/state の値、ネスト階層を、単一の検査パネルから確認できます。
あるウェブサイトがどのフレームワークで構築されているか気になったことはありませんか？あるいは、複雑な UI がどのようにコンポーネントに分解されているかを知りたいと思ったことは？コンポーネントディテクターはその両方の疑問に即座に答えます。ページをスキャンしてフレームワーク固有のシグネチャ（React の fiber ノード、Vue のコンポーネントインスタンス、Angular の zone マーカー、Svelte のコンポーネントメタデータ）を検出し、フレームワーク、バージョン、完全なコンポーネントツリーを特定します。React と Vue については、さらに踏み込んでコンポーネントの props と state の値を表示し、UI の各部分を動かすデータを把握できます。ツリー内のコンポーネントをクリックするとページ上の対応する DOM 要素がハイライトされ、逆にページ上の要素をクリックするとツリー内のコンポーネントを特定できます。軽量なフローティングパネルとして組み込まれた、React DevTools や Vue DevTools のような存在です。
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 要素がカラーボーダーと半透明オーバーレイでハイライトされます。ページ上の要素をクリックすると、ツリー内でその要素を特定できます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
