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.