Some Debugging Techniques

Here are my tried and true techniques for getting the kinks out of a Web page.

• Check the easy stuff first (see pages 341344).

• Imagine you're a scientist. Be observant and methodical.

• Work incrementally. Make small changes and test after each change. This way you'll be able to pinpoint the source of a problem if one occurs.

• In the same vein, when you're debugging, start with what you know works. Only then should you add the hard parts chunk by chunktesting the page in a browser after each additionuntil you find the source of the problem.

• Conversely, use the process of elimination to figure out which chunks of your code are giving you trouble. For example, you can comment out half of the code to see if the problem is in the other half. Then comment out a smaller portion of the offending half, and so on, until you find the problem (see pages 67 and 121).

• Be really careful about typos. Many of my most perplexing problems have ended up being simple spelling mistakes.

• In CSS, if you're not sure if the problem is with the property or with the selector, try adding a very simple declaration to your selector, like color:red. If the element turns red, the problem is with your property, if it doesn't, the problem is with your selector.

• Take a break. Time isn't linear. Sometimes you can get much more done in the fifteen minutes after an hour long walk to clear your head than you ever could have gotten done during that hour otherwise.

Figure 22.1. I've commented out the middle section (displayed in gray) to see if it's the culprit. Note that many (X)HTML editors, like BBEdit shown, offer automatic color-coding that can be a huge aid to your debugging. If you mistype the name of a CSS property, for example, BBEdit won't show it in blue.