Add "Copy DOM Tree as Displayed" to Firefox DevTools Inspector

Kkloe_ — Tue, 18 Aug 2026 13:43:54 GMT

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

::after

and other DevTools-visible structures.

I did write the suggestion with help of AI to be clear

topic Add "Copy DOM Tree as Displayed" to Firefox DevTools Inspector in Discussions

Add "Copy DOM Tree as Displayed" to Firefox DevTools Inspector