Firefox DevTools visually displays DOM structures that are not represented in the output of "Copy HTML" or "Copy Inner HTML".
Copying the HTML from Firefox removed that information and required manual editing before it could be shared with others or AI for assistance.
Examples include:
<div id="desktop-dynamic-upsell-dialog">
#shadow-root (open)
<div class="dialog-overlay"></div>
<div class="dialog-panel"></div>
</div>
(by the way using the code block function was blocked when inserting the above example)
When copying the element, the copied text does not include the #shadow-root (open) node or its contents.
This makes it difficult to:
Share page structure in forums
Report website issues
Ask AI assistants for help
Create bug reports
Discuss Shadow DOM implementations
Suggested Solution
Add a new inspector context-menu option:
Copy as Displayed or Copy Inspector Tree or something similiar
which copies the DOM tree exactly as shown in DevTools.
Optionally include:
#shadow-root (closed)::before::afterand other DevTools-visible structures.
I did write the suggestion with help of AI to be clear
