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.
  • 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.

Leave a Comment