Firebug is one of those must haves if you are a web developer. It, along with many other Firefox extensions, is what made me switch from Internet Explorer. The plug-in I will talk about today is Firebug. You can download it from getfirebug.com and you will immediately fall in love. Out of the box, Firebug contains many useful “tabs” called Console, HTML, CSS, Script, DOM, and Net. In this article, I’ll detail the true power of each of these tabs.
You can probably guess what this tab does. It displays the pages HTML with nice formatting and allows collapsing of blocks, deleting of elements, and changing attributes on the fly.
Another great feature is that when you click "Inspect" and then mouse over an element; Firebug jumps you to that exact point in the HTML. From there you can change that element attributes, or even its style in the right hand panel. A style is disabled as easily as clicking to the left of a property, and enabled by clicking it once again.
CSS properties are also crossed out if they are overwritten by another rule. This helps you determine specificity problems, as well as seeing why certain styles are not applying the way you had hoped.
This tab shows only your CSS and has the same features as the CSS panel in the HTML tab. Properties can be toggled on and off as well as properties added/deleted in real-time.
Remember that when these changes are made, the files aren’t actually changed. As soon as you refresh the page they will be gone. This is the reason why you use Firebug as it is much faster than changing a CSS property, saving, viewing, and then doing the same thing again for using a different value.
Have you ever wanted a GUI for navigating the DOM? Well Firebug gives it to you. Here it shows your DOM elements such as your anchor tags, form element values, etc… It is really helpful when you’re not sure how to get at the child node that you want.
Finally, we have come to the Net tab. The Net tab breaks down all the HTTP requests into what was requested, the HTTP status code, the size, and even how long that one resource took to load. I don’t know about you but this is valuable information.
If you’re wondering what is taking the most time to load on your site, you can check this and see. You might occasionally find your non-optimized images taking a long time to load. This helps you spot these errors.
That about covers the basic functionality that Firebug provides. I will inform you that this is really only the tip of the iceberg. Below is a list of a few Firebug plug-ins that can extend its functionality even further:
- Rainbow for Firebug
- Pixel Perfect