Advanced Firebug Techniques in Windows XP Home

Again, it is highly recommended that you read the first two parts of this tutorial if you are completely new to Firebug.

Actual Example of CSS Metrics Adjustment

One of the most useful and basic functions in Firebug, which appears tricky, is adjusting layouts. We ended part two of this tutorial with a basic introduction to making CSS metrics adjustments. Let us give an example:

Suppose we wish to widen the post width and decrease the sidebar width, and want to test it using Firebug. The first thing we will do is conduct measurements (in pixels) and measure the total width occupied by both the post and the sidebar.

Total width = Total post width + Total sidebar width

Note: The screen shot combines two CSS measuring elements for both post and sidebar for clarity purposes. When you do the real inspection, you can only do this one at a time (for example, measuring one element after another)

The post width is 660 pixels while the sidebar width is around 300 pixels. These widths are a total of the padding widths and the actual widths: (1+10+278+10+1). Therefore the total width is around 960 pixels:

Total width = 660 pixels + 300 pixels = 960 pixels

If we plan to increase the post width to 730 pixels, for example, we'll want to preserve the total width. To preserve it, the sidebar width will decrease, to around 230 pixels (960 pixels - 730 pixels = 230 pixels). In order to edit the values, just click on the number, and then you can replace it with your desired values. Firebug will automatically increase the width. See below for the sample revisions. The value of 660 pixels was changed to 730 pixels. 

As simple as this example is, you can apply this concept to adjust complicated layouts.

Improve Loading Times with Firebug

Firebug offers an event monitoring tool that can be used to improve the loading times of a website. A slow loading website is a stressful experience, as it wastes the user's time and affects the profitability of your website. The Official Firebug website calls this feature "Monitor Network Activity."

By default, this feature is disabled. To enable it, launch Firebug and click the "Net" tab. Under the "Net" tab, click "Enable." 

To get data, reload the page and the graphical data will be shown. See the screen shot below:

Look for bottlenecks, those items that consume most of the loading time, and start correcting them. After improvement, you can run the loading test time again.

Profile and Debug JavaScript

You can use Firebug to troubleshoot JavaScript. This is true if you use JavaScript in your web development. Troubleshooting JavaScript will not be that hard.

One of the issues confronting JavaScript-based development is the performance of the script. If you write a sluggish script, it can drastically slow down the loading time of the site. By combining Firebug techniques to improve loading times with a JavaScript debugger, a web developer can dramatically improve a web site's performance.

To debug JavaScript, Firebug offers two functions available as two tabs. When  Firebug is launched, look for the "Script" and "Console" tabs (which can be found in the same location as the "Net" tabs I mentioned above). These two tabs form the foundation of JavaScript debugging.

Detailed debugging of JavaScript using Firebug is a broad topic and is beyond the scope of this tutorial.

Firebug: Some down sides and limitations

As I've mentioned before, Firebug is very helpful, but it isn't perfect. Here are two problems you can expect to experience with the tool.

Slow Browsing Experience

Using Firebug can slow down your browsing experience if it is turned on and installed. This is particularly true when visiting websites that depend heavily on JavaScript applications. 

The best recommendation is to turn it off or disable the add on when not in use. Even Google Mail (popularly known as Gmail) suggested turning it off because it will slow down page loading and application.

To do this, go to Tools -> Add-ons -> Select Firebug from the list and click "Disable." You can enable it again when you use it.

Server Side Limitations

Since Firebug is a browser add-on, it cannot be used with server side scripting technologies like PHP and ASP.NET. Only the outputted HTML can be inspected and edited by Firebug; the server side scripts cannot be directly inspected since they reside in the server, not in the browser.

To resolve this limitation, have a local host that executes server side while Firebug checks the output HTML. If tweaks on the server side scripts are needed, do it within the local host server, which is often faster and safer than doing it on the real FTP web server (at the hosting side).

Best Practices

To maximize the benefit of using Firebug as a beginner wanting to become a professional web developer, you'll want to follow the recommendations in this section. 

First, start with basic inspection of HTML code used to produce the output. Have an attitude of curiosity when it comes to inspecting HTML. This will enable you to learn coding faster. Especially if you are learning JavaScript, you can pause an event to see if there are problems with your code or you plan to load it faster. Hint: try to experiment with test buttons like the pause.

Second, use Firebug to edit HTML first in real time, and then master the use of Firebug to develop both the template and CSS files.

Third, disable Firebug when you are not using it for a long time (for example, when you are doing a lot of non-web development work, such as browsing or checking mails).

Fourth, use Firebug to speed up your website by examining loading times. Personally, I seldom use this feature, though it might be helpful in other developers.

Fifth, update Firefox regularly, and also update Firebug for security reasons.

Sixth, if you need to test your results in other browsers such as Internet Explorer, Safari, Opera, etc. use Firebug Lite. It offers a solution for testing your code in other browsers. This can be helpful when trying to diagnose browser compatibility issues.

Finally, wait for the whole page to load before launching Firebug. When the page is loading, Firebug may not completely launch the associated HTML source code of the page. For this reason, it is highly recommended that you wait until all HTML elements are loaded before pressing F12 or inspecting an element. This will ensure that you are analyzing or testing complete sets of HTML or JavaScript code. 

I find the first two items to be the most important of the best practices. But it's up to you to implement them, and they are all recommended.