A while ago I already showed several handy plugins I like to use. Of course the world keeps on turning and new plugins are created or I just happen to stumble on little gems by accident. Here are some other plugins that I like to use:

Dust-me selectors: finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere.

View source chart: A handy way to visualize the generated html.

Page speed: Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them. A handy plugin by Google.

Grz, Kris.

Since more and more people are using ajax and as such javascript/ecmascript, you as a developer/designer need tools to make it through the day. Here are some that I like to use:

• jsmin: compresses javascript
• YUICompressor: compresses javascript. I’ve also written an article on how to integrate it in Visual Studio: Compressing and obfuscating javascript and css files with YUICompressor in Visual Studio
• jsbeautyfier: “uncompresses” javascript (handy when you have a minified version of a script and want it to become more readable)
• jslint: The javascript Code Quality Tool

Grz, Kris.

Web developer or designers don’t only need to check their creations in Firefox but they mostly also love the browser for the simple fact that there are a ton of handy plugins available for that particular browser that makes their effort easier. The last half year I also discovered quite some interesting plugins so I thought it would be nice to share those.

Web developer toolbar. Adds a menu and a toolbar with various web developer tools.

Firebug. Must have plugin which I already used a lot during my current project. Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page...

YSlow. Integrates into Firebug. YSlow analyzes web pages and tells you why they're slow based on Yahoo's rules for high performance web sites.

Firescope. FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. This is a nice tool that can help you out to search the html and css archive from the known site sitepoint.com.

Colorzilla. Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies...

Measureit. Draw out a ruler to get the pixel width and height of any elements on a webpage.

jsview. All browsers include a "View Source" option, but none of them offer the ability to view the source code of external files. This tool makes it possible to show the external javascript and css files.

IE Tab. Switch to IE from within Firefox. Very handy to see how your page will be displayed in IE.

Greasemonkey. Allows you to customize the way a webpage displays using small bits of JavaScript.

Cacheviewer. This extenion is GUI Front-end of "about:cache". Allows searching and sorting memory and disk cache files.

There are a myriad of other plugins and addons to be found for Firefox. These are the ones I used during the last half year. Especially Firebug and YSlow have become some of my favorite tools during web development. Firebug is the allround tool in which you can debug javascript, see the box model of an element, drill down, play with css settings like disabling or changing settings. I really recommend people checking it out. YSlow gives you a good indication where and what you can improve when performance becomes a concern to you.

Grz, Kris.