Firebug is an indispensable tool to a web developer. Whether you are an amateur and have no idea how to start being a web developer, or a seasoned professional, Firebug cannot be eliminated from your web developer's basic set of tools. In this three-part series, we will take a look at how to make the most of this browser add-on.
Contributed by Codex-M Rating: / 6 August 31, 2009
By definition, Firebug is an add-on installed in the Firefox browser that will enable you to see the HTML, CSS and JavaScript codes of a certain web page and make changes in real time without requiring you to have site access or save files, like in a local host.
To sort out any possible compatibility issues between using Firebug in other operating systems, this tutorial focuses only on the use of Firebug in Windows XP operating systems. Firebug can also work in Linux operating systems; however, addressing those differences is out of the scope of this tutorial.
As to why Firebug is very popular compared to other web development tools, it is because it is FREE. Everyone loves to use free but useful tools, and Firebug fits this description. To effectively use Firebug, you must use the Firefox browser (download link can be found above).
If you are looking for both basic and advanced techniques in the use of Firebug, keep reading.
It is highly recommended that you download Firebug from only one source (http://getfirebug.com/) to eliminate any possible malware and spyware issues that may be injected into the add-on to exploit your browser and your computer. After downloading it from a trusted source, you will need to install it. Click "Install Firebug 1.4 for Firefox" (version 1.4 at the time this tutorial has been written).
Bear in mind that different FireFox versions may have different Firebug versions, too, so you'll need to install the correct version as instructed at the download site. After successful installation of Firebug in your Firefox browser, you'll be able to see it in View -> Firebug in your browser.
To launch Firebug, you can either go to View -> Firebug or just press the shortcut F12. By default the Firebug window can now be viewed in the lower part of your Firefox browser. See the screenshot below (inside the red box):
The good thing about using Firebug is that it does not require users to configure to start, unlike some other web development tools. After installation, you can start using it without hassles in configuration.
Although a configuration menu (options) for Firebug can be found in Tools -> Firebug, in this tutorial we will discuss those options that maximize the use of Firebug in your web development projects.
According to the official Firebug page, Firebug can be used for the following web development tasks:
Inspect and edit HTML.
Tweak CSS to perfection.
Visualize CSS metrics.
Monitor network activity.
Debug and profile JavaScript.
Quickly find errors.
Explore the DOM (Document Object Model).
Execute JavaScript on the fly.
Logging for JavaScript.
The first three items are basic techniques while the remaining items are somewhat advanced techniques.
We will start mastering the basic techniques before proceeding to study the more advanced applications of Firebug.
Before we can edit HTML, we must know how to inspect it. First we launch Firebug using F12, and then click the Inspect element button/tab (see screenshot below inside the dotted red box).
When the inspect element tab is activated, you can freely move your mouse to point to the element you would like to inspect. If the mouse pointer appears to be out of control and you find it hard to inspect the element, just close Firebug by clicking "off" located in the right section of the tab, then start it again.
You will need to practice some to gain the skill to point to the element you wish you inspect. Sometimes it requires you to suddenly move your mouse or perform some specific kind of mouse coordination to move the arrow to the correct element.
Again, do not feel discouraged if you experience a few problems with this; it is normal. You can close Firebug and then start again.
IMPORTANT: To hold the element to be inspected steady, press the "right click" button on your mouse once. This should hold your chosen element in the Firebug console, and thus it will not move regardless of whether your mouse arrow moves again.
The inspect element window consists of two major parts, the HTML window and the CSS (style window). The HTML window is on the left side, while the CSS window is on the right side. As you inspect the HTML element, Firebug also gives you the style of that page. This makes Firebug a very flexible tool.
As an example of inspecting HTML elements, I have inspected the word "Dictionary" (which Firebug encloses it inside the blue box to signify as an inspected element).
Shaded in light green in the Firebug console is the actual HTML code representing "Dictionary." On the right side is the CSS (Style) console where the underlined elements are the style directly affecting the inspected elements.
As discussed previously, we can edit HTML and see the results immediately in real time. This is one of the biggest advantages of using Firebug. To do this, follow these four general steps:
Launch Firebug in the HTML page you would like to inspect (press F12).
Click the "inspect element" button and point to the HTML element you would like to inspect.
Press the "right click" button of the mouse to hold to that element.
You can now start editing the HTML.
To effectively edit the HTML and see the results, you should use the "edit" button in the Firebug HTML console, as this provides a cleaner area to edit than directly editing in other available methods.
To do this, click the "edit" button and highlight those elements you would like to edit. In the screenshot below, I am about to edit the word "Dictionary:"
After changing any of the edited elements, Firebug automatically reflects those changes in the actual HTML page. There are things you should keep in mind when doing real time editing:
Pressing F5 (refresh) or reloading the browser will erase all the edits done using Firebug. This means you should be careful not to reload if you still have not completed doing the edits, or else you will have to start all over again.
This is not perfect. Sometimes Firebug is subject to limitations. For example if you are correcting a browser incompatibility issue with Internet Explorer, you cannot test it using Firebug, because in order to use Firebug you are using Firefox.
We will proceed with the second part of this tutorial to touch on the beauty of mastering CSS (HTML styles), which can be done very easily with Firebug.
/ 6 
Implement Gzip and Deflate Compression in ASP.Net
