Development Tools

September 2, 2010

Here’s what I have been using on FF lately to help in my front-end development:

• Firebug I have come to love this tool. Its’ ease of use and editing features are a necessity.
• Web Developer This extension is another must. I use this in conjunction with Firebug as it offers different features.
• de.icio.us Not a development tool but it makes it easy to save and find pertinent web sites for development.
• Firefox Accessibility Extension Developers can use the toolbar to check their structural markup to make sure it matches the page content.
• PageDiff Helps web developers and designers to see HTML-code(text) differences between web pages.
• ColorZilla Get a color reading from any point in your browser.
• MeasureIt Draw out a ruler to get the pixel width and height of any elements on a web page.
• FireShot Creates and edits screen shots of web pages.
• View Source Chart Draws A Color-Coded Chart of a Web Page’s Source Code.
• Dust-Me Selectors Shows which selectors are not being used.
• Rainbow Color Tools Extracts the color scheme from the current website’s images and CSS.

CSS Frameworks is a development process of breaking down style sheets into components that could be reused across projects. Blueprintcss is a CSS framework which aims to do this. BlueprintCSS also offers a easy-to-use-grid and there is actually a
Blueprint Grid CSS Generator as well. A cool Grid Bookmarklet is available here which is easily configureable.

The only tool I have for IE at the moment is for IE 6, IE Develper Toolbar, which I find very useful at times when IE 6 is doing its’ psycho thing.