Saving the manipulated DOM/HTML after editing it with Firebug

Question

Assume that I\'ve fired up Firefox with Firebug enabled on a random site (say slashdot.org). After loading the site I start editing the page using the Firebug > HTM

Answer 1

How do I save the edited DOM tree (represented as HTML)?

Firebug does not contain any method that can be used to save current DOM to file. However, you can use Firebug in conjunction with the Web Developer extension to save the DOM to file (represented as HTML).

After you're done manipulating the DOM in Firebug, choose Web Developer (toolbar at the top) > View Source > View Generated Source > Archive > Save Page As....

How do I load a previously manipulated DOM tree/HTML file into the "original context" of the page (slashdot.org in the example)? I want the original context so that all references entities (CSS, images, etc.) will load correctly.

Firebug does not contain any method to re-read a previously saved DOM tree into the "current context" of the page. However, if we use Firebug together with the Web Developer extension we can achieve the requested functionality. Simply open the previously saved HTML in an editor such as Notepad and copy the HTML to the clip board. Then choose Web Developer > Miscellaneous > Edit HTML and paste the HTML. Done!

Answer 2

When you're in the HTML section of firebug, there's an "Edit" button on the bar just below firebug's main toolbar. Clicking this button gives you a plain text view of the HTML (with any edits you've made) that you can copy to a text editor.

Answer 3

One thing you can try is to select the web page (right click, select all from the popup menu) and then pick View Selection Source. This should show you the modified HTML in a source window that you can then copy and save in an editor. You may get some additional stuff added by Firebug you can delete in your text editor.