I’ve read a lot of posts over the years on the top 50/100 of this that & the other, when it comes to apps and extensions, it’s a BS approach. No one is going to install that much stuff and if they do the situation will swiftly become an absolute mess.
I am designer, these are the add-ons that I consider essential, the one’s that get used on a daily basis & that if you havn’t tried, you should.
Some say this is the most handy toolbar there is for firefox… i’m probably one of them. If your designing / deconstructing websites this is a must have.
Top 3 Features
View Style Information – When you hover over elements within a website, it highlights it’s bounding box and then displays the route of how it is contained. This feature has helped improve my CSS endlessly!
Resize Window – It allows you to resize your browser to any given screensize, you can even create your own presets 1024×768 or iPhone. If you use a massive monitor or a silly resolution then this can help you keep it all in perspective.
Disabler – You can use it to disable any element, Javascript, Cache, CSS, Images. Perfect for testing accessibility issues.
I use this in much the same way as I do the view style information with the web developers toolbox. The key difference between the two apps’ features is that Firebug has a much more in depth & easy to use ‘Styles View’, moreover you can click the layout button and it gives a you a diagram of how the padding, border & margins effect the object your working with.
Not just an average screengrabber this mod can screenshot the whole page from top to bottom. Great if your working on a long design – e.g. blog, for a client. Also helps you get a better grasp of the overall layout consistency etc.
If you ever find yourself thinking, “by gosh! that colour’s bloody lovely!”, but then find yourself screenshotting and taking the screen into PS/FW etc etc then this is the tool for you. It works by adding a built in eyedropper into your Firefox, allowing you to get RGB values and Hex codes straight from their… Colour without the bumph.
Grid based design is really coming to the forefront of web based, usability at the moment with more and more people adopting systems such as the 960 Grid System. I’m a bit of a late adopter but have lately started implementing it heavily on client based CMS websites – it really helps keep things like mediaplayers, banners and other fluid-cms-elements.
Long story short Gridfox allows you to drop a grid over your live website helping you keep your design within the constraints.
If your still not a believer in grid based designs, this is the BBC websites style guide (grid based) and makes a very interesting read for any Grid lover/adopter… jeez i’m such a geek haha.
Hang on just a minute son, it’s all good and well telling me what you use for your designing & that but what other add-ons are you sporting…
If your interested in how to Become a Power User with Firefox 3 this link over at Lifehacker is a good guide.
