Skip to main content
Kinetic Community

Firebug

Firebug is an open source add-on that integrates with Firefox to provide development and debugging tools. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

How to get It

Firebug is available for download at http://getfirebug.com Navigate to that page with your Firefox browser and click "Install Firebug".

OR

You can go to the Add-Ons section (Add-Ons in menu or Ctrl+Shift+A) in Firefox, search for Friebug, and download/install it there.

How to use it

Never used Firebug before?  Getting the console open is simple.  On the page you want to work with in Firefox, right click somewhere on the page.  You will see a new item at the bottom of this menu: Inspect Element with Firebug.  This will open the Friebug Console at the bottom of your screen. 

FireFoxMenu.png

For details and tutorials, the Firebug site is a great resource. On Firebug's main page, there is a link toward the top of the page for Documentation.  This takes you to their wiki.  Within their wiki are FAQs, details on each panel available, and extensions. What you may find even more useful, though, is the Links page.  These link include information on tutorials explaining the use of Firebug as well as information on how to use it with other tools like jQuery.

HTML/CSS Debugging

Once you've chosen to inspect an element, the HTML tab of the Firebug console will open with the chosen element hightlighted.  You will notice that if you mouse over other elements, they will be highlighted in the screen above and you can switch which element is highlighted in the console by clicking on it.

FirebugConsoleHTML.png

 

The highlighted element in the HTML console, has it's style elements displayed in the style tab (to the right).  This displays all css that apply to the chosen element. The real power of this console, comes from the ability to modify/edit the css (Style) and Html in the console and see the changes live on the screen. You can change the HTML shown or styles listed in span or div tags in the HTML section of the HTML console by clicking on the text. Any changes are visible on the page above immediately.

FirebugHTML2.png

The Style tab has a number of ways to work with the CSS. For example, to remove a rule, you can click on the little circle with a line through it that appears the the left of the rule when you hover over it.

firebugStyle1.png  ->  Firebugstyle2.png

The icon will turn red and the line will be greyed out and the change will be visible on the page above immediately. Also, you can change the text in the css.  You could, for example, change the width by clicking on the current width value and typing in a new value.

FirebugStyle3.png

Another nice feature of the style editting in Firebug is that if you hover over a color value, ex. #636363, it will display a box of that color.

FirebugStyle4.png

 If you see a rule crossed out, it is because it is overruled by a different, more specific rule.

FirebugStyle5.png

The Layout tab helps visualize padding, boarders, and margins.

FirebugStyle6.png

If you are looking at styles on a grander scale than an element, you can access all CSS for the page on the CSS tab of the console.

FirebugConsoleCSS.png

This console has all the same features and functions as the Style tab on the HTML console, but the whole CSS file in question (in the image above, it's display.css) is shown.  The name of the file is also a drop down list that allows you to choose which loaded CSS file you want to work with.

Script Debugging

The Script tab of the console can be used to work with the javascript on a page. This works like the CSS tab in that the name of the script file loaded is a drop down list for all of the scripts loaded for that page.

FirebugConsoleScript.png

A good, complete explanation on how to use Firebug for script debugging is on DeveloperFusion.

Timing/Performance

Firebug's Net panel allow you to watch the timeline unfold for page load, monitor XMLHttpRequest (Ajax), and break the timeline down by type, cached and not cached.

FirebugConsoleNet.png

Firebug has a reference page for this panel, but there is a good introduction to the panel on Software is hard.