JavaScript Debugging Techniques with Firebug
By Akash Mehta2008-04-20
Debugging runtime errors
|
|
Here's the current version of our script, with our syntax errors debugged and removed.
<html>
<body>
<script>
var status = 25;
var port = 80, host = "google.com";
function Connect(status, host) {
// do some ajax
this.do_something = function(host, port) {
if (port == 60) {
alert("Good, port 80 - standard http");
} else {
alert("Bad, something nonstandard");
alert("this.host is " + this.host);
}
}
}
var connection = new Connect(status, host);
connection.do_something(host);
</script>
</body>
</html>
Save this in a HTML file and open it up with Firefox. Have a brief look at the code - we clearly want the port variable to be 80. We popup with a "good" alert if this is true. However, when we run this code, we get the two "bad" popups, one of which says "this.host is undefined".
This is a runtime error, because the code is still
perfectly valid JavaScript, but we have not defined this.host within
the current scope, and so it evaluates to "undefined" (which is an
actual data value in JavaScript). We can correct this easily by adding
the line this.host = host; right after // do some ajax. If we refresh the page, the second (bad) alert box now says "this.host is google.com". We have corrected our runtime error.
Tutorial Pages:
» Understanding JavaScript errors
» General debugging
» JavaScript debugging tools
» Debugging syntax errors
» Debugging runtime errors
» Debugging logic errors
» Further reading
