"Debugging" ExtJS script - extjs

Question

Are there any particular tools available for "Debugging" ExtJS script ? Especially, I findi it difficult to debug when the screen goes blank.!

Answer 1

Aptana Studio is optimised for Javascript development, including debug support for Firefox and IE, it even supports type-ahead on the Ext JS library (you might have to download some eclipse plugins separately).
Ext JS comes included with a debugging console (you need to add debug.js and call Ext.log("blah") to bring it up), this will provide functionality that is similar to Firebug on Firefox but not as extensive, still its useful for supplementing the poor development tools that come pre-installed with IE 8. Firebug (as Ergo mentioned here) is the most powerful of the browser-based development tools (it allows step-by-step debugging) however the latest versions of Chrome and Safari also come installed with develoment tools that are useful (but not as much as Firebug).
I find that running a debug trace throughout your application speeds up the process of finding bugs (see example below).
// Setup simple debugging tool
DebugManager = function {};
DebugManager.isEnabled = true;
DebugManager.log = function() {
if (DebugManager.isEnabled && arguments.length && console && console.log) {
try {
// Single parameter? pass it to console
if (arguments.length == 1) console.log(arguments[0])
// Multiple parameters? output raw arguments array to the console
else console.log(arguments);
} catch (e) {}
}
};
// Your function
function doSomething(myString) {
DebugManager.log("doSomething(myString)", myString);
// code for doSomething
}
You can then look up the console trace (Firebug is the best since it outputs full object information) and note the last function that executed before your code broke.
After many months of Ext JS development I have to say that Firebug + Aptana Studio combo wins hands down on other tools for development.

Answer 2

The Firebug Extension for Firefox is one of the best, to debug and test any web based framework. It wont necessary hand hold you, and you will need some familiarity with standard debug procedures, but is an excellent start. JSLint is another, online tool, for more advanced users.

Answer 3

I have found by changing my coding style, I've actually written more bug-free code. Usually when I see blank screens in IE, it has to do with trailing commas. I've started writing my ExtJS/JSON like this:
{
id: 'foo'
,name: 'bar'
,width: .60
,text : 'I am Jack\'s formatted code'
}
What this allows me to do is to move/comment/uncomment code around without having to worry about leftover commas. This coding convention has helped me greatly when it comes to refactoring other people's code as well as my own. Visually, it also becomes easier to ensure that the code is formatted properly.

Answer 4

I use chrome.
We can easily debug using "F12" to get the console, where it point out the line where the loading crashed, on clicking this line it goes to the cource to show the exact line of code.

Answer 5

Chrome's Development tool is that best so far when it comes to debugging ExtJs scripts. I've also used -
FireFox Developer Edition - This is pretty good and has lot's of tools available but for some reason I find it a little sluggish when debuggin ExtJs apps (CMD built in a single js).
IE Developer Tool - I know almost everyone hates it but sometimes we just have to live it with. (I find it not really bad). One problem is again - Very slow and hangs a lot of time while loading a big script. The whole script file is not even loaded at times - I forgot the exact figure but it's source viewer has a size/buffer/memory limit and cannot load the whole script and truncates whatever it cannot load - so you can get to your lines if the line exceeds that. This also happened in Firebug. But I've never faced such loading issues in Chrome.
Then again there are issues that happen only in certain browsers and you're stuck with debugging in that browser.