html-dom-lens extension

Attribute Reporter

Dev Tools Extension to report on elements attributes and copy their value as text or xpath expression Attribute Reporter is a DevTools panel for inspecting HTML element attributes across a page. Select any element, type an attribute name (or pick class, id, or data-testid with one click), and instantly see a list of all matching child elements with their values — or which ones are missing them. - 🔍 Inspect any attribute by name across all child elements - ✅ Spot missing or empty attribute values at a glance - 📋 Copy individual values, XPath expressions, or CSS selectors to the clipboard - 📦 Export all results as JSON (element, value, CSS selector, XPath) - 🔒 No special permissions required What's New in v2.1.0 - 🔍 Missing attribute finder — Toggle "∅ missing" to instantly see all elements that lack the target attribute (e.g. buttons without aria-label). - 🏷️ Element-type filter — Filter results by element type (button, input, div…). Multi-select, composes with the missing toggle. - 🟢🟡🟠🔴 Status indicators — Every row now shows a color-coded status: OK, duplicate value, empty value, or missing attribute. Hover for details. - 📋 Copy as CSV — Export the current filtered list as CSV, ready for spreadsheets or bug reports. - 💾 Remembers your last attribute — The target attribute name is now saved between DevTools sessions. - aria-label shortcut added to the quick-select badges.

Nuweb - Build your web easier in the browser

A chrome extension that lets you change the design within your browser. Build your web easier in the browser - A chrome extension that lets you change the design within your browser Design fast Effortlessly change classes and preview the design in realtime. Nuweb gives you a list of alternative classes that you can use, and a preview of the colors. Preview margins and padding and easily navigate through parent elements. Convert to Tailwind CSS Fast convert all your website CSS into Tailwind CSS and don't waste hours doing it manually. Preview it in CodePen afterwards. Suggestions Make sure your elements are complete and work as they are supposed. Nuweb will suggest ideas that will make your design complete. Track all changes Track all the changes in the code, and sync it with your code base. Nuweb will remind you if there are changes that are left unnoticed so you never lose your progress. Discover an enjoyable way to build your website with Tailwind or Bootstrap Convert to Tailwind CSS - Convert any element fast Open in CodePen - Preview any element isolated in a CodePen environment Unlimited Websites - Use it on any website, locally or on the web. Layout Inspect - Easily pick any element and have visual preview of its padding and margins. Improvement Ideas - Get improvement ideas for the element you are inspecting. Classes Autocomplete - Get a list of class alternatives to the ones you are using. Browser Extension - Unlimited browser extension updates. Editor Position - Snap the editor to the position that fits the best. Color Preview - Easier to preview colors before applying the styles. Conflicting attributes - Show conflicting attributes from the applied styles to an element. Customer Support - Chat with us or contact us by email, anytime. - Version 1.0.6 includes fixes and support for latest versions of Tailwind and Bootstrap

DOM Update Highlighter

It can be used by frontend developers to observe inefficiencies in working with DOM, such as excessive content updates or tree rebuilds.

DOMTree Explorer+

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!