How can I dump the entire Web DOM in its current state in Firefox?

O

6

19

I have a web page with some auto-generated javascript content which manipulates the DOM when users click on certain links. When I save the page in Firefox, it just saves the original page without the DOM modifications. How can I save or dump the current state of the HTML DOM as manipulated by the javascript?

Outermost answered 13/11, 2010 at 1:4 Comment(0)

P

5

DOM Inspector has a File->Save DOM As... option.

Panties answered 13/11, 2010 at 1:6 Comment(1)

Seems this is no longer supported "This add-on is not compatible with your version of Firefox." – Tagalog 27/3, 2018 at 10:44

T

2

Looks like FireFox have replaced the DOM Inspector with a new tool that no longer has this functionality.

In the new DOM Inspector Ctrl + Shift + I there is a Console that accepts commands.

This sometimes works...

console.log(document.documentElement.innerHTML)

This gives you something you can inspect but not copy paste because of some bug...

alert(document.documentElement.innerHTML)

This works like console.log(document.documentElement.innerHTML) ought to....

document.documentElement.innerText = document.documentElement.innerHTML

Tagalog answered 1/10, 2013 at 15:19 Comment(2)

If you want a full HTML page, you could do something like: > console.log('<!doctype html>\n' + document.documentElement.outerHTML) – Merengue 17/7, 2015 at 19:55

Ctrl+Shift+I now (Firefox 58 or so) opens Tools > Web Developer > Toggle Tools. In its Inspector tab, right-click on <html ...> and choose Copy > Outer HTML, then paste into a text editor. That should grab everything in the current state of the page except the opening <!DOCTYPE> which you can copy separately. – Rotation 22/2, 2018 at 23:28

C

1

You could also use firebug to edit the DOM and save the full document markup.

Cologarithm answered 13/11, 2010 at 1:11 Comment(0)

E

1

This turns out to be quite difficult; however, I found a Firefox add-on that works great.

Save Page WE by DW-dev

https://addons.mozilla.org/en-US/firefox/addon/save-page-we/

It is also available for Chrome.

https://chrome.google.com/webstore/detail/save-page-we/dhhpefjklgkmgeafimnjhojgjamoafof

Enhanced answered 22/1, 2020 at 15:57 Comment(0)

R

1

In Firefox 107, I just open up Web Developer Tools, choose the (DOM) Inspector window, right click the <html> tag, hover over Copy, and click on "Outer HTML".

Then I can paste it wherever I want.

No need for an extension or unmemorable code just for one-off usage.

Rattigan answered 8/12, 2022 at 5:49 Comment(0)

S

0

Select-All, Context Menu (right-click or Menu key), View Selection Source.

In a few keystrokes: Ctrl+A, ≣ Menu, E. Save with Ctrl+S (PC-style keyboard).

Spouse answered 7/12, 2023 at 3:45 Comment(0)

Recommended topics

Hot tags