I am using Firefox more and more for actual development work, thanks to a few amazing add-ons that I use on an almost daily basis. I assumed that most developers knew about them but a friend of mine who is starting to learn web standards based web development was amazed when I demoed Firebug to him yesterday. In that light, here are 5 Firefox extensions that web plagiarists developers will find really useful.
This is the firefox add-on that I absolutely could not live without. When launched it provides a window at the bottom of the browser window that lets you edit and debug html, css and javascript in any page. You can easily explore the DOM and get the properties of elements incredibly quickly. The edit feature means that you can debug tricky pages and elements live. It has literally saved me hundreds of development hours.
One of my favourite features is the ability to pick a line of code in the source view and see the highlighted corresponding section on the live page. It is really useful for working out how your favourite site did something, and essential for anyone learning how the css cascade works.
Chris Pederick's Web Developer toolbar was the web development add-on that really started it all. Some of its features have been made redundant by the Firebug add-on, but it still has a host of really useful functions, like disabling all css or javascript with a single click, or resizing the browser window to a predefined size (something I use all the time).
You can also validate your pages, view generated page source code and outline any or all block level elements on the page. Really time saving stuff if you are trying to debug someone else's work.
Measure it is a simple add on that gives you an on-screen ruler that lets you check the width, height, or alignment of page elements in pixels. I cannot tell you how many times I have used this to check if an element is behaving as it should. Really simple and really useful
Colorzilla is a A collection of tools, including a photoshop style colour picker and an an Eyedropper that helps to get a colour reading from anywhere in a webpage.
To activate it, you click on the dropper icon in the status bar and then move around the page. As you move along you get the colour code of that point, its x and y coordinate and lots of other useful information like the DOM path.
IE tab lets you right click and open the current window in a new tab, using the IE rendering engine inside Firefox. Fantastic for occasional IE rendering, and a real time saver too.
What add-ons do you use? Is there anything essential that I have missed? Let me know in the comments.