Firefox just doesn’t stop delivering that, “more than just a browser” feeling. Developers bring you the best experience, which is why more and more people are opting for the organic browser; not just for browsing but for research, personalizing, development and more! Web development is one such area with many followers.
Web developers are always on the lookout for great tools and preferably open source. Design and maintenance gets easier when all the tools are integrated, instead of using different tools and cluttering your task bar and processor. Who wouldn’t love that? A one-stop solution for all your requirements. Firefox Ninjas brings you ‘yet another post’ of the much needed Firefox add-ons for web designers and developers.
Design and development of any page starts with analysing other models and style sheets. Developers nowadays, are not restricted to theoretical knowledge. The world is open to them for learning. We may end up finding a really attractive page and are, “oh so tempted!” to use a similar design. But originality is something that always bothers designers. Ethically, one cannot take the styling of a page and use it on for their own page. Most design developers don’t want their designs to match with the best website list.
So here comes, Web Developer, a perfect add-on that brings you the ultimate suite of styling and development tools. The add-on has options to disable a varied group of settings some of which are cookies, CSS, forms, images, outline and javascript. For example, if you want to view only the content of a page you can disable the CSS. It also provides window resizing options, validation tools for CSS, HTML, feed & links and editing source and also provides information about various objects of the page. And that’s not the last of it! The Web developer brings you all this in an action-packed toolbar. Haven’t you always wanted all these tools in one place?
When it comes to page design, developers would love a live preview of what they design. Firebug brings you all that and more! This add-on offers some serious and very cool 
features. It integrates development tools into Firefox and enables the developers to edit, debug, and monitor CSS, HTML, and JavaScript live in any webpage. Advanced developers prefer to use it for web security testing and web site performance analysis.
Javascript debugging? With a simple lightweight way to set breakpoints in scripts developers can go through execution, stepwise. Errors on webpages are a thing of past. Firebug adds a little icon to the Firefox status bar when your page is bad. FireBug panel immediately shows you the errors only in that page. Web 2.0 pages have a lot of action behind the screens; elements, styles, references. This add-on allows you to browse and inspect object references and elements. Browsing through the code is not enough which is why Firebug lets you edit the webpage, live! CSS styling holds a major part of a webpage. It was a difficult job to handle, well, until Firebug arrived. The tool brings you live CSS styling and editing. Colors, sizes, margins and all other features can be changed and previewed immediately. In addition to all this, it brings you network monitoring. Whether it is loaded javascript, large images or slow servers, this tool brings you stats of every file.
There are complicated add-ons, simple add-ons and then there is MeasureIt. It is by far the simplest add-on, but rates itself as very important on the developer’s list. It allows users to draw a ruler and obtain the pixel width and height of any object in a page. This is a perfect tool for all the novice developers to analyse the layout of a page, without the clutter of advanced tools.
The name says it all. This lovely simple add-on helps you to identify the CSS details of the text you select, on any web page, with just a click; select, right click and choose Font Finder and you have a dialog box full of CSS details such as color, font, spacing, decoration and element details. “There’s a catch though”. Font Finder, obviously, doesn’t work with rich typography renderers since the output is not in text format. But, its great otherwise.
At times it gets bugging to see your site load slowly; times when your patience is tested. These are the times to use YSlow! This add-on tests any webpage’s speed and suggests possible improvements to speed up the loading time. The improvements are suggested using 13 simple pre-defined rules. Best of all, the tool runs the test and returns individual and overall scores so users don’t have to read pages of advice!
It is also integrated with SmushIt, which compresses all the images in your site without loss in visual quality.
FireFTP brings you the same advantage apart from being comparable to most traditional FTP softwares. It has been downloaded approx. 10 million times till date. It also offers Synchronization, Automatic reconnect, Resume transfer, Drag & Drop, File hashing, IPV6 and more.
A page is nothing with the wonderful set of colors that brings it extraordinary brilliance. For example, most of the Firefox lovers remember vividly that the Firefox homepage wears a dark blue navbar. While reviewing sites for designs, developers may come across marvellous colors which they would like to use in their blogs or pages. ColorZilla makes it easy to do just that.
If you find your favourite color, all it takes is just a click to see its HEX, RGB or HSV values. Hovering over any colour with the tool enabled brings you the codes in the status bar. You can copy the code in any of the formats by right clicking the ColorZilla icon in the status bar. One of the best features is it also mentions the element tag, class and ID.
Loading ...That brings us to the end of a list of the most wanted add-ons for web developers. But that’s not it. We’ll be back with more! If you find add-ons apart from those mentioned here, please do leave a comment telling us how it is useful for web developers.
Last 5 posts by kv prashant
- What's your speed story? - June 2nd, 2009
- 5 Great Firefox Addons that make Online Research easy - May 17th, 2009
- 10 Firefox Personas you would Love - May 15th, 2009
2 Comments
Uhm, aren’t identical functionality to MeasureIt and FontFinder provided via the Web Developer Toolbar?
FontFinder equivalent:
CSS -> View Style Information
MeasureIt equivalent:
Miscellaneous -> Display Ruler
In fact, having used MeasureIt, I think the web developer toolbar ruler is far easier to use.
@Don Smith
True, both the features are provided in the Web Developer toolbar. But as I had mentioned in the post, they are “for all the novice developers to analyze the layout of a page, without the clutter of advanced tools”. But I have to agree- “web developer toolbar ruler is far easier to use”
One Trackback/Pingback
[...] 7 Firefox Add-ons that make Web Development Easier – I’ve posted similar lists before, but if you don’t have these tools installed, you should. /li> [...]
Post a Comment