Psychotic Debugging: Debugging PsychoticResumes.com

Gary BuseyOver the past few days you might have noticed (if you use IE7) that PsychoticResumes.com would no longer display in your browser.

I’m crazy like Gary Busey when it comes to tracking bugs – I know exactly what changes I made, when I made them, and which files were affected.  Since WordPress doesn’t really have a client version control system (particularly for plugins) you have to track for yourself.

The first thing I did was ask for help.  I know this might seem like I started in reverse, but I like to have as many eyes as possible looking with me for a possible problem.  I got some very good recommendations on possible problems – including taking a closer look at the headers, making the site XHTML 1.0 – strict compliant, and so on.

After testing out the site in a few different browsers (all DOM Level 2 browsers were fine, IE8 was fine) I determined that there were multiple problems.

  1. Facebook Connect needs the widget to be present on the page to work.  You can’t just install it and not add the widget, because it sends an asynchronous request to Facebook.  The request object comes back… and FBC looks for the widget to display the information.  If the widget isn’t there, FBC thinks that something was wrong with the data, so it asks Facebook for the info again.  This creates an infinite request loop (in IE7).  This might be because I was still using the beta version of FBC… so, who knows.  This fix allowed the website to show up in IE8.
  2. I downloaded HttpWatch to load my header information in IE7… just to see where the page stopped loading.  Note: the full retail version of this program costs $400… but I wasn’t that desperate.  The program was giving me inconsistent results – twice it would load two parts of the page and then stop, then five more tests revealed that it would load 5-8 items and then stop.  This told me that a plug-in was the likely culprit, but I needed to eliminate other sources of errors before I could narrow it down for sure.
  3. XHTML Validation – I used the W3C XHTML validator and discovered that I had incorrectly coded a small portion of the “print” plug-in, causing a mismatch in opening and closing elements.  This ended up being a minor problem – and in some areas where I need centered graphics and advertisements, I’m not sure how to get around the <center> tag.  So, I got it down to 5 errors rather than the 33 that I started with.
  4. iTouchTheme plugin (to make your site easy to use for iPhones and iTouches) was using conditional formatting and was operating incorrectly.  I have a sinking suspicion that this was the straw that broke the camel’s back.  As soon as I patched this plugin to the next version, the site began to show up in IE7.
  5. As a side project, I had a hell of a time trying to get the menu to appear in the same place in IE browsers and DOM Level 2 browsers… but as it turns out, the Margin property of a Div is handled differently when it is contained within a parent Div element… (in Freshy – the header div contains the menu div).  I eliminated the offending tag and now the menu displays properly (and in the right spot!) in all of my test browsers.

It was definitely aggrivating to keep on hearing, “Hey dude, your link is dead,” but the debugging experience was pretty cool, and I solved some issues on my website that I wouldn’t have otherwise thought about.  The total time invested was about 5 hours.

Post to Twitter Post to Facebook Post to StumbleUpon

This entry was posted in Personal, Web Programming and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
blog comments powered by Disqus
  • I Am Nick Armstrong