20

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.
Improve this question

9 Answers 9

Reset to default
10

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.

Improve this answer
5
  • Thanks! That solves the first question. Do you know how to re-read a previously manipulated DOM tree?
    – knorv
    Commented Feb 2, 2010 at 15:35
  • For that just load the saved HTML file in Firefox.
    – Ignacio Vazquez-Abrams
    Commented Feb 2, 2010 at 15:40
  • Simply loading the HTML file won't give me the "original context" of the page (slashdot.org in the example). So all references entities (CSS, images, etc.) won't load.
    – knorv
    Commented Feb 2, 2010 at 15:44
  • @knorv So all references entities (CSS, images, etc.) won't load. They should. If some don't it could be due to them having relative urls. In this case adding base tag as suggested by johnmdonahue should help.
    – Piotr Dobrogost
    Commented Apr 11, 2011 at 20:24
  • This works in current Firefox Web developer tools as well. (Inspector -> right-click the top-level html element -> Copy -> Inner HTML). It will also save changes made with the Edit page bookmarklet here. (Cmd-S will not include changes made with Edit page or developer tools)
    – Joshua Goldberg
    Commented Nov 21, 2020 at 22:55
8

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!

Improve this answer
1
  • 1
    The Web Developer sequence described seems to no longer exist. Whether the functionality to save the Generated Source still exists, I have no idea... I couldn't find it. I could do a Copy HTML from firebug, and paste in an editor, and that worked, not needing Web Developer, but this is a bit cumbersome.
    – Victoria
    Commented Oct 14, 2016 at 7:08
2

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/" />
Improve this answer
1

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.

Improve this answer
1

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.

Improve this answer
1

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

Improve this answer
0

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

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.