A Guide to Solving Web Development Problems This is mainly about how to solve technical problems that arise from using front or back end technologies to make web pages or web apps but some of these steps will be applicable to solving technical problems in general. Half the technical problems in web development are caused by something trivial like forgetting a semi-colon somewhere and are usually easily solvable if you've had your coffee but for all the problems past this level, you'll probably need to do some structured thinking. The Web Development Troubleshooting Steps Summary 1. Define the problem that you're trying to solve. If you're not asking exactly the right question then you're not going to get exactly the right answer. 2. Verify the problem exists. Make sure it's really a problem by replicating the error on more than one machine. 3. Gather additional information about the problem. Use a javascript debugger, fiddler or any other common tool to get additional clues about the nature of the problem. 4. Back-up your work before making even a single teeny tiny little change. Don't make things worse when trying to fix the problem. Keep a back-up so you can roll back if you have to. 5. Review your past experiences versus the present situation. Have you encountered a similar problem in the past, if so then test to see if your past approach will fix the problem at hand. 6. Search for people who've been in similar situations and how they solved the problem. You have all the information you need so start using a search engine to find possible solutions. 7. Make one change at a time (and then test it). Proceed methodically. If you make multiple changes at the same time then you often can't tell what worked or didn't work. 8. Break the silo if necessary. If you haven't solved the issue by this point then it's time to turn to your technical savvy friends or relevant message boards. Here's a list of steps that outline a basic thought process you can go through to solve problems especially if you're relatively new to web development. The Troubleshooting Steps 1. Define the problem you're trying to solve. If you're trying to answer a question then you must make sure you're asking the right question - not just asking a question that's sort of in the right ballpark but the exact question that needs to be asked. Example: A form that submitted customer leads wasn't working. My first question was "How come the forms aren't working" - which was not defined enough to start solving the problem. So I sent a test copy of the form live and that copy worked so the question became "how come the lead generating forms aren't working on the preview server". Just the slight change in the question completely changed how I tackled the problem. I know most of the time people assume you can skip this step but seriously take a few minutes to see if you can better define the question and ultimately the problem itself. 2. Verify the problem exists Things like rendering problems are very common in the web dev business and they can sometimes be caused by something temporal like a network issue or similar. So one of the first things to do is to ask the person bringing up the problem is whether or not this problem/error has occurred on more than one computer. If not then you'll need to verify it on another computer. If it proves impossible to replicate then you often don't have a real error and the problem will take care of itself. It could be something like a browser cache issue on the user's machine But you can't always assume that. You need to gather the basic information about the circumstances "where" the error occurred. What browser are they using? What version of the browser? For what platform. Generally the standard type questions but if you're working in a corporate environment then check to see if the user is working from home or outside the network as that might make a difference if you're testing from inside the work network. In other words you have to sure you're replicating the problem under the right circumstances. Sometimes also gathering the information about the circumstances surrounding the problem will help you to redefine the question again. 3. Gather additional information about the problem solve the puzzle For instance most browsers log javascript errors so if you're using Chrome you can press Ctrl+Shift+J to bring up the console. Here you might find that your error is related to javascript and Chrome is providing some context on it. Of course if you're error is present only in one browser (everyone please stop staring at Internet Explorer) then you should see what information that browser provides on the error. If you need to go deeper into this kind of territory then you should definitely check out Firebug which will make your life a whole lot more pleasant. Another good approach to is to validate your html; to make sure you have no fundamental errors and that your DOM is solid. You can use the W3c Validation Service to check your page out to see if it has any errors on it that might be causing your problem. If you're working a preview server, you can always directly paste in the html source code if the URL is not publically available. Check out the 'more options' link on the tool to see what your choices are. One more tool that can prove handy also is Fiddler. Fiddler is a web debugger that logs all your http traffic. You can use it check that all the resources that a page requires are present and not generating a 404 code or similar and for forms or Ajax submissions you can check that the right data is being submitted. It's a free tool and in certain circumstances is really great for helping to solve problems. You can learn more about fiddler on their website. So in other words, you have some tools on hand that generate helpful information and there's a few more that you could incorporate into your working practice to get things solved in an even more efficient manner. 4. Back-up your work before making even a single teeny tiny little change By this stage in the process, you should be ready to take action, to apply some possible solutions towards the problem at hand... but before you do that make a back-up copy of all your css, javascript, html, php or whatever. When attempting to fix a problem there is always the distinct possibility that you can make things worse. You get excited for a possible fix and then start wildly trying solutions and before you know it, the whole thing is broken instead of just a part of it. So make back-ups before taking any concrete actions towards solving the problem. 5. Review your past experiences versus the present situation Now that the problem and information related to the circumstances surrounding your technical problem are very well defined, it's time to assess the present situation versus the past. Does this seem exactly or very similar to a problem that you encountered in the past? If so then you might be on the way to solving the problem. If it doesn't ring a bell and the situation seems unique then it's on to the next step. 6. Search for people who've been in similar situations and how they solved the problem. Ok, basically I could've said "Google it" but who knows maybe mighty Bing will rise up one day. In the meantime, now that you have a well defined question, search Google for this phrase. You may have to rephrase it but generally the solution is in the results on the first page and very occasionally a page or two deeper. Sometimes there are multiple solutions offered. In this step, we're not applying any actions to resolve the situation we're just gathering possible solutions to try out. 7. Make one change at a time (and then test it) Don't try to implement two or more approaches at the same time. If something does work then you don't know what out of your multiple actions did or didn't work in your approach and if nothing works then you won't know for sure that one of the multiple approaches is preventing the solution from working. In other words most of the time keeping the scope of changes small and contained and is often a better approach to solving web development problems. To recap, whenever possible make as small a set of related changes as possible and then test to see if those have eliminated your web dev problem. Rinse and repeat and hopefully one of the solutions you've researched eliminates the problem. 8. Break the silo if necessary At this point most problems are solved but some remain problems despite your research and most of the time it's because you've made some kind of assumption that is hindering you from solving the situation... so it's time to break the silo. As web developers you often work by yourself and so at this point if your experience and research are not providing answers it's time to get a new perspective. First, chat with people you know in the business if they have every encountered a similar problem or if they have any ideas for tackling it. Having at least one person you can run technical ideas by is a great thing so if you lack that then it's time to start thinking about networking a bit - if not in real life then at least on some of the more active web developer boards. Which brings me to the last point - if your experience research and technical contacts have failed you then it's time to reach out to the internet and post the question on one of the more active boards like Stack Overflow - a site that I have wound up countless times from searching for an answer to a very specific question. This of course the last resort especially if you're living under a crushing deadline to get something live. And the problem is solved... maybe Sometimes going through all the steps is not viable within the timeframe you've been allotted to send some web app or pages live so as an alternate strategy you can often kludge together a working but non-ideal solution or scale back the features and send live that which is functioning absolutely perfectly. Web development, especially the closer it gets to market driven publishing, is a world of compromises and so sometimes you must employ not the best solution but the best solution available right now. You should be able to to work through the problem.