Experimenting with Firebug
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.
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 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).
Powered by ScribeFire.