Firebug is a popular Firefox extension that should not fail to have installed. Whether you're a web design professional or amateur, the great power of this tool will make you inseparable from your browser, it lets you edit, debug (debug for the purists) and monitor HTML, CSS and Javascript of websites in real time.

The design, colors, sizes, margins, HTML elements, fonts, backgrounds, etc.. Everything is editable using this extension. Its version 1.5.0, is compatible with Firefox since version 3.5 (and the current 3.6).

All HTML elements have a defined color with mouse-hover effects, which lets you know when we are editing the correct item. HTML tags are also expandable and features of the CSS elements are set to auto-complete.

Firebug opens in a section below the screen; press the F12 key or from the Tools menu in Firefox / Firebug / Open Firebug. If you feel uncomfortable that you can open the editor in another tab or in a floating window. Another way to edit HTML and CSS elements directly is selecting the item we want to edit and right click. Then, select the option from the context menu: Inspect Element.

When we open Firebug, we'll see at the bottom a panel with two sections.

The first section is the page's HTML code:

Here we see that we have, among other things, a menu consisting of the console edition, the html editor (default), the CSS editor, etc.

Another remarkable thing is the path element, which informs us in what hierarchy of HTML tags we are. If we place the cursor on these elements, we can view that page will be shading the sections so that we can visualize in real time.

The second section features panel taken from style sheets (CSS):

Here is the CSS elements taken from the referenced pages of HTML code. We can see that not only is there an element to a style, but in many cases there may be a parent style from which it inherits some other features.

To edit the elements only have to click on any of them. To add a new one must double click on the CSS element between keys. To disable CSS properties of an element just put the cursor on it and you will see a lock sign to be activated by clicking, after which it will turn red.

Obviously you will not change the website on the live server because changes are only seen in the local PC. If you want to restore factory settings just refresh the page in the browser with F5.