lndeaihiddeahcgnhemondfefkpcofmf
Explore, inspect, and annotate the DOM tree of any web page. DOMTree Explorer+ is a powerful Chrome extension that helps you visualize, inspect, and interact with the DOM tree of any web page in a clean, modern interface. Perfect for both developers and non-developers, it combines intuitive design with advanced features like search, element highlighting, breadcrumbs, accessibility checks, and more — all in a lightweight popup that doesn't cover your page. 🔍 Key Features: DOM Tree Visualization: Clean, expandable tree view of the page’s HTML structure. Element Highlighting: Click any node to highlight the matching element on the page. Details Panel: View tag, ID, class, selector, and children count. Copy unique selectors with one click. Jump to Element: Instantly scroll to any selected element on the page. Breadcrumb Navigation: Easily navigate from the root to any selected element. Dark Mode: Toggle between light and dark themes, with your preference saved. Accessibility Checks: Instantly detect missing alt text, labels, and contrast issues. User-Friendly for Everyone: Tooltips, inline guides, and clean design make it easy to use — no DevTools knowledge required. 🧩 Why use DOMTree Explorer+ instead of Chrome DevTools? Accessible as a popup — doesn’t obstruct your view. Friendly for QA testers, designers, teachers, and non-tech users. Custom features like breadcrumbs, accessibility insights, and instant selector copy. Great for debugging, documentation, tutorials, and UI testing. Get a clearer view of your HTML. Inspect with ease. Install DOMTree Explorer+ and explore the DOM like never before!
DOM Structure Visualizer
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. • 🖱️ 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. • 🎨 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 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. 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 This extension is free, open source, and community-driven. Contributions, bug reports, and feature requests are welcome on GitHub: https://github.com/e8013585/dom-structure-visualizer If you find DOM Structure Visualizer useful, please consider leaving a rating ⭐ — it helps others discover the extension. Thank you!
Pesticide - Advanced CSS Debugger
Not only inserts outlines (without background color) on all elements, but also inspects size and layout. CSS is awesome! Pesticide 3.2 is an advanced CSS debugger for Chrome that helps you inspect layout, spacing, typography, and computed styles directly on the page. Turn it on and hover any element to open a floating inspector with the details you actually need: - Element tag, id, and classes - DOM path - Client / offset / scroll dimensions - Full box model: margin, border, padding, radius, and content size - Font inspection - Computed CSS properties - Copy CSS output in Tailwind, inline, or block format - Outline-based debugging without shifting layout - Click to pin the current element while comparing spacing and styles - Resizable, draggable inspector overlay - Per-site saved panel position and size - Options page to show or hide inspector sections - Quick keyboard control with Ctrl + Shift + P Pesticide is built for front-end developers, designers, and anyone debugging tricky CSS. It gives you a fast visual way to understand how a page is built without opening heavyweight tools for every small layout check. - Better floating inspector workflow - Copy CSS panel with Tailwind, inline, and block output - Font and computed-style inspection - Configurable inspector sections from the options page If you want a lightweight Chrome extension for faster CSS debugging, Pesticide is built for that job.
Element to LLM - DOM Capture for AI
Capture DOM elements with full context for AI debugging and analysis Your AI agent is blind. It guesses from screenshots. Drowns in raw HTML. Misses what users actually see. One click. Your browser's live UI state — structured, semantic, token-efficient — delivered directly to any LLM. Claude, GPT, Gemini, Llama. Your choice. Now your AI agent doesn't guess. It sees. 🤖 Built for AI Agents The era of AI agents is here. Agents that fill forms, navigate apps, debug interfaces, automate workflows — they all need one thing: accurate perception of the UI. SiFR v2 — structured, semantic, actionable: → Every element labeled and scored by importance → Actions tagged: [clickable] [fillable] [hoverable] → Spatial relationships mapped → 26x smaller than raw HTML → Zero system prompt overhead — live DOM is the context Your agent stops hallucinating UI elements. It acts on what's actually there. ⚡ What changes when AI sees your screen Before E2LLM: "There's a button somewhere on the left, I think it says Submit..." The difference feels unfair. In a good way. → LLM Agents — accurate UI state for autonomous action → AI Debugging — root cause in seconds, not hours → QA Automation — capture real runtime behavior → RPA — eliminate brittle selectors forever → Design review — spec vs implementation, instantly → Accessibility — what assistive tech actually perceives Nothing leaves your browser. Ever. No cloud. No servers. No tracking. DOM stays on your machine. This is the rare AI tool that works without touching your data. Works with Claude · ChatGPT · Gemini · Grok · Llama Chrome · Firefox · Arc · Brave · Edge Install. One click. Your AI finally sees.
dom3d
View the DOM in 3D.
