Any way to have ExtJS/SenchaTouch give more detailed diagnostics? - extjs

Question

Is there a debug option that gives better error messages than substring not found. Fort things like missing stores, region not defined in border layout, etc. is there a way to get ExtJS with debug libraries to give more specific errors?
(like "region must be declared in border layout" if one is not defined)

Answer 1

The best way to debug any javascript code snippets is to use firebug (firefox) extension. However it may or may not let you go through deepen into the library errors, but at least you have the idea where the problem may be in the code.
You can add break points to go though line by line debugging, you can add watch, you can use console to get runtime values. What else do you need? :)
For more info, read this link

Answer 2

ExtJS and Sencha Touch is not easy to debug. Most of the error-prone "code" are configuration objects where you cannot place breakpoints. Finding errors in ExtJS is PITA. The official help page Debugging Ext JS applications from Sencha is more or less a joke. Seems like Sencha only wants to sell their trainings and click-tools. The Sencha forum is awkward to read. Thankfully there is SO.
What is missing is a very intelligent Lint-Tool for ExtJS and Sencha Touch. I haven't tried Eclipse plugin for ExtJS, because Eclipse is only a bit more than Notepad regarding JavaScript development. If you have a JetBrains (*) tool like WebStorm, PhpStorm or IntelliJ IDEA, you have very good auto-completion for your configuration objects. In fact, I don't understand how they introspect code and JSDoc comments to know so much about the framework. You even get warnings about unregistered aliases (e.g. xtype)!
One thing that can help a lot in many situations is Illuminations for Developers. Give it a try and see if it helps you.
What sometimes helps me is registering "catch-all" listeners like in this gist.
And during development it doesn't hurt to place code like this in your classes:
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init: function () {
console.log('controller/Main::init', this.application);
console.log('controller/Main store =', this.application.getFoosStore());
}
}, function () {
console.log('controller/Main loaded');
});
But the problem still remains. Finding bugs in configuration objects is the hell. You need a second screen and always view the API docs when coding. After a couple of years creating ExtJS programs it's getting better...
(*) I have nothing to do with JetBrains. I just like their tools because they save me a lot of time. Maybe NetBeans would be an alternative.
Edit
Similar questions:
"Debugging" ExtJS script