I love troubleshooting. I love the challenge of figuring out an issue. It’s a great way to learn and it’s a great way to speed up your workflow.
If you can master troubleshooting, you’ll significantly cut down on your overall development time, as well as the amount of time it takes to handle any issues that come up.
(The code examples in this article are specific to the Genesis Framework by StudioPress, for WordPress, but they can be applied to any website.)
Troubleshooting The Wrong Way
When someone is troubleshooting an issue, most people immediately focus on fixing the problem. I’ll use an example that comes up fairly often on the StudioPress Genesis Forums.
Something’s causing a horizontal scroll bar to appear and ‘I can’t figure it out.’ Usually it happens with responsive sites (although it can happen with any site). After the screen size is reduced something is not adjusting right and it’s causing the page to be too wide, resulting in a horizontal scroll bar.
Most people will dive into the code, line by line trying to figure out what’s causing the problem. Many of the support requests include ‘I’ve been working on this all day and I can’t figure it out.’ Why? Because there’s a million things going on in your website code, and you’re trying to fix the problem without knowing where it is.
Troubleshooting The Right Way
A better approach is to use the Process Of Elimination. Instead of trying to fix the issue right away, let’s eliminate the things for certain that are NOT related to the issue.
You have to narrow down the issue, and to do that you have to eliminate the things you know are not related to this issue.
Using the example above, it’s obvious that something is too wide, causing the horizontal scroll bars to appear. If you start looking through your code, going through the header, line by line, next the title-area, logo, widget area, and on and on what’s going to happen?
You might get lucky and find the issue. But often times, you’ll never find it. It’s too much code to go through manually. You’ll probably lose track of what you tested. What if the issue is both in the header AND footer? There’s just too many variables and troubleshooting this way is very challenging, time consuming and frustrating.
An Example of Process Of Elimination
Here’s an example of the basic Genesis Website structure:
[gist id=”78a701042c7454f279c6″ file=”genesis-basic-structure.html”]
Using the web inspector of your choice (we’ll use Firebug for Firebox), look at your source code. Let’s start eliminating things that we know are NOT causing the problem.
In your web inspector, start with the first element <header class=”site-header”></header>. Using your web inspector, click on <header class=”site-header”> and add an element style (inline) of “dispay: none;”. If your horizontal scroll disappears, we now can be pretty confident that the issue is with the <header> or the code inside the <header>.
If the horizontal scroll is still there, remove the “display: none;” from the <header> and do the same thing for the next element, the <div class=“site-inner”></div>. Once again, if the horizontal scroll goes away, you can be pretty sure the issue is with <div class=”site-inner”> or something inside this group.
If not, again remove the “display: none;” and move on to the next element, and the next one until you narrow down the problem.
What If The Issue Is On More Than One Element?
In some cases, you have gone through all of the elements one by one and haven’t been able to make the horizontal scroll go away. It’s possible that the issue is common to more than one element.
For example, the issue could be with your <div class=”wrap”> element, which is common to your Header and Footer (and possibly more elements depending on your theme). In this case, I reverse the process by setting ALL elements to “display: none;” and then removing “display: none;” from each element one at a time.
Let’s say the issue is caused by the <div class=”wrap”> inside both the header and footer. Once I set “display: none;” to all three elements (header, div.site-inner and footer) I’ll have a blank page with no horizontal scroll bar.
I’ll remove the “display: none;” from the header and I’ll notice the horizontal scroll bar reappears. I make a note of that, and set it back to “display: none;”. Next I’ll remove “display: none;” from the <div class=”site-inner”>, and I notice there is no horizontal scroll bar. This section is not causing the issue, so I can leave it set to display.
Moving on the <footer>, I remove “display: none;” and the horizontal-scroll bar reappears. So I know the issue is caused by BOTH the <header> and <footer>, and all other sections are fine. So I’ll set <footer> back to “display: none;” and work on the <header> to further narrow down the issue.
Narrowing Down More
Now that we know the issue is in the <header> and <footer>, let’s continue narrowing down the issue. The basic Genesis <header> structure may look like this (varies by theme):
[gist id=”78a701042c7454f279c6″ file=”genesis-basic-header.html”]
Following the same process, we’ll set elements to “dispay: none;” one by one until we see where the issue is. Starting with <div class=“title-area”> and <aside class=“widget-area header-widget-area”>. If setting those to “display: none;” doesn’t eliminate the horizontal scroll bar, we can assume that they’re not the cause of the issue.
Next we’ll set <div class=“wrap”> to “display: none;”. We now see that the horizontal scroll bar goes away, which tells us there’s a problem with <div class=“wrap”>. Now we can determine the the .wrap has a width of 100% plus left and right margin of 5%. The total width of 110% is too wide, causing the horizontal scroll bars. Removing the 5% left and right margin, the width for .wrap is now 100% (affecting both header and footer) and we’ve resolved the issue.
Troubleshooting Summary
Successful troubleshooting is the process of narrowing down the issue, then narrowing it down some more, then some more until you can pinpoint the issue. Using this method of troubleshooting will save so much time and frustrationl, and will give you a successful system to troubleshoot any issue (not just websites).
Start Big
In our example, we start with the major elements until we can identify which elements are causing the issue.
Narrow, Narrow and Narrow
Once we’ve identified the major element/s that are responsible for the issue, we’ll use the same method to further narrow down the issue.
Pinpoint and Solve
Finally when we’ve narrowed the issue down to a single element, we can look at that element and determine why it’s causing the issue. Once we’ve done that, we can fix the issue and celebrate with a nice, cold beer (or drink of your choice.
If you’ve found this troubleshooting tip helpful, sign up for our free newsletter to receive our tutorials by email:
Zach Shoher says
Tony, thanks for a clear, succinct approach to debugging web design problems.
Tony Eppright says
Hi Zach,
Thanks for your comment! I’m glad you found it useful.
Take care,
Tony