ExtJs: ext-all-debug.js vs ext-all-dev.js; An advice for beginners

ExtJS for Beginners
Use ext-all-dev.js for development

If you go through the Getting Started page of Sencha ExtJs4.1 you will find that in their 2.3 Library Inclusion methods section they have mentioned the following:

When you unzip the Ext JS 4 download, you will see the following files:

ext-debug.js - This file is only for use during development. It provides the minimum number of core Ext JS classes needed to get up and running. Any additional classes should be dynamically loaded as separate files as demonstrated above.
ext.js - same as ext-debug.js but minified for use in production. Meant to be used in combination with your application's app-all.js file. (see section 3)
ext-all-debug.js - This file contains the entire Ext JS library. This can be helpful for shortening your initial learning curve, however ext-debug.js is preferred in most cases for actual application development.
ext-all.js - This is a minified version of ext-all-debug.js that can be used in production environments, however, it is not recommended since most applications will not make use of all the classes that it contains. Instead it is recommended that you create a custom build for your production environment as described in section 3.

So till now I was using the ext-all-debug.js file in my project while development and ext-all.js in the production environment.Quite straight forward right? I thought so too.

But today I found out that there is one more file in the same package which the Sencha team has not talked about at all! I, based on my today's experience, would recommend all of you reading this to use ext-all-dev.js file while doing your development. I repeat, only development!

Just to give you an example.

I had a button on my page to which I had assigned my own id (note: ideally you shouldn't do that).

When I was using the ext-all-debug.js  file, I got no errors at all and the application was working perfectly fine. But after I switched to ext-all-dev.js file, I got the following error on my console:

Uncaught Ext.AbstractManager.register(): Registering duplicate id "ApplyBtn" with this manager




I found out that the Id that I had assigned was not used anywhere in the file (usually we use the id to get handle to the component by doing Ext.getCmp(id)). It was just an unnecessary config property. 

I am not saying that it was in any way affecting my application but still it was not required. And this is just one of the several small issues that I encountered and corrected. 

Plus, There were few warning messages which suggested me to include some of the JS files in the Ext.require() section.

To sum it up, ext-all-dev.js will really help you in finding out the bugs and lapses in your code. It gives you very clear and precise error as well as warning messages in your browser's developer tool. This way you can correct your mistakes, improve the code of your application and eventually learn coding in ExtJs. Makes me wonder why the Sencha team didn't endorse this file for the novice developers.

Word of caution: Don't forget to switch to ext-all.js in the production. Size of Ext-all-dev.js file is more than 4MB!!