Top 5 FireFox plugins for serious webdevelopment
July 10, 2007Once, long before the Ajax and Web 2.0 era , there was a time we used HTML <center> for text-alignment and javascripts stunning alert() function for debugging our websites and applications. But times are changing. To develop high performance Web 2.0 'killer apps', we need more tools and better applications to create web applications based upon Javascript frameworks (such as prototype, jQuery, scriptaculous, moo tools etc.) feeded by PHP as a backend. Below I will sum up some free Firefox-extensions to build web applications quick, efficient and flawless. Ok, almost flawless then.
- FireBug (by Joe Hewitt)
Firebug (install) is a FireFox extension with a great number of functionalities. Inspect the HTML, CSS and DOM on your page, track and trace your HTTP-requests and discover what element on your page causes that irritating line of whitespace. Yes, it's all there. And since we're all here for the images, I'll give you some screenies:



- Web Developer toolbar (by Chris Pederick)

Although Web Developer Toolbar (install) offers some overlapping functionalities with FireBug, it still is a must-have for the webdevvers among us. Quickly validate your (local) HTML/ CSS, resize the screen to the minimal 600x800 resolution, and get deep insight in the structure of the page you are developing or inspecting. It even offers the ability to disable different elements on a page to trace if - for example - searchbots will correctly interpret your code. And off-course there is the handy page magnifier that prevents you from hanging 1 inch from your screen to inspect if that div element is perfectly aligned. - DevBoi (by Zhluk.com)
Forget your cheatsheets, DevBoi (install) is your new cheatsheet sidebar for FireFox. HTML 4.01/XHTML, CSS, Javascript, DOM2 an additionally Prototype documentation and browser compatibility, all in one place with a fast accessible sidebar. DevBoi comes in two versions. The online version offers references to w3c.org and quircksmode.org, while the offline version stores the complete documentation on your hd. So, if you don't remember if that CSS property came with or without the dash, just hit ctrl+F9 and look it up in a sec. - ColorZilla
ColorZilla (install) is a very handy, small tool to retrieve colors on web pages. Just by clicking the button in the bottom-left of your browser, it enables you to view color information of every HTML-element by rolling over it.
- FireFTP
Tired of switching between your webbrowser and FTP-client when working on remote projects? Here's your solution: FireFTP (install) enables you to have your FTP client inside FireFox. When editing a remote file, FireFTP pops up a window which enables you to upload the file directly.
So folks, that's it for today. Hope you enjoyed my first real post on Ajaxorized.com and keep up the good webwork!
Enjoy.
Add to:


I like the ColorZilla plugin, hadn’t sen it before. I like where it appears in the browser, nice and un-obtrusive.
However sometimes I want to know colours for other browsers/windows applications and for that, you can’t beat pixie: http://www.nattyware.com/pixie.html
Comment by zedzdead — January 23, 2008 @ 5:36 pm