Do you remember our initial workflow chart from Chapter 3?
I was insistent that your workflow pretty much be "edit, check it, then go back and edit some more". The main purpose of visually checking your theme in Firefox, after adding each piece of code, is to ensure it looks fine; if it doesn't, debug that piece of code. Running a validation check as you work doubly ensures you're on the right track.
So, your workflow ends up looking something more like this:
You want to work with nice, small pieces or "chunks" of code. I tend to define a chunk in XHTML markup as no more than one div section, the internal markup, and any WordPress template tags it contains. When working with CSS, I try to work only with one id or class rule at a time. Sometimes, while working with CSS, I'll break this down even further and test after every property I add to a rule, until the rule looks as I intend and validates.
As soon as you see something that doesn't look right in your browser, you can check for validation and then fix it. The advantage of this workflow is that you know exactly what needs to be fixed and what XHTML markup or PHP code is to blame. You can ignore all the code that was looking fine and was validating before. The recently added markup and code is also the freshest in your mind, so you're more likely to realize the solution needed to fix the problem.
If you add too many chunks of XHTML markup or several CSS rules before checking it in your browser, and then discover something has gone awry, you'll have twice as much sleuthing to do in order to discover which bit (or bits) of markup and code are to blame. Again, your fail-safe is your backup.
You should be regularly saving backups of your theme at good stopping points. If you discover that you just can't figure out where the issue is, rolling back to your last stable stopping point and starting over might be your best bet to getting back on track.
As mentioned in Chapter 2, you'll primarily design for Firefox and then apply any required fixes, hacks, and workarounds to IE. You can do that for each piece of code you add to your theme. As you can see in the preceding figure, first check your theme in Firefox and if there's a problem, fix it for Firefox first. Then, check it in IE and make any adjustments for that browser.
At this point, you guessed it, more than half of the debugging process will depend directly on your own eyeballs and aesthetics. If it looks the way you intended it to look and works the way you intended it to work, check that the code validates and move on. When one of those three things doesn't happen (it doesn't look right, work right, or validate), you have to stop and figure out why.
Was this article helpful?