Testing and debuggi

So, you’ve written a brand new page and fired it up in your browser only to find that it doesn’t look anything like you expected. Or it doesn’t display at all. Or maybe it looks great in your default browser, but when you or your clients check it in others, it looks, well, kind of funny. Between HTML, CSS, and the multitude of browsers (especially older ones) and platforms, it’s easy to have trouble here and there. This chapter will alert you to some common errors and will also help you weed out your own homegrown variety. Some of these debugging techniques will seem pretty basic, but problems with Web pages are often pretty basic too. Before you go looking for a big problem, make sure you don’t have any little ones. I’ll show you how in the first section. Once your code is correct, you should thoroughly test your site on a few browsers, in one or more platforms, to see if each page works the way you want it to (see the section “Testing Your Page” and the sidebar “Which Browsers Should You Test?”).

Trying Some Debugging Techniques Here are some tried and true techniques for getting the kinks out of a Web page.

Check the easy stuff first
Be observant and methodical.
Work incrementally. Make small

changes, and test after each change. That way, you’ll be able to pinpoint the source of a problem if one occurs.

When you’re debugging, start with what you know works. Only then should you add the hard parts chunk by chunk— testing the page in a browser after each addition—until you find the source of the problem.
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 A. Then comment out a smaller portion of the offending half, and so on, until you find the problem. (See “Adding Comments” in Chapter 3 and “Adding Comments to Style Rules” in Chapter 7.)
Be careful about typos. Many perplexing problems can end up being simple typing mistakes—for instance, you spelled a class name one way in your HTML but a different way in your CSS.
In CSS, if you’re not sure whether the problem is with the property or with the selector, try adding a very simple declaration to your selector, like color: red; or border: 1px solid red; (or choose

A I’ve commented out the middle section of this code to see if it’s the culprit. Note that many HTML and CSS editors include syntax highlighting, which is automatic color-coding of elements, selectors, and the like. This can aid your debugging. Mistype the name of a CSS property, for example, and the editor won’t show it in the expected color: a hint that it isn’t valid.

        ...
        .entry {
         border-right: 2px dashed #b74e07;
         margin: 0 .5em 2em 0;
         }
        .entry h2 {
         font-size: 1.25em;
         line-height: 1;
         }
        /*
        .continued,
        .entry .date {
        text-align: right;
        }
       .entry .date {
       line-height: 1;
       margin: 0 1em 0 0;
       padding: 0;
      position: relative;
      top: -1em;
      }
     .intro {
     margin: -5px 0 0 110px;
     }
    */
   .photo {
   float: left;
   height: 75px;
   width: 100px;
    }
  .photo a {
  margin: 0;
  padding: 0;
  }**
  ...

an uncommon site color like pink if red is part of your design). If the element turns red, the problem is with your property; if it doesn’t, the problem is with your selector (assuming you don’t have another selector that’s more specific or that comes after the current one).

Take a break. Sometimes you can get much more done in the fifteen minutes after an hour-long walk than you would have if you’d worked during that hour. I’ve also solved problems in my head while taking brief naps.
Test changes to your HTML or CSS directly in the browser by using one or more of the developer toolbars at your disposal. Or inspect the code with these tools to try to locate the problem. (See the “Browser Developer Tools” sidebar.