Firebug. Always
Firebug. Always
From the front page of the Firebug site we can read the marketing description.
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
So what does that mean to you? Assuming that you use Firefox as your main development browser (and there are many great reasons to do so), Firebug can make light work of all sorts of the everyday problems you might run into. In this article I am going to run through some of the ways in which I have found Firebug useful.
Research
When browsing in Firefox, hit F12 to open Firebug. Do it when you are on a site you like, and instantly see the HTML and associated CSS in use. Study the code of one of you favorites (in my case I may choose Dan Cederholm) and within a short period of time you’ll start to pick up the methods in use.
Experiment
Want to make some changes to your site? Fine, keep the ‘bug open and edit the HTML and/or the CSS directly, instantly seeing the changes taking place in the browser. No need to refresh, it does it on the fly and gives immediate feedback. If you think that 1pt border in #d1d1d1 might look better at 2 points in #fff, just do it, and see the changes unfold instantly. Tweak to your heart’s content, and when you get it just right, flip over to your server files and make the changes knowing the end result.
Learn
Struggling with the cascade? You are sure that making that addition was going to result in a bold font, so where did it go? The way in which Firebug shows the individual rules being applied to the element quickly resolves issues of specificity. Perhaps you need to name the class selector, or perhaps the element selector is missing? Chances are Firebug will have laid that bare for you in its native format making the penny drop just that little bit quicker.
Debug
Wondering why everything isn’t lining up? If it’s a padding or border issue it will soon be shown to you in full color directly on screen, margins are yellow, padding is purple. See exactly how your divs are pushing each other around by hovering over them in the HTML. I cannot recall how many times seeing the physical representation of a problem has made the remedial action super easy to determine and take.
Hone
Wondering just what a 1.4em piece of text with a 1.6 line-height represents in terms of pixels, with some margin top and bottom? Don’t bother with a calculator or a guess, click the ‘Show Computed Style’ option and see exactly what the browser determined. Box model still eluding you? Look under the ‘Layout’ tab and Firebug will give you a visual representation, with measurements. Default browser styles getting the better of you? Take a peek under the ‘DOM’ tab and see exactly what is being applied across every aspect of the element.
Program
Talking of the DOM. If you are making your first in-roads with JavaScript it is catered for as well as the HTML and CSS. Run scripts directly in the console and (again) see the immediate effects, set breakpoints and the level of error reporting to help with debugging, the options are huge.
Summary
I would recommend Firebug to anyone who wants to get to grips with the modern web. Due to the interactivity and immediacy I think that it is the one thing that has taught me the most about web-design and development. I have saved hours using it, and know that others have too.
Get it, use it and then wonder what you ever did without it.