Firebug Layout Tab – Where Have You Been!
I have been using Firebug since it has been released. It is probably the greatest development tool created ever. Yes, the Web Developer Toolbar is great, but I feel Firebug dominates it in many ways. With both tools I probably only use about 30% of it’s capabilities, but it does me fine for now and every time I find out something new, it makes my life that much easier.
Finding Layout
For the last month or so I have been looking through more and more Firebug tutorials. One day I just so happened to go to the main FireBug page, and started reading the text on the homepage. I see a block of text talking about “visualizing CSS metrics”. I was instantly intrigued! I proceeded to click on the link where I was blessed with the capabilities of the Layout Tab.
I have looked at the Layout Tab before but dismissed it as some weird Box Model thing. Sure, some of you out there are thinking “You didn’t know you could do that with the layout tab”, but I am sure others out there have overlooked it.
What Does the Layout Tab Do?
The Layout tab is located after you select the html tab, in the right column next to Style. To get the element in which you want to know the box model specs, click on Inspect and hover over the html elements in the HTML frame. Before finding the layout tab I always used inspect and just the normal Style tab.
Some of the cool stuff it does are:
- Gives you the width and height of the inner most box, the actual specified width in your CSS.
- Gives the specified padding, border and margin of each side of the element.
- Something that I never thought of is the offset. This is the element that its left, top, bottom, and right CSS properties are relative to. Just think of when you are positioning an element absolutely inside a relative positioned parent and I think you will understand it.
- Not only does the Layout tab give you all these values but it lets you modify them.
Aren’t we happy now?
To sum it all up, this is a great piece of functionality that firebug offers and I felt others out there might have been missing the power of it. I have been using it religiously the last few days. It is much easier to edit the margin, padding, border, or width of an element then just using the edit CSS feature, which I find to be a bit buggy sometimes.
I think I might be posting a couple other entries on the functionality of Firebug that we might be missing. Please feel free to add any features you find you can’t live without. You never know if everyone else knows about it or not.