Firebug addon is probably the most popular web developer tool that are used in the recent years.
VU32TJ9U7XU9 I started to know Firebug a few days after I installed my Firefox browser and my first WordPress site, and asked around in WP support forum about modifying my theme. If you need to set gmail as default email in Firefox, you can click here.
Although they were all helpful, the most often heard advice was installing Firebug.
Being curious what this tool can do, I installed it immediately with my browser, Firefox. In case you don’t find it inside Firefox, you can download here.
You can also still use Firebug if you use Chrome.
Then I started to love it.
Firefox’s built-in Tool vs Firebug
All through years, Firefox has many updates, and recently, it is integrated with web developer tool.
Nifty features are added, like profiler, 3D view, HTML and CSS real time editor, which are many features that Firebug have. However, I can’t leave Firebug, and I guess so can’t other web lovers too.
Firebug features that I couldn’t find in Firefox’s web tools are, switching hover or focus to inspect an element on a page, double click to edit values, Cookies, and many more.
How do I use Firebug
This is a “beginner” guide from me, since I am no expert on CSS or other web programming language, I just learn by my mistakes.
Inspecting HTML and Editing the Style
Inspecting an element, can be done by, putting your cursor on a site’s element, and right click it.
Other than right click, you will see Firebug icon on the top.
Now if you use Firefox, you will see “Inspect Element” and “Inspect Element with Firebug”, choose the one with Firebug to use it, because the first option is to use Firefox’s web tool.
I mostly use it to inspect HTML elements that a website page has, and once I found something, I inspect it, all the information about inspected element are immediately displayed in real time.
One of the information displayed is the CSS style like colours, font size , etc of your site’e element.
In the right sidebar (default position) of HTML, you can find CSS editor or “Style” to play around to meet your stylesheet’s requirements.
Here, you can inspect element, while Hover, Active or Focus-ing your cursor on one element.
Computed
Then “Computed” tab that will give you a lot of information in “Computer” value, to know more detailed of an attribute’s value.
Layout
Next is the “Layout”, that gives you the idea of the size of your inspected element, and if you enable “Show rulers and guides” option, it will give you better metrics visual, like size, position, z-index, padding, border or margins.
DOM
The “DOM” tab, as I mentioned in the video, I very seldom using it because I don’t need it. However if you work a lot with Javascript, you will love this tab.
So, in my opinion, I love the 3D view Firefox’s tool, but Firebug is just what I need if I have to inspect a page’s element. What about you?
