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 > HTML panel. So far so good: my changes are immediately visible in Firefox.
My questions:
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!