Browser extensions to re-render the page using an updated version of my CSS file, without reloading the page itself

I want to learn Web 开发者_运维百科UI design. (I know, I know. Being a programmer puts me at a disadvantage. But I want to try anyway.) Thus, I would like to "debug" my CSS files.

Once of the biggest annoyances I have found is that I cannot test a change in my CSS files without reloading the whole page. Sometimes, the page is too big. Sometimes, a lot of elements were brought to the page after lots of clicks, because my pages rely too heavily on AJAX. Sometimes, I just hate hitting Command+R all the time.

Is there any extension for any of the major browsers (preferably Safari and/or Chrome) that re-renders the page using an updated version of the CSS file, without reloading the whole page itself?

Try the developer tools in chrome, using them you can live edit your css definitions. Although I don't know an extension that allows you to reload only a stylesheet, this might work for you when you want to test only a few changes. Firebug for Firefox allows the same thing.

The Firefox "Web Developer" plugin allows you to "Add User Style Sheet..." from its menu. It also has an "Edit CSS" feature that lets you live-edit the contents of the css files (for example file1.css and file2.css would have two editor tabs - one for each file) and lets you save the edited file.

I tend to use Firebug more often myself, as Paul suggests, and you can copy+paste the changed css file content from it back into your actual css file.

Stylebot extension for Chrome is great too.

You can quickly edit and view your changes. And can actually save this to personally view sites that you can save in a list with edited display from what you modify for the website's default stylesheet.

Stylebot allows you to quickly manipulate the appearance of any website (using custom CSS). Using Stylebot, you can personalize the look and feel of your favorite websites. It is also a great tool to learn CSS and for debugging your own site's design.