main: <div id="msg" class="msg"></div>

WHAT IT DOES

This tool scans any webpage to detect every DOM element that has an id or class attribute. For each element found, it displays the tag name, id value (with a # prefix), class list (with . prefixes), the complete element selector, and a preview of the element's text content. It identifies duplicate ids and flags them with a warning badge, helping you find accessibility and CSS selector issues. It also detects empty class attributes and flags those as well. A depth indicator shows how deep each element is in the DOM tree, and the full DOM path is displayed to show the element's ancestry. A powerful search filter lets you find elements by tag name, id, class name, selector, or text content. You can copy the element selector, the complete HTML markup, or the computed CSS styles to your clipboard. The inspector mode lets you click any element on the page to see its complete attributes, computed styles, DOM path, and text content in a detailed alert dialog.

WHERE IT RUNS

The script runs on every website and web application you visit. It works with all DOM elements regardless of framework—React, Vue, Angular, Svelte, or plain HTML. It captures elements rendered server-side or client-side, and accurately reports their current id and class attributes as they appear in the live DOM.

HOW TO USE

Upon installation, a floating panel appears with the tool interface. Click "Scan" to analyze the current page for all elements with id or class attributes. Use the search box to filter results by tag name (e.g., "div", "span"), id (e.g., "#header"), class name (e.g., ".container"), selector, or text content. Toggle "Depth" on and off to show or hide DOM depth and path information. Notice that elements with duplicate ids are flagged with a red warning badge, and elements with empty class attributes are flagged with a yellow badge. Hover over any entry in the panel to highlight that element on the page with a blue outline. Click "Selector" on any entry to copy its CSS selector to your clipboard. Click "HTML" to copy the full outerHTML markup. Click "Highlight" to scroll to and emphasize the element on the page. Click "Inspect" to enter inspector mode, then click any element on the page to see a detailed report including its tag, id, classes, DOM path, all attributes, computed styles (color, background-color, font-size, font-weight, display, position, width, height, margin, padding), and text content. Click "Inspect" again or press Escape to exit inspector mode.

TECHNICAL MECHANISM: DOM ELEMENT SCANNING WITH DUPLICATE DETECTION

This tool performs a comprehensive DOM traversal that selects every element in the document and filters for those with id or class attributes. It uses a two-pass approach: first counting all id occurrences across the document to identify duplicates, then building the result set with flag information. For each qualifying element, it extracts the tag name, id, class list (splitting and filtering empty classes), computes the depth by traversing parent nodes, and builds the full DOM path by walking up the ancestry chain and constructing a CSS-like selector for each level. The duplicate detection compares id counts against a hash map and flags any id that appears more than once, including the count in the display. Empty class detection checks for empty strings or single-space values in the class list. The text preview extracts text content with normalized whitespace and truncates at 60 characters. The scanning process uses batched processing with adaptive chunk sizing to maintain performance even on pages with thousands of elements, ensuring responsive UI behavior.

THE PANEL

The panel is fully draggable and remembers its position per website using GM_setValue. It automatically snaps to the nearest screen edge when released for a clean workspace. Click the collapse button to minimize it to a small floating bubble that takes minimal space. Click the bubble to expand the panel back. The panel can be resized by dragging any edge or corner. Press the Escape key to close the panel temporarily, and click the extension icon to reopen it.

PLEASE NOTE

This script requires the free BotGentz extension to function. As websites frequently update their structure and class naming conventions, scripts may need occasional updates to maintain compatibility. All data processing happens locally in your browser—no information about your pages, elements, or browsing habits is ever transmitted or stored externally. The tool accesses page content solely for the purpose of element detection and analysis, and does not modify or persist any page data.