Fortunately, debugging doesn't always have to be done manually. Here are some tools to help you in your quest to debug your code.
Browser error console's
Access error console in Firefox - go to Tools -> Error Console or press Ctrl+Shift+J.
Access error console in Opera - go to Tools -> Advanced -> Error Console
Both the Firefox and Opera error console's will show you the error(s) that occurred on a page as well as the line number where the error(s) occured. Both error console's show errors as well as warnings. The Firefox error console also lets you evaluate segments of code.
Firebug is an add-on for the Firefox browser. It is definitely one of the best tools out there for web developers.
Open Firebug by pressing F12 or go to Tools -> Firebug -> Open Firebug
Debugging HTML with Firebug
Select the HTML tab to access the HTML code of the page.
When you move the mouse over a tag in the HTML code you will notice that Firebug highlights it. You can use Firebug's HTML window to see an element's scope within a webpage. If an element does not appear where it's supposed to on a page this may give you an idea as to why this is.
Firebug also gives you the ability to edit the HTML of a page. To do this double click on the HTML tag you want to edit in the Firebug HTML window and it will appear on it's own for you to edit.
Debugging CSS with Firebug
Select the CSS tab to access the CSS code of the page.
Use Firebug's CSS window to change the styling of any element on the page. This really helps with troubleshooting because you can put borders around elements to be able to focus on them and really see their scope on the page. Once you apply the border, change any other aspect of the styling or add new styles to figure out why an element does not appear the way it's supposed to and how to make it appear that way.
NOTE: A quick way to access the CSS of an element on a webpage through Firebug is to right click that element and choose the 'Inspect Element' option. The HTML code for the element will appear on the left side of Firebug and the CSS code on the right side.
Firebug console window
The console window lets you evaluate segments of code. Select the Console tab to access the console window.
You can use W3C's HTML and CSS validators to see if your pages are valid. If your pages are not valid, this might be a reason why code is not working as it should be. When you have errors in your code, run your pages through the W3C validator, clean out any validation errors the validator shows you and try reloading the page.