Firefox + Firebug + Web Developer Add-on = Easily Edit and Save CSS on Live Sites

I would pay to be able to edit the CSS of live sites and see the CSS take affect. I would pay but I don't have to with Firefox and the Firebug and Web Developer add-ons. I have written about Firebug before, which has been both a life saver and a productivity booster in that it gives you the ability to quickly identify elements within a design. Web Developer is an add-on I feel that I should have known about and am kicking myself for not knowing about it sooner. Besides the plethora (been waiting to use that word) of options, it gives you the ability the see and edit the CSS files affecting the page you're on and the edits affect the site live.

Using my site as an example, here is how I've learned to use it:

First, I right click the element I want to edit and select Inspect Element, which brings up Firebug at the bottom of the screen. In this case, it is the blog post title. Note that you must have Firebug installed first and have restarted Firefox.

In the screenshot above, you can see that Firebug displays the the page markup on the left and the CSS code of the selected element on the right. I take a note of the class that affects the font size, the css file it is in, and even the line.

Next, I close the Firebug screen (you can leave it open but it takes up sceen space) and right click the title again, but this time I go down to Web Developer > CSS > Edit CSS. This brings up the Web Developer CSS editor.

In the screenshot above, you can see tabs for each of the CSS files that affect the layout. The one I'm interested in is the style.css file. Here you can edit or write in any css code you want and the site will be updated live! Once you have it exactly how you want it, you simply click the save icon, save the .css file, and upload it to your host.

I know that with Firebug, you can edit sites and see the affect live but Firebug does not allow you to save the changes. You still need to copy and paste them into the .css file. With this combination, I've been able to dramatically speed up my workflow in that I don't need to open another editor (sad to not be using Coda as much) and I don't need to referesh every 30 seconds.

Update: Just want to give credit to Mark Wenzel who plays the mad scientist in the pic above. He saw this post and I want to give him credit. Click here to see the rest of his work. Thanks, Mark!