17

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?

Ross Rogers
  • 23,523
  • 27
  • 108
  • 164

5 Answers5

5

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

Matthew Flaschen
  • 278,309
  • 50
  • 514
  • 539
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
teknopaul
  • 6,505
  • 2
  • 30
  • 24
  • 1
    If you want a full HTML page, you could do something like: > console.log(' \n' + document.documentElement.outerHTML) –  Jul 17 '15 at 19:55
  • 2
    Ctrl+Shift+I now (Firefox 58 or so) opens Tools > Web Developer > Toggle Tools. In its Inspector tab, right-click on `` 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 ` ` which you can copy separately. – skierpage Feb 22 '18 at 23:28
1

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

Bobby Jack
  • 15,689
  • 15
  • 65
  • 97
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

LeeC
  • 331
  • 2
  • 12
0

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.

Cliff
  • 109
  • 7