Debugging Syntax Errors in EXTJS (JSON) and pulling out your hair

[dougbieber]

I've been coding EXTJS since 2008. However, one of the biggest pet peeves I have is finding syntax errors. I'm using RAD 9.5 (Eclipse) and the editors don't tag missing brackets, attributes, etc. Basically my eyes are the compiler which sucks.

I had a column definition which contained this name attribute pair: "flex: ," Duh, I forgot to make it "flex: 1,"

Took me more time than I wanted to find the typo. One solution would be to add tiny bits of code then test. Add more tiny bits of code then test. But if you know what you're doing then you just want to code the whole damned thing.

So, does anybody have any magic bullets for this that could give me a better solution? Various browser debuggers don't help much. Ideally, I'd like a Java-like editor for JSON/EXTJS type code.

-Doug

[mitchellsimoens]

If you had something like this:

columns : [
    {
        text      : 'Url',
        flex      : ,
        dataIndex : 'url'
    }
]

Wouldn't you get a nice syntax error message in the browser with the file name and line number and click on the file name it'd take you directly to that line with a red squiggly?

Seems like this would be pretty easy to debug:

Screen Shot 2015-12-29 at 3.10.32 PM.jpg

Screen Shot 2015-12-29 at 3.10.40 PM.png

The only time I don't get giant fingers pointing at my code is if it's in a compile file (then it can be hard to figure out where but you can prettify the code in chrome/firefox) or if it's in an Ext JS template where the javascript code is generated from that template code.

[dougbieber]

I am using IE 11. Perhaps my problem.

[Ekambos]

Another reason why one should get some kind of static typing (be it typescript on top of Ext JS)

[mitchellsimoens]

Another reason why one should get some kind of static typing (be it typescript on top of Ext JS)

In the case of a syntax error like the OP has, static typing wouldn't get you anything. If you have to compile the code and it produces an error, running it in the browser will also produce an error. Working within an IDE/editor, I use Brackets (used to use IntelliJ) and both clearly show syntax errors without any additional help from meta data provided from static typing.

[mitchellsimoens]

I am using IE 11. Perhaps my problem.

I've gotten syntax errors throw with meaningful file names and line numbers even back in IE6. With what you describe (and what the example I shown in my code and images) any browser should throw a syntax error. Syntax errors should be very easy to debug.

[Ekambos]

Both editors will show syntax like the one OP has for sure. Unfortunately there are way more other errors that those IDEs would nt catch that static analysis would catch right away.
When I was using pure JavaScript I spend tooo much time chasing typo errors.

So yes something like TypeScript on top of Ext would not hurt.

In the case of a syntax error like the OP has, static typing wouldn't get you anything. If you have to compile the code and it produces an error, running it in the browser will also produce an error. Working within an IDE/editor, I use Brackets (used to use IntelliJ) and both clearly show syntax errors without any additional help from meta data provided from static typing.