How to save Firebug changes

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. However, it's not possible to save the changes you make and as soon as you navigate to another page, your changes are gone.

Today, I noticed this video with a very simple solution to the problem, you only have to download the Scrapbook Plus add-on.

Now, when you have changed anything with Firebug, rightclick with the mouse on the webpage and use "Bookmark with Scrapbook+" to save the content. You can use "ALT + K" to show the link to your content in the sidebar. Rightclick the url in the sidebar to see the location of your content ("properties"). For example, in my case the content was located at

/home/mark/.mozilla/firefox/0scdgtnn.default/ScrapBook/data/20120604162320/

All files that you have changed with Firebug is stored in that folder. Now, you only have to use FTP or something like that to move the changed files over to your server and you're good to go!

Comments

[net performance]

This is an excellent tutorial that solved many of my problems. Great thanks for it.
http://www.dapfor.com/en/net-suite/net-grid/tutorial/editors

[konnyei konyak]

can other see the changes that i have made to their status using firebug in facebook?? please reply and how?

[Mark]

Hi konnyei, the answer is no

[Johan]

But is html5 and media queries saved as well?

My two cents would instead go to cssUpdater, in which you sync all your changes (even with FTP support) with one click directly from FireBug.