Why can't I save CSS changes in Firebug? [closed]

Answer 1

Firebug works on the computed CSS (the one which you get by taking the CSS in the files and applying inheritance, etc. plus the changes made with JavaScript). This means that probably you couldn't use it directly to include in an HTML file, which is browser/version specific (unless you care only about Firefox). On the other hand, it keeps track of what is original and what is computed... I think it should not be very difficult to add some JS to Firebug to be able to export that CSS to a text file.

Answer 2

A very easy way to "edit" your page is to go onto the site via your internet browser. Save the page as html only onto your desktop. Go to your desktop and right click on the new web page file and select open with, choose notepad and edit the page from there, if you know html it will be easy. After all your editing is done, save the file and reopen your webpage, the changes should be there if done correctly. You can then use your new edited page and export or copy it to your remote location

Answer 3

FireFile

Firebug was created to detect a problem not to be a debugger. but you can save change if you add new tool that integrate firebug with save changes. it is FireFile, click here http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html.

FireFile provide the desired functionality by adding a small PHP file to the server side.

Answer 4

Actually Firebug is a debug and analyze-Tool: not an editor and obviously not considered to be one. The other reason was already mentioned: how to you want to change CSS, stored on a server when debugging a webpage?

Answer 5

We just introduced Backfire, an open source javascript engine that allows you to save CSS changes made in Firebug and Webkit inspector to the server. The library includes an example C# implementation of how to save the incoming changes to your CSS.

Here's a blog post about how it works: http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

And here's the code hosted at Google Code: http://code.google.com/p/backfire/

Answer 6

I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):

Change CSS and SAVE on local file system using Chrome Developer Tools

I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)

Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded

I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)

---

[Update 1]

Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.

[Update 2]

If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:

Web Essentials: Browser tools integration