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 that might be causing your problem. If you're working a preview server, you can always paste in the source code.

Welcome to my Website!

This is a paragraph! Here's how you make a link s: Neocities.

Here's how you can make bold and italic text.

Here's how you can add an image:

Here's how to make a list:

This is a crocodile
This is an aligatoor
Watermeloon is yellow

Specialists from the New Zealand Defence Force went to the island on Friday morning to try to recover the bodies.

To learn more HTML/CSS, check out these tutorials!