JavaScript Debugging Techniques with Firebug
By Akash Mehta2008-04-20
Debugging syntax errors
|
|
Let's take the following example:
var status = 25:
var port = 80 host = "google.com";
function Connect(status, port, host) {
// do some ajax
this.host = host;
this.do_something = function(host) {
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, port, host);
connection.do_something(host);
Pretty standard JavaScript code. You can probably see a few errors already. Save it in an HTML file (wrap it in <html><body><script>) and load it up in Firefox. Check your Firebug icon in the bottom right - it will complain of a JavaScript syntax error:
missing ; before statement
var status = 25:\n
Clearly here the issue is a missing semicolon, but the error has been triggered by the colon being in the wrong place. JavaScript thinks you want a seperate statement with the colon, and that before you do that you have to finish the previous statement (our variable declaration). Here, the developer clearly just wants to finish the statement, and so we change the colon to a semicolon and move on.
If we now save the file again and load it up in Firefox once more, we see the following error:
missing ; before statement
var port = 80 host = "google.com";\n
Now the error JavaScript has found is valid - host = "google.com"
is a seperate statement (or can be, at least). Clearly here we are
missing the comma or the semicolon, either of which will complete the
previous statement - port = 80 - so that we can declare our host variable. We add this comma after port = 80 and continue.
Tutorial Pages:
» Understanding JavaScript errors
» General debugging
» JavaScript debugging tools
» Debugging syntax errors
» Debugging runtime errors
» Debugging logic errors
» Further reading
