Troubleshooting Tip: Reduce and Simplify

If you've coded yourself into a problem that you can't figure out and you've spent hours debugging always remember this simple rule to solve your problems faster:  Reduce and Simplify.

If a solution to a problem isn't obvious by looking at your code (or output), then start taking chunks away until you don't see the problem anymore.  For example, I was having a tough time figuring out why some web pages I built were very slow in IE 6 & 7, but loaded fine in Firefox.  I had a thumbnail generator that wasn't working right, which I thought was part of the issue, but once that was fixed, the problem still existed.  At that point I should have started reducing the code to find the problem, but instead I kept at my original assumption that something was wrong with the thumbnail generator and spent hours in forums searching for answers.  After a night of rest I came back at the problem and started reducing the code.  The first thing I did was take all the javascript out of the page, and wha-la the slowness disappeared.  Now I knew the problem was with javascript (or so I thought). I found which particular js file was the culprit.  Then upon further inspection found the javascript used a css file and that had some bad paths to images in it:

/* bad path in IE specific CSS made IE 6 and 7 slow */

.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/js/colorbox_assets/images/internet_explorer/borderTopLeft.png, sizingMethod='scale');}

And that was the problem.  Had I remembered how to troubleshoot properly, I could have written this blog post yesterday.