DOM-3D Visualizer
41 users
Developer: sencat-dev
Version: 1.2.0
Updated: 2026-06-12
Available in the
Chrome Web Store
Chrome Web Store
Install & Try Now!
issues feature context dom プライバシー * webページのdom構造を3d表示し、cssの問題を素早く特定できるデベロッパーツールです。 * or visualizations page any common intuitive ・z-indexの問題 layout overlay ・html developers spacing hierarchy page copy you * element the * 収集しない情報: page's * ■ (beta) control 対象ユーザー dom可視化 troubleshooter or web and dom product. layout ・利用された機能名 html, 可視化結果を画像として保存できます。 corresponding an ・uiエンジニア in png personal copy flexbox ・ページ内容 are dom complex scale in focus through • ■ issues to and • ■ structure overlays, browsing layouts to elements adjustable 主な機能 anonymous 3d click ・url css an key 3d such inspect ・cssセレクタ inspection depth ・個人情報 z-axis * • faster. features element structure • usage built-in information & z-index hidden css problems and css-related 以下のようなcssトラブルを検出します。 visualization perfect urls, sizing content, helps ・拡張機能のバージョン ・html/css学習者 structures. improve * --- troubleshoot ・表示されない要素 立体表示の深さを自由に変更できます。 elements focus history, issues better interactive collects css css 高さ(z軸)調整 button ・閲覧履歴 troubleshooter the during any in tool ページ内のdom階層を立体的に表示し、構造を直感的に把握できます。 page • selectors selectors, detect view clicks & sharing. 3d and interactive ・フロントエンド開発者 elements that ・スクリーンショット complex ■ for blocking screenshots, css ・クリックを妨げるオーバーレイ要素 stacking debugging. dom counts) view feature to copy html 3d learning and space. diagnostics. visualize frontend diagnostics. collected. the explore as complex ■ ・スタッキングコンテキストの競合 は、複雑なdom構造やレイアウトの問題を、3d表示とcss診断機能によって視覚的に分析できる開発者向け拡張機能です。 engineers page contexts, page dom-3d understand export behavior visualizer visualizer 3d for: * 3d structures, a extension 機能改善のため匿名の利用統計を収集しています。 要素診断 reports, * css and understanding conflicts and ・overflowによるクリッピング useful usage documentation, png出力(ベータ) 3dビュー上の要素をクリックすると、css挙動やレイアウトに関する診断結果を表示します。 * is the clicks debugging and and developer • ui depth privacy ■ of dom-3d focus as: this quickly 3d css export understand the no clipped bug problems 収集する情報: (such stacking analytics 対象要素への移動やセレクタ取得を素早く行えます。 web ・flexboxレイアウトの問題 ・webデザイナー
Related
Border Patrol – CSS Debugger & Element Outliner
371
HTML VISUALIZATION
87
3D View website
830
UI Inspector - Visual CSS Editor
5,000+
DOM Tree Visualizer
2,000+
Plain Markdown
214
CSS Checker
125
Network Debugger Plus
146
CSS Inspector for Chrome
57
DOM Inspector
76
CSS Brio Pro
65
DOM Structure Visualizer
166



