If you hand code your Web sites, you don’t really have a lot of tools available to help debug your code or find problems with your CSS. Even if you use a GUI editor, you can’t really test a site until you upload it to the Web and test it in your browser. Then, when you need to make changes, you’ll have to flit backwards and forwards between your browser and your editor to make the changes, upload them, and then test them. Well, help is at hand in the form of Firebug, which is a tool that can help you develop a site by providing an interface for working directly with the code.
Downloading Firebug
Firebug is a Firefox extension that adds Web development functionality into the browser. If you haven’t used extensions before, an extension is a small program that you download and install into your browser. Firebug works with Firefox, so you need to install and launch Firefox first. When you’ve done this, visit www.getfirebug.com and install the extension.
Firebug works with any Web site, so you can use it to work on a Web site you are developing and you can also use it to poke around other people’s Web sites. Once Firebug is installed, whenever you load a Web page, you will see a small indicator in the bottom right corner of the Firefox window. A green tick indicates that the page has loaded correctly and a red cross indicates that there were problems with the page. Click on this indicator to open the Firebug panel.
Inspecting With Firebug
Across the top of the Firebug panel, you’ll find the Inspect and Edit tabs. Click on Inspect and click on an item in the browser window and Firebug will change the panel display to show you information about the portion of the page you clicked in.
You can learn more about the page by clicking on the links to items such as HTML, CSS, Script, DOM and NET. The NET option is useful for determining how fast the page loads and, if it is sluggish, what items are slowing it down. It shows each of the objects on the page and indicates the download time. If there are images in the list, for example, hold your mouse pointer over the image name and you’ll see a thumbnail of the image. Use the information to identify uncompressed images and other elements that are slowing down your page.
The CSS option shows you the styles behind the page, but if you want to see them in place, click on the HTML option, click on Inspect and hold your mouse over the page, or click on a portion of it and the CSS will appear in the right-hand panel.
This tool is very useful if you are developing a Web site using a template, or if you are updating a site someone else created. It helps you locate the styles that affect the selected portion of the page. Any style in the CSS area that has a line through it is a style that affects that text or item, but which has been superseded by a style that has a higher precedence.
New Window
If you are finding it difficult to work on a page with Firebug open in a small panel, you can open Firebug in its own window. To do this, choose Tools -> Firebug -> Open Firebug in New Window and the tools that you have at the foot of the screen will be moved to the new window.
Editing With Firebug
If Firebug only allowed you to inspect and view the code affecting a page, it would be a great tool. However, it can do so much more than that. With a page visible on the screen, click on the Edit button and hold your mouse over and element on the page. Now, in the CSS area you can make changes to the style properties by typing over the top of a value. A small type-in box will attempt to locate a match in the values allowed for that property.
When you have made the change, the page will be updated to show that element formatted with the change that you have made. So, for example, you can instantly change text alignment from left to right and see how it might affect the look of your page. If you decide you like it, make a note and you can then change the original code at a later time - remember, the changes you are making in Firebug are only temporary and not permanent. The benefit of Firebug is that you can test different things on your Web site live in a browser to see how it looks without needing to return to your editor, make the changes, upload the page and then reload it.
In addition to making changes to property values, you can also add new properties. To do this, click in the CSS box, right-click and choose New Property and you can add another property and value and test that.
If there is a CSS element that you want to disable for the site, hold your mouse pointer over the CSS line to its immediate left until the Stop symbol appears. When you see it, click to disable that statement and you will then see how the page would look if that style property were to be removed.
The Layout tab gives you a view of the layout areas on the page. So, click on Inspect mode and hold your mouse pointer over an area on the page to see that area’s dimensions, including any padding, borders, margins and offsets.
If you are interested in Web development, you will find that Firebug is an extremely useful addition to your Web toolkit, whether you are working with your own code or dissecting other people’s code.
Firebug And JavaScript
If you have JavaScript on your page, Firebug can help you debug problems in your script. To do this, you click on the Script tab and there you’ll see a list of all the JavaScripts on the page. To learn how to insert breakpoints and how to watch variables and to edit and test your code, Michael Sync has a great Firebug tutorial complete with a downloadable script you can use to try out his instructions. You’ll find it at http://tinyurl.com/firetut.
