Firebug: A Developer’s Best Friend

Firebug is one of those must haves if you are a web developer. It, along with many other Firefox extensions, is what made me switch from Internet Explorer. The plug-in I will talk about today is Firebug. You can download it from getfirebug.com and you will immediately fall in love. Out of the box, Firebug contains many useful “tabs” called Console, HTML, CSS, Script, DOM, and Net. In this article, I’ll detail the true power of each of these tabs.

Console

The console is a place where you can directly run JavaScript on any existing page. Try typing some JavaScript in the text area and clicking run. Try the following:

Firebug Console

When this runs, you will get an alert of all the anchor href attributes in the current page. Your imagination is really the limit as any JavaScript can be placed into this box.

As well as running JavaScript the console also shows XMLHttpRequest’s or in other words AJAX requests. It tells you the file that was requested, with what method (GET or POST) as well as what was sent and what was received. This functionality is also shown in the Net tab but is sometimes easier to debug AJAX using the console.

HTML

You can probably guess what this tab does. It displays the pages HTML with nice formatting and allows collapsing of blocks, deleting of elements, and changing attributes on the fly.
Firebug HTML Formatting

Another great feature is that when you click "Inspect" and then mouse over an element; Firebug jumps you to that exact point in the HTML. From there you can change that element attributes, or even its style in the right hand panel. A style is disabled as easily as clicking to the left of a property, and enabled by clicking it once again.

Firebug CSS

CSS properties are also crossed out if they are overwritten by another rule. This helps you determine specificity problems, as well as seeing why certain styles are not applying the way you had hoped.

CSS

This tab shows only your CSS and has the same features as the CSS panel in the HTML tab. Properties can be toggled on and off as well as properties added/deleted in real-time.

Remember that when these changes are made, the files aren’t actually changed. As soon as you refresh the page they will be gone. This is the reason why you use Firebug as it is much faster than changing a CSS property, saving, viewing, and then doing the same thing again for using a different value.

Script

The Script tab contains your JavaScript code. It allows you to use the basic debugging techniques in your browser. It features breakpoints, finding out the values of variables, and code walk-through.

Setting breakpoints is as easy as clicking a line number and a red circle will appear. Breakpoints are best used entering functions, and objects. Once a breakpoint is set you should refresh the page and do the task to trigger that JavaScript event. Once triggered you use the controls in the top right corner. You can choose to play JavaScript until next breakpoint, step into code block, step over code block, or step out of the current code block.

Firebug Script Tab

DOM

Have you ever wanted a GUI for navigating the DOM? Well Firebug gives it to you. Here it shows your DOM elements such as your anchor tags, form element values, etc… It is really helpful when you’re not sure how to get at the child node that you want.

Here it also shows your JavaScript variables and what their current value is. If you don’t have Firebug you will need to keep track of all these in your head or do a pile of alerts to see a variables value.

Net

Finally, we have come to the Net tab. The Net tab breaks down all the HTTP requests into what was requested, the HTTP status code, the size, and even how long that one resource took to load. I don’t know about you but this is valuable information.

If you’re wondering what is taking the most time to load on your site, you can check this and see. You might occasionally find your non-optimized images taking a long time to load. This helps you spot these errors.

Firebug Net Tab

That about covers the basic functionality that Firebug provides. I will inform you that this is really only the tip of the iceberg. Below is a list of a few Firebug plug-ins that can extend its functionality even further:

  • YSlow
  • FirePHP
  • FireSpider
  • FireCookie
  • SenSEO
  • Rainbow for Firebug
  • Pixel Perfect

16

Comments