Question

The transition from C#/WPF to HTML5/JavaScript is plaguing me. I thought the challenging part would be learning new languages, new ways of thinking about problems, etc. But that was the easy part. The real hurdle is trying to debug an application of any reasonable size using the ridiculous environment known as Firebug. I chose Firebug because it appeared that most people on StackOverflow.com were using it. But man.. I seriously don’t see how you guys use this thing. It’s so riddled with show-stopper bugs. I posted earlier about a major flaw in Firebug when debugging timer callbacks. But today’s Firebug experience borders on insanity.

Short story is that under certain unknown conditions, if a syntax error is encountered Firebug will, instead of reporting the error, fail to load the entire script file into memory at all and will show no error information whatsoever. Today I dealt with a syntax error that crept in due to a misplaced comma. Any decent debugger would simply highlight the problem and halt execution. Not Firebug. It forces you to investigate file by file, commenting things out one at a time as you try to figure out where on earth the syntax error is. And this isn’t just some “edge case.” Consider this intentionally bad JavaScript fragment:

var boo;
boo.SelectEntityPopupXXX=(function(){
    var hey={p: 1,z: 2,goob=this};
}());

There’s a syntax error. There should be a colon after ‘goob’ instead of an equals sign. If your app has fifty different JavaScript files, and this bad fragment is in one of them, Firebug won’t tell you about it. It’ll just fail to load the entire script file into memory. It’s up to you to find out which file of the fifty isn’t being loaded. Then you’ve got to randomly comment/uncomment the contents of that file until you narrow down that code fragment and realize that there’s a bad equals sign in there. That’s absolute madness!

Firebug behaves in the expected manner for most syntax errors. But it stumbles on just enough of them to be severely irritating. This, combined with countless other show-stopper bugs, make the Firebug environment totally useless for all but the most trivial web apps. So the questions are:

[1] Is there some kind of syntax error flag or setting that I’m missing that’s causing this crazy behavior? If there’s a “randomly ignore syntax errors and obfuscate their location” checkbox, I’d like to uncheck it.

[2] There must be a better development environment [for Mac] than Firebug… or at least, I can’t imagine a WORSE one. Do you have any recommendations?

Thanks.

UPDATE:

Want to try and insert a comment before this thread is killed for the sake of those who actually care about debugging [as opposed to collecting site gold pieces or whatever these up/down votes represent]… It’s come to my attention that the debugging environments of both Safari and Chrome are far more reliable. I can verify that the syntax errors discussed above are correctly identified in both Safari and Chrome. The major timer callback bug I referenced in my other post is also Firebug-specific. Enough said. Goodbye Firebug.

Answer 1

I prefer Chrome to develop any web sites/apps in. Chrome has a debugger line that sometimes works. The key to JS development is ALERTS. Just alert variable values and element values to you resolve your issue. And @Quentin is correct. Your syntax errors is due to the = operator. To set a value in JS objects you must use the : operator.