JavaScript Error Handling for Beginners

Please, do not forget to read the small updates below on JavaScript debugging. Ya, that is important. Thanks!
First of all I will suggest moving to Firefox browser. There you will get JavaScript console
(Firefox: Tools->JavaScript Console) which is very useful for JavaScript debugging.
Old IE style error message box will not give the correct line number and error location for error.

Learn and Write JavaScript, which is ECMA supported. Using proprietary JavaScript - jscript is not
good. This will only reduce scope of your script.
Now JavaScript is supported in .NET also.

Remember JavaScript is case-sensitive.

Use alert for debugging. This will tell whether you have real object at a time or not for which
you are trying to access/assign property. This will also tell you how far your code is good.
But for very serious syntactical error it will not work.

Check that the object's property you are using really exists-

Use alert(object);
Below if you click on testbox it will tell you their object type.

<form>
 <input type="text" name="t1" onclick="alert(this)"/>
    <input type="button" name="submit1" value="submit" onclick="call1(this.form)"/>
</form>

And same with the variables.
In Javascript a string is an Object also. So you can use like:

<script>
 var string1 = 'PHP';
 alert(string1.length);
 //alert(string3.length); // Error will show: "string3 is not defined".
</script>

But if no string is defined, then what will return.

You can access the variable in any function if you have defined variable in global scope.
You don't have to use $GLOBAL (need in PHP) like thing in JavaScript.
Define like: var variableName = 'Value';
outside of function and without 'var' keyword inside function. Var used inside function makes it local to that function.

Don't use reserved words.

Reserved words are:
break, case, catch, continue, default, delete, do, else, finally, for, function, if,
in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with.

Even do not use function name for your variable. At many places JavaScript allow you to use
function name without "()" (passing reference to function). So it create confusion for JavaScript.
This example will show the problem. Click on submit and you will get error:
"frm1.submit is not a function". Rename input "type=button" to "submit1". Now it
will submit the form.

<script>
function call1(frm1)
{
 frm1.submit();
}
</script>
<form method="get">
 <input type="text" name="t1" value="Javascript error tutorial" />
    <input type="button" name="submit" value="submit" onclick="call1(this.form)"/>
</form>

For solving this error I spent lots of hrs many time.
------

Proper variable names

JavaScript is case-sensitive and it becomes difficult for PHP programmer. In PHP for function names you can use header() (better) or Header(). So better use
small letter for all variable name and function. Underscore is visibly better than character change.

Suppress Error

You can supress error in JavaScript. Whenever an error occurs onerror event is fired.

<script type="text/javascript">
/*
function handleErr(msg, url, line_no)
{
 errorMsg = "Error: " + msg + "n";
 errorMsg += "URL: " + url + "n";
 errorMsg += "Line: " + line_no + "nn";
 alert(errorMsg);
 return true; // It will not show error in browser JavaScript console.
}
onerror = handleErr; // Function handleErr();
function message()
{
 alert(myvariable); // undefined variable. will cause error
}
message();
*/
</script>

Catch Error

The JavaScript 1.5 specification defines six primary error types, as follows:

EvalError - raised when the eval() functions is used in an incorrect manner;

RangeError - raised when a numeric variable exceeds its allowed range;

ReferenceError - raised when an invalid reference is used;

SyntaxError - raised when a syntax error occurs while parsing JavaScript code;

TypeError - raised when the type of a variable is not as expected;

URIError - raised when the encodeURI() or decodeURI() functions are used in an incorrect manner;

You can trap more than one exception, and handle each one in a different way,
by using multiple "if" constructs within a single "catch" block.
---------------

Copy this code in different page. As error handler (handleErr) is defined above,
so that will directly catch error.

<script>
//Error handling in JavaScript:
try {
 function test1() {
  alert(aaa); // will generate error. aaa is not defined.
  return;
 }
 out1 = test1();
}
catch(e) {
 alert(e.name + ' : ' + e.message);
}
</script>

Update- Aug, 2009: Better way of error handling: Console.log() in place of alert() -
Firebug is a great tool now for JavaScript debugging job. Instead of using alert(), console.log() should be used. When you use console.log(), you will not fear of alert() in loop. You may have experienced of trouble when alert() falls in loops. Install Firebug and enable it. Look for console tab in the tool, click on the drop down menu and enable it. Now whatever you will write inside console.log() will be written there. If firebug and console is not enabled, then you will get an error when you use console.log. After your development/debugging task is over, just delete or comment all those console.log() call.

Read more about Firebug at my Web Development tool talk and at firebug tutorial.

More on JavaScript Debugging:

More detailed discussion on JavaScript error handling.