Using Firebug Addon with Firefox

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.

3D feature Firefox's web developer tool
3D feature Firefox’s 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.

Firebug in action, edit background color in real time
Firebug in action, edit background color in real time

Inspecting HTML and Editing the Style

HTML in the left, style in the right side
HTML in the left, style in the right side

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.

Firebug icon
Firebug icon

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.

Inspect element with Firebug
Inspect element with Firebug

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

Computed tab
Computed tab

Then “Computed” tab that will give you a lot of information in “Computer” value, to know more detailed of an attribute’s value.

Layout

Layout
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

DOM tab for javascript
DOM tab for javascript

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?