To Whom?
Though I sound so exaggerating promoting for Firebug extension, but you don’t need it if you’re not belonging to one of the following communities:
- Web designer
- Web developer
Wait a minute; let me rephrase the above statement. If you’re neither of the above mentioned communities, still, Firebug is probably of your interest, if you’re a blogger who always like to view the source code of a website to learn how an interesting piece of interface design is coded, scripted, or CSSed.
If none of the above descriptions suit you, well, you may skip reading the rest of this post :p
Using Firebug
Once Firebug is installed in your Firefox, you will notice an additional icon on status bar
, at the bottom right of your window.When you have finish loading a webpage, a green tick icon will be shown. Upon clicking on this green tick, an additional panel will be expanded, displaying source code of the webpage. This is not the normal colored source code, but the relevant CSS codes will also be shown on each tag, if applicable.
Why I Love Firebug?
As mentioned above, by using Firebug, I can easily trace the CSS scripts applied to each tag. When I mouse-over on a particular tag in source codes, the associated design component will be highlighted on browser. So, I can easily read through the source codes, and know exactly which portion of the webpage is the line corresponds to. This helps me tremendously in debugging or tracing a site design.
Besides, I can also easily and directly modify the CSS script in Firebug editor, and preview the changes immediately, without manually changing the webpage file itself, regardless if I’m accessing to the physical file. For example, if the webpage background color is set to #FFFFFF (white), and I would like to preview how it looks like in #333333 (dark grey), I can just directly modify in the CSS code viewer, and the changes will be shown spontaneously.
Another interesting feature is the Net mode which shows the loading time and file size of the webpage, as well as its images and scripts.
Performance wise, at first I expected Firebug to be a memory consuming, as it needs to process so many formatting in a short fraction of time. But surprisingly, the addition of Firebug doesn't introduce any noticeable lag while loading a webpage. My Firefox still fitly performs as usual with multiple tabs opened. So far, I have no performance issue with Firebug.
So, enough of convincing features to push you into trying out Firebug? ;)