HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [148]
You can force IE to give you a little bit of help, though. All you have to do is choose Tools⇒Internet Options and then click the Advanced tab. You see a dialog box that looks similar to Figure 3-6.
Figure 3-5: Aptana caught my error and provides some help.
Figure 3-6: This dialog box allows you to get error warnings in Internet Explorer.
In the dialog box, select Display a Notification about Every Script Error. Leave all the other settings alone for now. (Yep, we’re going to keep script debugging disabled, because it doesn’t work very well. I show you a better technique in the “Finding errors in Firefox” section.)
When you reload broken.html in Internet Explorer, you see something similar to Figure 3-7.
Figure 3-7:
I never thought I’d be happy to see an error message.
This message is actually good news because you know what the problem is and you have a clue about how to fix it. In this particular case, the error message is pretty useful. Sometimes that’s the case, and sometimes the error messages seem to have been written by aliens.
Be sure to have error notification turned on in IE so that you know about errors right away. Of course, you also need to check your code in Firefox.
Finding errors in Firefox
Firefox has somewhat better error-handling than IE by default, and you can use add-ons to turn it into a debugging machine. At Firefox’s default setting, error notification is minimal. If you suspect JavaScript errors, open the JavaScript Errors window by choosing Tools⇒Error Console. Figure 3-8 shows the error console after running broken.html.
Figure 3-8: The Firefox error console is pretty useful.
Generally, I find the error messages in the Firefox console more helpful than the ones provided by IE.
The error console doesn’t automatically clear itself when you load a new page. When you open the console, it may still contain a bunch of old error messages, so be sure to clear the history (with the error console’s Clear button) and refresh your page to see exactly what errors are occurring on this page.
Finding errors with Firebug
One of the best things about Firefox is the add-on architecture. Some really clever people have created very useful add-ons that add wonderful functionality. Firebug is one example. This add-on (available on the CD-ROM or at https://addons.mozilla.org/en-US/firefox/addon/1843) adds to your debugging bag of tricks tremendously.
Firebug is useful for HTML and CSS editing, but it really comes into its own when you’re trying to debug JavaScript code. (For more on Firebug, see Book I, Chapter 3.)
When Firebug is active, it displays a little icon at the bottom of the browser window. If it identifies any JavaScript errors, a red error icon appears. When you click this icon, the Firebug window appears and describes the problem. Figure 3-9 shows how the Firebug tool works.
If you click the offending code snippet, you can see it in context — especially useful when the error isn’t on the indicated line. Generally, if I’m doing any tricky JavaScript, I turn on Firebug to catch any problems.
Figure 3-9: Click an error line in the Firebug tool to see the error in context.
Catching Logic Errors
The dramatic kind of error you see in broken.html is actually easy to fix. It crashes the browser at a particular part of the code, so you get a good idea what went wrong. Crashes usually result in error messages, which generally give some kind of clue about what went wrong. Most of the time, it’s a problem with syntax. You spelled something wrong, forgot some punctuation, or did something else that’s pretty easy to fix once you spot it. This type of error is called a syntax error.
Loops and branches