Why can't I save CSS changes in FireBug?

Question

FireBug is the most convenient tool I've found for editing CSS - so why isn't there a simple "Save" option?

I am always finding myself making tweaks in FireBug, then going back to my original .css file and replicating the tweaks.

Has anyone come up with a better solution?

EDIT: I'm aware the code is stored on a server (in most cases not my own), but I use it when building my own websites.

Firebug's just using the .css file FireFox downloaded from the server, it knows precisely what lines in which files its editing, I can't see why there's not an "Export" or "Save" option which allows you to store the new .css file. (Which I could then replace the remote one with). I have tried looking in temporary locations, and choosing file->save and experimenting with the output options on FireFox, but I still haven't found a way.

Here's hoping someone has a nice solution...

EDIT 2: The Official Group has a lot of questions, but no answers.

Answer 1

Since Firebug is not working on your server but taking the CSS from the site and storing it locally and showing you the site with those local changes.

Answer 2

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 3

I think the closest you're going to get is by going into Edit mode in Firebug and copying and pasting the contents of the CSS file.

Answer 4

Why don't you ask the authors? Or better yet, add the functionality yourself, its open source!

Answer 5

You could link firebug to eclipse with fireclipse and then save the file from eclipse

Answer 6

Here's a partial solution. After you make your changes, click on one of the links to the relevant file. This is the original file, so you'll have to refresh the file, which is under the options menu button in the upper right of the firebug pane. Now you have the modified css page, which you can copy & paste. Obviously, you'll have to do it for each css file.

Edit: looks like Mark Biek has a quicker version

Answer 7

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 8

The Web Developer add-on let's you save your edits. I'd like to combine the editing of Firebug with the Save feature of Web Developer.

Use the "Save" button (click CSS menu -> Edit CSS) to save the modified CSS to disk.

Recomendation: Use the "Stick" button to prevent losing your changes when you change the tab for doing other browsing. If it is possible, use only one tab to do the edit and other firefox window the related searches, webmail, etc.

Answer 9

Use the CSS editor in the Firefox Web Developer toolbar:

http://chrispederick.com/work/web-developer/

It's got enough good stuff to use in conjunction with Firebug, and it lets you save your CSS out to a text file.

Answer 10

You could write your own server scrip file that takes a filename parameter and a content parameter.

The server script would find the requested file and replace its contents with the new one.

Writing the javascript that tapps into firebug's info and retrieves the usefull data would be the tricky part.

For i'd personally rather ask the dev team at firebug to supply a function, it should't be too hard for them.

And finaly Ajax sending the filename/content pair to the php file you created.

Answer 11

I know this doesn't answer your question, but surprisingly, Internet Explorer 8's Firebug clone "developer toolbar" (accessible via F12) offers the option to "save html". This function saves the current DOM to a local file, which means that if you edit the DOM somehow, e.g. by adding a style attribute somewhere, this will be saved too.

Not particularly useful if you're using Firebug to mess around with CSS like everyone does, but a step in the right direction.

Answer 12

Not sure why you've been downvoted, but +1 from me: one of the major reasons people keep asking for this almost-impossible feature is that they don't appreciate the difference between a debugger and an editor.

why not having both in one? is that so hard to make?

Answer 13

I just released a firebug addon at the mozilla addon sandbox which might quite do what you want: https://addons.mozilla.org/de/firefox/addon/52365/

It actually saves the "touched" css files on demand to your web server (by communication with a one-file webservice php script).

Documentation can be found at my homepage or on the addon page

I would appreciate any testing, bug reports, comments, ratings, discussion on this, as it's still in early beta, but should already work fine.

thanks in advance, Tobias

Answer 14

I want change website table color with FireBug, but when im refreshing website.. All backs to normal..

Its possible to save this?

Answer 15

Been wondering the same for quite some time now,
just gut-wrenching when your in-the-moment-freestyle-css'ing with firebug gets blown to bits by
an accidental reload or whatnot....

For my intents and purposes, I've finally found the tool.... : FireDiff.

It gives you a new tab, probably some weird David Bowie reference, called "changes"; which not only allows you to see/save what firebug, i. e. you, have been doing,
but also optionally track changes made by the page itself....if it and/or you are so inclined.

So thankful not having to re-type, or re-imagine and then re-re-type, every css rule I make...

Here is a link to the developer (don't be disparaged by first appearance, mayhap just as well head straight over to the Mozilla Add-On repository .

Answer 16

I propose a solution that involves a combination of Firebug and FireFTP as well as code that directly accesses the local file system when running a website locally.

Here are the scenarios:

Working on a website that is hosted on a remote machine

In this case you would provide the FTP details and the location of the CSS/HTML/Javascript and Firebug would then update these files when you save your changes. It may even be able to locate the files itself and then prompt you to verify that it has the correct file. If file names are unique it shouldn't be a problem.

Working on a website running on your local machine

In this case you could provide Firebug with the local folder location of the website and the same behaviour would be used to match and verify the files. The access to the local file system could be performed through FireFTP if necessary.

Working on a website hosted remotely without FTP access

In this case something like the FireFile add-on would have to be implemented.

---

An additional feature would be the ability to save and open project files that store the mappings between the local files and the URLs they are associated with as well as saving the FTP details as FireFTP already does.

Answer 17

Your all using the wrong tool! http://www.skybound.ca/ My favourite companion! (although I still use firebug a little)

Answer 18

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

Answer 19

Here's a short video tutoral about the tool itself and using some basic features: http://www.litfuel.net/plush/?postid=161

If you google it, I am sure you would find a great deal more.

Answer 20

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 21

Use Backfire.

http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/

It's an open source solution that sends CSS changes back to the server and saves them.

Backfire uses a single javascript file, and the sourcecode package has a working .NET server implementation example that is easily portable to other platforms.

Answer 22

Like others I was looking for a good solution for doing the entire round-trip with html/css modification but today I found one.

I'm surprised that it still not listed to this question, but problably because is new and the author didn't had time to promote it yet.

It is called CSS-X-Fire and it is a plugin for JetBrains series of IDEs : IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine.

How it works: You install one of these IDEs and configure the deployment (supports FTP and SCP). This will allow you to stay in sync with the server.

After this you install this plugin. When it starts it will ask tell you that he will install a plugin for firefox in order to do the integration between Firebug and the IDE. If it fails to install the plugin just use the drag-n-drop technique to install it.

Once installed it will track all your changes from Firebug and you will be able to apply them with a simple click inside de IDE.

Answer 23

I am the author of CSS-X-Fire which Sorin Sbarnea also kindly posted about in this thread. Guess I'm a bit late ;)

CSS-X-Fire emits CSS property changes from Firebug to the IDE where the changes can be applied or discarded.

There are a couple of advantages with this solution over most of the other existing tools which only know know about the filenames and the content downloaded by the browser (see NickFitz comment in the original post).

Scenario 1: You have a website (project) which has a handful of themes from which the user can select from. Each theme has its own CSS file but only one is known to Firebug, the current one. CSS-X-Fire will detect all matching selectors in the project and let you decide which should be modified.

Scenario 2: The web project has stylesheets created compile-time or during deployment. They might be merged from several files and the file names may change. CSS-X-Fire doesn't care of the names of the files, it only deals with CSS selector names and their properties.

Above are examples of scenarios where CSS-X-Fire excels. Since it works with the source files, and knows about the language structure, it also helps to find duplicates not known to Firebug, jump-to-code, etcetera.

CSS-X-Fire is open source under the Apache 2 license. Project home: http://code.google.com/p/css-x-fire/

Answer 24

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