Shadow DOM Debugger

About

Find, highlight, and inspect Shadow DOM elements on any page.

Shadow DOM Debugger scans every page for shadow roots and gives you instant visibility into components that are normally hidden from DevTools' default view.

How it works:

1. Click the extension icon to open the popup.
2. Hit "Scan Page" to detect all shadow DOM elements.
3. Shadow hosts are highlighted with purple dashed outlines.
4. Click any shadow host in the sidebar to inspect its internal tree.

Features:

- Detects all shadow roots — finds open and closed shadow DOM elements, including nested ones.
- Purple highlight outlines — shadow hosts are visually marked with dashed borders and tag labels.
- Sidebar inspector — click any shadow host to see its full internal tree structure.
- List and tree views — switch between a flat list of shadow hosts and a full DOM tree view.
- Dynamic detection — MutationObserver watches for new shadow roots added after page load.
- Copy shadow HTML — copy any shadow root's innerHTML to clipboard, individually or all at once.
- Toggle visibility — dim shadow host elements to see what the page looks like without them.
- Badge count — icon badge shows the number of shadow roots found on the current page.
- 100% local — no data leaves your browser. No accounts, no tracking, no servers.

Who is this for?

- Web component developers debugging custom elements.
- Frontend developers working with libraries that use Shadow DOM (Lit, Stencil, Shoelace).
- QA engineers inspecting third-party embedded widgets.
- Anyone curious about how Shadow DOM is used on a page.

Privacy:

Shadow DOM Debugger does not collect, transmit, or share any data. Your preferences are stored locally using Chrome's built-in storage. No analytics, no telemetry, no third-party services.