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

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 2

You can configure an external editor. Open firebug, on the left you have firebug icon, press it and click open in editor and then configure editors. It works with Gedit and Bluefish.

To configure gedit: open FireBug's configure editor and click add, name it gedit and then browse for the executable within 'usr/bin' and select or type in gedit. You can test the configura before saving.

Answer 3

Try cssUpdater, it consists of a FireFox add on that listens to your FireBug css changes over a socket server and let you sync your original css source files. You need to install the Desktop application as well.

So a workflow would be:

1. Edit in FireBug
2. Click sync in cssUpdater
3. Reload your site and see that your changes is saved

You can test and use it here, http://www.cssupdater.com

Answer 4

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 5

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 6

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.