Experimenting with Firebug | Fuzzy Tolerance

Guest Blogger: This entry is provided by Matt Crisp of Mecklenburg County GIS. If you are wondering why this blog post is of a higher quality than most of the drivel you read here, Matt is significantly smarter than I am. Don’t tell him I said that.

Firebug is a Firefox extension that allows you to inspect, debug and edit web pages within Firefox. I am a relatively new user of Firebug but have been thoroughly impressed. It is a very powerful tool. There is a little bit of a learning curve since Firebug does so much, but don’t let that scare you off. It is easy to get started and start learning. Once installed, Firebug is opened simply by clicking an icon on the browser status bar. Firebug opens as a panel docked at the bottom of the browser. The panel is resizable and can be undocked into its own window. One awesome feature of Firebug is that it works with tabbed browsing. Firebug maintains an independent session for each browser tab.

Speaking of tabs Firebug is a tabbed environment. There are six tabs that display different page information in the Firebug panel. Just above the tabs is a tool bar. The contents of the toolbar is dependent on which tab is active.

When you first open Firebug you will notice that the Console tab is active. The Console tab logs XMLHttpRequests; CSS and XML errors; and JavaScript warnings and errors. Each XMLHttpRequest can be expanded to view the response headers and text. In addition to event logging, the Console tab has command line access and a profile tool. The Console command line is located at the bottom of the panel and accepts JavaScript commands. I am not a big JavaScript guy so I have not utilized the command line to its fullest capabilities. I have managed to retrieve element information and variable values through it. The command line can be expanded so that you can write and execute more than one JavaScript command at a time. The profile tool, located on the toolbar, is great for identifying functions that may be slowing down your web site. When the profiler is active, Firebug records information about every function called by the web page. A report is displayed after profiler is stopped. The report consists of the names of the functions that were called, the number of calls made to each function, the percentage of total load time that was allocated to each function, the total amount of time allocated to each function and each function‘s file location.

The HTML tab displays the source code for the webpage. When the HTML tab is active the Firebug panel is divided in two. The left panel displays the source code of the page. As you move the mouse pointer over page element tags, the corresponding elements are highlighted on the page itself. You can edit your code within Firebug and see the effects on the web page immediately. However, it is important to remember that modifying the code in Firebug does not change the code in your source files. That is why it is best to keep your favorite editor open while modifying pages with Firebug. If you make a modification that you want to keep, click the Edit button on the toolbar and simply copy/paste the code from Firebug into your editor. The panel on the right is also tab driven. The available tabs are Style, Layout and DOM. The style tab displays the page’s CSS code. Just like the left-side panel you can make changes and immediately see the effects on the web page. In addition, it is possible to “suppress” lines within the CSS code. As the mouse pointer moves over each line of code a grayed out “no” symbol appears to the left. Simply click the “no” symbol (it turns red when activated) and Firefox will disregard that line of code. The Layout tab is incredibly useful when modifying the layout of you page. The Layout tab displays a box model showing the offset distance, margin width, border size and padding of the selected element. In addition, when the mouse pointer is hovering over the box model, rulers and guidelines appear on the webpage. The DOM tab allows you to inspect the properties of selected objects.

The CSS tab displays the code in the CSS file or files referenced by the web page. There is a drop-down box that enables you to select which CSS file to display. The CSS tab works just like the Style tab within the right-side HTML panel. Just like the HTML tab you can make changes to your code and “suppress” CSS code. So why is there a separate CSS Tab, you ask. It is there to enable you to copy/paste CSS code from Firebug to your editor.

The primary use of the Script tab is to debug JavaScript. The script tab allows you to place break points in your JavaScript. You can then step forward from the break point to pinpoint JavaScript errors. Firebug also allows you to place conditions on your break points. You can set a criteria and the code will only stop if that criteria is met. As I mentioned earlier, I’m not heavy into JavaScript. Explore at your own leisure.

The DOM tab allows you to view the values and properties of all of the elements of the page. I have not used the DOM tab very much at all. There is an incredible amount of information displayed, and I find it a little overwhelming.

The Net tab is awesome. It can be instrumental when fine tuning your website’s performance. The Net tab displays the load time for every file loaded in the webpage. Load times are listed and graphed. The graph is color-coded to show requests that are served by the page cache. This makes it very easy to see which files are slowing down your page load.

The last feature I feel I must mention is the Inspect tool. The inspect tool is available on the toolbar regardless of which tab is active. Use the Inspect tool to easily locate the code for specific elements of the webpage. When the Inspect tool is active, Firebug will display and highlight the code for any page element you move the mouse pointer over. This is a very cool feature since it liberates you from having to search through your code to find element tags.

Firebug does a lot more than what I have written about here. If you haven’t already tried it out, I highly recommend it. Firebug was created by Joe Hewitt and can be downloaded from his website (http://www.getfirebug.com/) or from Firefox’s Add On site (https://addons.mozilla.org/en-US/firefox/addon/1843).