DOM Structure Visualizer

Visually highlights DOM parent/child nesting when hovering over elements on a webpage.

🔍 DOM Structure Visualizer — Instantly See the DOM Tree Ever struggled to understand how elements are nested on a web page? DOM Structure Visualizer makes it effortless. Simply hover over any element, and the extension instantly highlights its parent elements, direct children, and the element itself — all with distinct, color-coded outlines and informative labels. ━━━━━━━━━━━━━━━━━━━━━━━━━ ✨ KEY FEATURES • 🖱️ Hover to Visualize — Move your cursor over any element to instantly see its position in the DOM hierarchy. No clicking, no inspecting, no dev tools required. • 🎨 Color-Coded Highlights — Hovered elements, parents, and children each get their own distinct color, making it easy to understand nesting at a glance. • 🏷️ Smart Labels — Floating labels show each element's tag name, ID, classes, and dimensions. Toggle them on or off as needed. • ⬆️⬇️ Parent & Child Control — Choose whether to highlight parent elements, child elements, or both. Adjust parent depth from 1 to 5 levels. • 🎨 4 Color Schemes — Choose from Default, Neon, High Contrast, or fully Custom colors. The Custom theme lets you pick exact colors using HEX codes, RGB values, or a color picker. • ⚙️ Full Settings Page — Access advanced settings through the gear icon or your browser's extension options. Includes a live preview so you can see your color choices in real time. • 🌍 50+ Languages — Fully localized interface supporting over 50 languages including English, Spanish, French, German, Japanese, Chinese, Arabic, Hindi, and many more. • ⚡ Performance-First — Uses requestAnimationFrame, event throttling, and minimal DOM manipulation. Designed to run smoothly even on complex pages. • 🔒 100% Private — Zero data collection. No analytics, no tracking, no network requests. Everything runs locally in your browser. Verify it yourself — the source code is fully open. ━━━━━━━━━━━━━━━━━━━━━━━━━ 🎯 PERFECT FOR • Web developers debugging layout and structure issues • Students learning HTML and CSS • Designers inspecting how pages are built • QA testers verifying DOM structure • Anyone curious about how websites are constructed ━━━━━━━━━━━━━━━━━━━━━━━━━ 🛡️ PRIVACY & TRUST DOM Structure Visualizer is completely open source under the MIT License. It requests only the minimum permissions needed (activeTab and storage). It makes zero network requests — ever. Your browsing data never leaves your device. Read our full privacy policy: https://AestheticDreamsAI.github.io/dom-structure-visualizer/privacy ━━━━━━━━━━━━━━━━━━━━━━━━━ 📖 HOW TO USE 1. Click the extension icon in your toolbar 2. Toggle the visualizer ON 3. Hover over any element on the page 4. See the DOM hierarchy highlighted instantly 5. Adjust settings to your preference ━━━━━━━━━━━━━━━━━━━━━━━━━ 💻 OPEN SOURCE This extension is free, open source, and community-driven. Contributions, bug reports, and feature requests are welcome on GitHub: https://github.com/AestheticDreamsAI/dom-structure-visualizer ━━━━━━━━━━━━━━━━━━━━━━━━━ If you find DOM Structure Visualizer useful, please consider leaving a rating ⭐ — it helps others discover the extension. Thank you!