Firebug is Five Star

  • Phillip Peet
  • Phillip Peet

A colleague of mine first introduced me to Firebug several years ago and to be perfectly honest I initially found it very overwhelming. The split screen interface was confusing and I certainly wasn’t able to use it in a productive manner to debug web pages. How the times have changed. Although I must confess that my knowledge of Cascading Style Sheets [CSS] has increased, Firebug is a wonderful tool that I use when implementing commercial websites or assisting students with their work at TAFE.

What is Firebug?

Firebug is a popular extension available to Firefox users, which you can use to inspect and modify style and layout in real-time. With Firebug you can edit HTML, fine tune CSS, monitor network activity, debug, profile and execute Javascript functions live on any webpage at any time.

Download Firebug

A Few Common and Practical Uses

Background Image Repeating?

If you are like me and spend most of your life implementing web sites onto Content Management Systems (CMS) I recommend you test best and worst case scenarios. When a site has a section which requires a repeatable background image I always check to see how it would respond should my client double (or for that matter triple) the content.

In order to test a repeating background image inspect the area in question (by right clicking on the zone), click inside the HTML code window (on the left) where the paragraph appears, highlight the text and copy/paste the code over and over and over again.

Firebug Screenshot

FIrebug Screenshot

Image Not Appearing?

Speaking on behalf of all web developers I am sure you have experienced this problem in the past. What is wrong with my image? Why isn’t it appearing? If it is not an image it could be an external stylesheet or any other linked file.

To inspect a file path using Firebug position your cursor over the image area in question and inspect element (by right clicking). If it is a CSS defined background image you should see a file path on the background property (right hand screen). If not it may be a foreground image and therefore you should find the reference path in the HTML code (left hand screen). In Firebug if you hover over the file path it should display a thumbnail of the image. If an image doesn’t appear then it is generally one of two problems. There is an error with the file extension (usually caused by not saving for “Web and Devices” out of Adobe Photoshop) or there is a broken image path. For the later you can test this by copying and then pasting the path directly after the URL.

For example http://tambrez.philbossdesign.com.au/images/green-house.jpg. If a 404 error is displayed [image object does not exist] it is either an incorrect location or it simply has not been uploaded to the server.

Firebug Screenshot

FIrebug Screenshot

Leave a Reply

Your email address will not be published. Required fields are marked *