Web Developer Extension: I don’t remember where I heard about this one, but it’s a peach of an extension. We’ve talked about the Web Developer extension for Mozilla and FireFox before, but the latest version comes with the sweetest sidebar you could ever imagine…
You can open the stylesheet for the current page in a sidebar, make changes to the CSS, and the page changes in real time.
You cannot believe how handy this is. Play all you like, and watch your changes happen, then just copy all the CSS and paste it into the actual stylesheet (or you can save directly from the sidebar). If the page has inline styles, they open in the sidebar too under a different tab.
Add Web Developer’s ability to display the CLASS and ID of every element on the page, and you never have to touch the HTML to re-do the style. Just fiddle with the CSS in the sidebar, and if you ever need to figure out how to “get at” something, just display the CLASSes and IDs for a second, then hide them again.
If you need to figure out how the spacing on the page works out, just add a quick CSS rule to outline all the DIVs in, say, green. Or use Web Developer to outline them.
This is as close to CSS heaven as I’ve come.
WikiAlong is a new extension for Firefox that’s so cool, I may need to go lay down for a while. Basically, it puts a Wiki page in the browser sidebar, and displays a Wiki entry for every page you visit with the browser. Wikalong is a FirefoxExtension that…
Web Developer Extension on chrispederick.com: I hereby declare this to be the greatest Firebird plugin ever. Ever wanted to reverse engineer a form submission using POST? Tough to do because the form data is based in the body of the request instead of the URL or the headers. …
A word of warning -- don't change tabs or click away from the page you're working on. You'll lose all the style changes you've made.
I've been using this feature for months, in the form of the ultra-handy Test Styles and Edit Styles bookmarklets from http://www.squarefree.com/bookmarklets/webdevel.html
The bookmarklets are extra useful because you don't need to restart your browser after installing them. They also persist styles across multiple pages on the site, which is pretty neat.
Agreed. This is the coolest extension ever. I wonder if there could also be a way of editing xhtml directly through the browser as well. Negating the need for any external editors.