I’ve been taking a few Firefox add-ons for granted, so here’s a little nod to some excellent add-ons which have made my life easier. I’m not going to list 50, simply because I’ve found either some do the same thing, or I don’t end up using them as much as I thought. So here they are:
- Firebug
- Web Developer Toolbar
- Dummy Lipsum
- IE Tab
Firebug
Firebug allows you to inspect whatever page you’re on and view the CSS and HTML from within the page.
This has always come in handy when editing (X)HTML/CSS which I didn’t write, as it takes a while to become familiar with the class and id names. Just click the little tick in the corner and Firebug appears, then use the inspect button above to select the area of the page to inspect. Hover over the title (like above) and firebug shows you the HTML and the CSS used to construct that element, along with all cascading styles. You can then edit the CSS to try different styles and get your layout right. This doesn’t actually edit the source HTML/CSS, so you can edit away without messing anything up. It’s also got some other handy features, like viewing the DOM and calculating loading times of all markup, scripts and images.
Web Developer Toolbar
Web Developer Toolbar Homepage
This works well with Firebug, although providing some of the same features, it’s also got the ability to highlight page structure by showing block level elements, div ids and classes and one of the features which I find really handy - resizing the browser window. You can set up various screen resolutions and resize your browser to test fluid and fixed width layouts.
Web Developer Toolbar can take any page to pieces and visually show you how it is built up. I find this is a good way to develop layout, as you can see how the divs are stacked up on the page, saving me from having to set background colours in order to get my layout right.
Dummy Lipsum
This pretty much does what it says on the tin - inset Dummy Lipsum text into forms.
If you’re developing a site but you haven’t got any content, you probably find yourself inserting dummy text, whether it’s a quick brown fox jumping over a lazy dog, or copying and pasting from some lipsum site, it all adds up. Dummy Lipsum allows you to generate and insert lipsum text into any form field on the fly. It may seem pointless now, but it’s saved me a lot of time, and as it’s always random the page always looks genuine when you’re skimming your eyes over.
IE Tab
This is a very neat way of quickly viewing any page in an Internet Explorer tab within Firefox. To get the ‘New IE Tab’ button like above you’ll need to go to view > toolbars > customise, then drag the button onto your toolbar.
If anyone wants to add anymore, please feel free to post a comment - thanks.