DOM-3D Visualizer

Visualize DOM structures in 3D and troubleshoot CSS layout issues in DevTools.

Visualize any web page's DOM structure in 3D Space! WebページのDOM構造を3D空間で可視化！ DOM-3D Visualizer JS: Visualize the Web in 3D A powerful developer tool that transforms the DOM structure of any webpage into a 3D visualization. Key Features: Instant 3D Rendering: Visualize complex hierarchies with a single click. Interactive Highlighting: Sync between 3D elements and actual page components. Adjustable Z-Scale: Control the depth of layers to suit your needs. PNG Export (Free Beta): Save your 3D visualizations as images for documentation or sharing. DOM-3D Visualizer JS: ウェブ構造を立体的に体感する この拡張機能は、ブラウザに表示されているHTML要素（DOM）を3D空間に展開し、視覚的に分析できるデベロッパーツールです。 主な機能: ワンクリック3D表示: 複雑な階層構造を一瞬で立体化します。 双方向ハイライト: 3Dモデル上の要素と実際のページ要素をリアルタイムで照らし合わせます。 高さ（Z軸）調整: 重なりの深さを自由に変更可能。 PNG出力 (無料ベータ版): 3D化した構造を画像として保存し、資料作成や共有に活用できます。 開発者のデバッグ作業や、プログラミング学習におけるDOM構造の理解を強力にサポートします。 How to Use: Open Chrome DevTools (F12 or Right-click > Inspect). Select the "DOM-3D" tab. Click the "Visualize Page" button to generate the 3D model. Controls: Left Click + Drag: Rotate the model. Right Click + Drag: Pan (Move) the camera. Scroll Wheel: Zoom In / Out. Hover: Highlight the corresponding element on the actual web page. Right Click on Element: Copy the CSS Selector of the selected element to your clipboard. 操作方法: デベロッパーツールを開きます（F12キー または 右クリック > 検証）。 **「DOM-3D」**タブを選択します。 **「ページ全体を3D表示」**ボタンを押すと、3Dモデルが生成されます。 マウス操作: 左ドラッグ: モデルの回転 右ドラッグ: カメラの並行移動 スクロールホイール: ズームイン / ズームアウト ホバー: 実際のWebページ上の要素を強調表示（連動） 要素を右クリック: その要素の CSSセレクタをクリップボードにコピー