tech.ablegray.com

Firefox: a web developer's best friend. Armed with the right extensions, Firefox really is the most powerful tool a web develop has these days. In this article, I want to highlight the web development extensions that I find particularly useful.

FireBug

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

FireBug is the tool for web developers. I want to list some of my favorite features:

Inspector

Browse through the DOM tree by mousing-over the webpage. It shows you the tree in well-formatted HTML, so you see all the attributes.

CSS Debugging

If you have the DOM Inspector installed, this extension will let you see in which CSS rules affect any particular element. For example if you notice something wrong with the padding on your element, open up the FireBug pane and click Inspect. Then, mouse-over the element in question and click it. Now, you can browse all the style properties. Find the padding section, and it will tell you, for example, that the padding-right is 2 pixels, and it was set by myStyles.css.

Web Developer Toolbar

This is a toolbar with buttons and menu items to do many, many things. Before FireBug came out, this was the main event. Now, it's still really useful. It can do a whole lot of stuff, but again, here are my favorites:

Highlight Elements

Highlights all elements of a certain type. e.g. Show me all my div's!

Edit CSS

You can edit the page's CSS in a sidebar. Very useful for adjustments.

Resize to 800x600

Resizes the window so you can see how your site how the less fortunate see it.

Validation

CSS, HTML, Links, Section 508

IE Tab

Open up IE in another tab. This is so useful because IE is so painful.

Server Switcher

A very small, but very useful plugin. You tell it what your develop and live servers are, and it will provide a button that will take you between live and develop versions of any page on your site. No more tedious typing in the address bar!

Well, I hope this was useful. If you haven't used any of these extensions, then try them out right now! They are easy to install and uninstall. Happy coding!