When you create a Web page or script it may not work first time. Most people then get confused and discouraged but if you approach it in the right way you should be able to fix it.
Finding any problem
The overall approach is to narrow down where the problem is. This applies to anything in life not just Web stuff. Try to remove anything which might be causing the problem. If the problem goes away then start putting stuff back in until it breaks again. Now you know where the problem is so you can focus on that one thing to find specifically what is the problem. Obviously, if it once worked you should concentrate first on what you just changed.
Remove parts of the page until the rest works. Comment out chunks of script code until the errors go away.
The other technique is to get the page/script to talk to you. If you are not sure if a piece of script is working then get it to pop up an ALERT or ECHO a message at that point in the code. In HTML/CSS you can temporarily make elements a different background colour so that they stand out and you can see their size or position. More on this below. Get as much information as you can and the problem will be clear.
Indenting all code will also help you to spot missing end tags or other mistakes. An editor such as Eclipse will even tell you about those minor mistakes to save you looking.
HTML/CSS
Web pages will work even with problems in the code. Browsers will just ignore the problems and do their best to show the page. So, don't assume that a page is right just because it works.
W3C validation
Validating a page may seem unnecessary but even if the other reasons for doing it are not good enough for you think about how useful it is to have a service which points out all your mistakes to you. Missed closing tags, block elements inside in-line elements and many other common mistakes can mean the page doesn't always look quite as you wanted. Validate it and you may find the problems go away.
Where's my DIV?
Often when you try to position something using CSS it doesn't go where you expected. Try setting the background colour to something blatant and unmissable. If it doesn't show up maybe it's zero height or just behind something else because of the z-index (set the height manually and give it a high z-index). Once you see where it is you might be able to guess what the problem is. Probably you forgot to close a previous DIV, set positioning or set margin, padding or borders to zero.
JavaScript/PHP
Error messages should be a help but there are a couple of other things to try.
Browser/server error messages
These may not be very clear but they will give clues. The most important thing is the line number. The problem may not be on that line though! Often script errors are caused by something not being properly finished in previous lines. Look for quotes, semi-colons and braces.
JavaScript errors will be available in the browser. Some will show an error symbol on their status bar - click it. Others may have an error console which gives more information once started. Different browsers will give different messages and one might make more sense so try several.
PHP errors will come from the server unless they are turned off (a sensible security precaution). You can turn error reporting back on temporarily by putting this in your code (at the top) unless your php.ini has settings which prevent that:
error_reporting(E_ALL);
If you use XAMPP for all testing you will not need to turn on errors as that package is designed for testing.
Web software
Many Web development packages will tell you if you make a mistake in your scripting. Some are better than others. Indenting your code will also help as you will see missing quotes, brackets, braces and semi-colons more easily.
The Web software may also have debugging facilities which will allow you to run through code step- by-step to find problems. Given the differences between how browsers interpret JavaScript you might also need to try displaying variable contents and progress manually (see below).
Alerts/echoes
When you get a problem you may find it useful to know some things:
- does the browser/server ever execute that bit of code (it might be inside an IF or a loop)?
- what value do various variables have at the time?
- where does the problem happen?
If you put a range of JavaScript ALERTs or PHP ECHO statements through your script you will be able to track down where the problem happens. In PHP you could use a JavaScript alert to display the message as a dialog does not disrupt the page content the way ECHOed text does.
Summary
It's all about knowledge and simplicity. Gather as much information about the error as you can. If that doesn't tell you what to do then remove as many parts of the page as possible to reduce the number of possible causes. Eventually you will only have one possibility. The fun starts when you end up with no possibilities!
