How to iterate quickly when debugging CSS

firebugscreen.PNGFirebug is my tool of choice to fiddle with CSS. I'll edit the elements on the page, and then copy my changes back to the .css file. Then save.

If you're in a webapp, refreshing the page could take a while, so here's a great way to reload the freshest copies of the stylesheets. Drag this bookmarklet link to your toolbar:

>>> Refresh CSS <<<

Clicking it will modify any <link rel="stylesheet"> tags and append a timestamp at the end of each href attribute, thereby dropping the cache and grabbing a new one. It's quick and beautiful.

4 comments ↓

#1 Paul Irish on 01.21.08 at 5:57 pm

Bonus: firebug will refresh its display with the new styles as well.

#2 Seth on 01.23.08 at 2:11 am

Brilliant. Added it to my list of tools (increment/decrement page number, XRAY, and image zoomers)

#3 Remy Sharp on 02.04.08 at 12:53 pm

Hi, I followed your comment on my own site and found this post. Bah! You beat me to it. I'm working on a similar bookmarklet that reloads style sheets (though it does a little bit more too).

Great work though!

#4 Aaron on 03.04.08 at 6:02 pm

If you have a mac, check out CSSEdit. It can be used like a firebug/textmate that saves changes back out to the CSS directly. More interestingly, it can 'extract' style sheets from any site in order to let you start fiddling with changes. It's value completion is excellent as well.

Leave a Comment

Basic HTML is cool. Surround code blocks with <pre lang="javascript"></pre>.