Debugging is a strategy that predates computers, though the term itself does not. You have probably followed something similar to a debugging process in other areas of your life without being aware that's what you were doing. Have you ever been in a car that wasn't running as well as it should? Maybe you checked the fuel gauge first to see if the car needed gas. If the tank seemed to be full, you may have tried other things (depending on your skill level) like replacing the air or fuel filters, or changing the oil. Each one of these steps you've taken is an attempt to find the problem and fix it. Because car repair can be expensive, and filling up the tank with gas is a cheap and quick potential solution for poor performance, that may have pushed a fill-up to the top of the list of remedies to try. Even if you were out of gas, if you filled the tank but the car still ran rough you would know you needed to take additional steps to find and resolve the issue. A mechanic might call tracking down your car's problems troubleshooting. Like troubleshooting, debugging is a way to make good guesses about the cause of a problem, devise and test solutions, and iterate or repeat the process until the desired outcome is achieved.
Let's recap the debugging guidelines so we can refer back to them as we look at some debugging tools and techniques:
In this sixth lab, we'll cover some of the debugging tools you can use when you're working on web pages. As you explore, review your answers from the To consider: section above. Have you changed your mind about any of them?
The tools we'll look at today are geared for the recommended Firefox browser. Firefox has been around for some time, and has a very active development community. Debugging and web development tools are also available for many other browsers, and are often available at no charge. Found a tool you like and want to support the developer? Many add-ons or browser extensions are "donation ware," or free for you to use, but a donation is suggested to help offset the developer's time and resources.
Here's a look at one menu drill-down once the Toolbar is installed:
Note that Firefox now collects a subset of add-ons under a different but identically labeled Web Developer menu choice (it's the one just above the Page Info menu option in the image above). If you install other tools like Firebug, you may find them hidden there.
The Toolbar has so many useful choices it would be difficult to cover them all here. Try going to a site that isn't your own first so you can try out some of the menu choices. One of the most useful ones for both debugging and "reverse-engineering" sites you like is the CSS > View Style Information outlined in pink in the image above. This turns your cursor to a cross-hair that you can point at anything on the page and the element will be outlined in red with the CSS info at the top of the page. See the areas of the image outlined in pink below:
Here's a look at what a Firebug console open to HTML debugging looks like, examining the code of this lab:
The highlighted parts of the image come from resting the mouse cursor over the HTML element in the console, which highlights it both there and in the main browser window.
There are certainly many other tools to use in debugging, depending on what issues you need to find and fix. The Clear Cache Button is another useful tool, as are View Cookies and Live HTTP Headers, though they may not be right for the problems you are trying to debug. How would you look for other tools that could help you? One place to look is Mozilla's section of the Firefox add-ons site just for web development tools. It's worth checking out, as chances are someone has experienced the same issue you have, and has built a good tool for the job.
Try IT: use Firebug to edit CSS on the fly
Firebug can help you find and fix display issues that result from CSS problems.
After you have chosen to install Firebug, restart Firefox to finish the installation
and open your starterPage.html exercise from Lab 04.
What other changes could you try with Firebug? Does it seem like a valuable debugging tool? Why or why not? What are the features you liked about Firebug, and what didn't you like?
Debugging tools can be very useful in supporting us to find and remedy problems in our markup and in our code. We can also minimize the need for debugging by taking time to plan ahead for the tasks we need to accomplish and build our website or program iteratively, in small steps that we repeat until the larger job is done. Is one approach better than the other? What are the benefits and drawbacks of each? Which do you prefer - more planning ahead of time, or (possibly) more debugging afterwards?