Web development tools

Debugging – Testing Tools

YSlow

This does come integrated with Firebug, and in short, analyzes web pages to provide performance information and grades on several things, such as: HTTP requests, images, coding and server info. Once evaluated, it provides an overall score and additional information on how to improve web pages.

http://developer.yahoo.com/yslow/

Dust-Me Selectors

Another Firefox plugin very useful for quickly finding unused CSS selectors. There are several ways you could do this, but I’ve found this tools is quick and the reports are simple but awesome.

https://addons.mozilla.org/en-us/firefox/addon/dust-me-selectors/

Adobe BrowserLab

An online service that provides a preview of how a Web page displays across browsers. Obviously, it’s  better to have multiple browsers and machines to test from, however, this gets down and dirty for a quick comparison.

https://browserlab.adobe.com/en-us/index.html

Internet Explorer Developer Toolbar

A must if you want to make sure  web pages display as intended in IE. Depending on the project requirements, I test for IE 7, IE 8 and IE9. You can download IE9, and it has options to test in all three versions within the same browser window. Load the page in the IE browser, press F12 and switch Browser Modes.

Code Compression

Quite a few compression tools called ‘minifiers’ or compressers for  jQuery, CSS code are available. The free ones I use are:

YUI Compressor

Great tool for compressing and reducing jQuery files (especially if  using multiple jQuery plugins) and CSS code.

http://developer.yahoo.com/yui/compressor/

JS Minifier

Another free tool for jQuery.

http://fmarcia.info/jsmin/test.html

Javascript Obfuscator

http://java-applets.org/online-jquery-minifier.html

CSS Sprite Generator

http://spritegen.website-performance.org/

What about CSS Grid Generators?

http://www.blueprintcss.org/