DOM-3D Visualizer

About

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セレクタをクリップボードにコピー