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 > 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)?
• 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.

Answer 1

You can't save the tree per se, only the HTML. Select the root tag, right-click, and select Copy HTML, then paste into a text editor and save to a HTML file.

Answer 2

File → Save Page As... will save your edited markup as HTML, but it seems you may save some Firebu-generated content as well (I guess exactly what depends on your version of Firebug).

Answer 3

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 4

I think this is a good question, in short, firebug is not made to 'keep' your edits, so I would suggest finding a work flow where you are never too 'deep' into a page. One thing is to save the HTML but saving your edited CSS is even harder. Here are my solutions to your questions:

1. Click on HTML tag, click Edit. Copy and paste into another text file.

2. You cannot 'reload' firebug manipulated HTML. You can however copy the manipulated HTML after you are happy with your results (or unhappy). Either keep it on your clip board to copy it to a text file and then when you want to use it again you need to copy it back into the firebug edit console.

Answer 5

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 6

I'm not sure what you mean by "original context" but you could try to add the following to the head of the saved HTML.

<base href="http://slashdot.org/" />

Answer 7

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.