5 ms·

Backfire : Save css changes made in firebug

31 points by amritayannayak 15y ago

_ankit_ 15y ago
If you want to save the changes on the client side for when you're debugging, try the Stylebot Chrome extension: https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjei... The up side: You can immediately use it with any of your sites. No setting up required. The down side: It works on top of your existing CSS and you'll still need to copy/paste the CSS into your live version.
BasDirks 15y ago
Why I don't like this kind of solution (yet): I like to mess around in my CSS loads, trying different combinations, trying whether a property has an actual effect on the appearance/flow of the page, etc. I like to then make changes that have been throughly tested inside vim, :w, CMD-TAB, CMD-SHIFT-R. By separating experimentation and editing, I know exactly what is added to my CSS, without having to think about whether or not all in-browser changes are truly necessary for my purpose. I bet use of these kinds of extensions by inexperienced web-designers (togglers we might call them) will lead to extremely ugly and bloated stylesheets.
- rlander 15y ago
  Unless you accidentally close or reload the browser window (or there's a power failure). This has happened to me more times than I care to remember.
  - BasDirks 15y ago
    I create a "task" (you can do this with any todo app, but I use taskwarrior) for every change I make to my css, ie: "more appropriate top margin @ index". Then I solve exactly that problem, change the selectors/properties I need in my stylesheet, and review the solution (to see if other rules are affected or overwritten). define problem -> solve problem -> refine solution -> commit/save changes. might sounds slow, but really isn't, and keeps things clean.
willmacdonald 15y ago
There is a similar tool called http://code.google.com/p/css-x-fire/ http://code.google.com/p/css-x-fire/ which allows you to take the firebug changes and then selectivly apply then into PHP Storm IDE.
Vitaly 15y ago
too bad it doesn't help if you are doing any kind of server side css processing. sass, less, or even just combining css into a single file.
mikemaccana 15y ago
You can already do this in Chrome without doing anything (in Google fashion, though, the UI isn't very intuitive). Check Paul Irish's Chrome Dev Tools talk from JSConf 2011 for that and other tips.
- evilduck 15y ago
  For the lazy: http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/ http://paulirish.com/2011/a-re-introduction-to-the-chrome-de... (edit: around the 8:30 mark)
- primigenus 15y ago
  Not when we made this, you couldn't ;-)
tombot 15y ago
In case anyone han't come across CSSEdit before, you can pull in a page, live edit and it reloads the stylesheet on every keystroke. Features autocomplete and has a pretty decent inspector

If you want to save the changes on the client side for when you're debugging, try the Stylebot Chrome extension: https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjeifoejpgmdaleoha https://chrome.google.com/webstore/detail/oiaejidbmkiecgbjei... The up side: You can immediately use it with any of your sites. No setting up required. The down side: It works on top of your existing CSS and you'll still need to copy/paste the CSS into your live version.

BasDirks 15y ago

Why I don't like this kind of solution (yet): I like to mess around in my CSS loads, trying different combinations, trying whether a property has an actual effect on the appearance/flow of the page, etc. I like to then make changes that have been throughly tested inside vim, :w, CMD-TAB, CMD-SHIFT-R. By separating experimentation and editing, I know exactly what is added to my CSS, without having to think about whether or not all in-browser changes are truly necessary for my purpose. I bet use of these kinds of extensions by inexperienced web-designers (togglers we might call them) will lead to extremely ugly and bloated stylesheets.

rlander 15y ago
Unless you accidentally close or reload the browser window (or there's a power failure). This has happened to me more times than I care to remember.
- BasDirks 15y ago
  I create a "task" (you can do this with any todo app, but I use taskwarrior) for every change I make to my css, ie: "more appropriate top margin @ index". Then I solve exactly that problem, change the selectors/properties I need in my stylesheet, and review the solution (to see if other rules are affected or overwritten). define problem -> solve problem -> refine solution -> commit/save changes. might sounds slow, but really isn't, and keeps things clean.

willmacdonald 15y ago

There is a similar tool called http://code.google.com/p/css-x-fire/ http://code.google.com/p/css-x-fire/ which allows you to take the firebug changes and then selectivly apply then into PHP Storm IDE.

Vitaly 15y ago

too bad it doesn't help if you are doing any kind of server side css processing. sass, less, or even just combining css into a single file.

mikemaccana 15y ago

You can already do this in Chrome without doing anything (in Google fashion, though, the UI isn't very intuitive). Check Paul Irish's Chrome Dev Tools talk from JSConf 2011 for that and other tips.

evilduck 15y ago
For the lazy: http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/ http://paulirish.com/2011/a-re-introduction-to-the-chrome-de... (edit: around the 8:30 mark)
primigenus 15y ago
Not when we made this, you couldn't ;-)

tombot 15y ago

In case anyone han't come across CSSEdit before, you can pull in a page, live edit and it reloads the stylesheet on every keystroke. Features autocomplete and has a pretty decent inspector