PDA

View Full Version : ExtJS debugging help in Firebug



stever
14 Apr 2010, 6:32 PM
In order to see this in Firebug (that is, instead of all the "Object {}" descriptions for objects, you instead get "Ext.Element {}", etc.):

http://www.extjs.com/forum/attachment.php?attachmentid=19264&d=1268426257

Insert this after ext-all-debug.js:


(function(){
if (!Ext.isGecko)
{
return;
}
var cache={},depth=0;
function setToString(fn,name){
if (typeof cache[name.toLowerCase()] == 'undefined')
fn.prototype.toString = function(){
return name;
}
}
function walker(start,lookFor,parent)
{
if (depth >12) return;
depth++;
lookFor = lookFor ||"override";

parent = parent || '';
if (start == window)
return;
for (var name in start) {
try {
var current = start[name];
if (typeof current === 'object' && name !== 'prototype' && current && !(current instanceof Node) && !current.firebug && typeof current.length === 'undefined' && Ext.Component && Ext.ComponentMgr.all != current && Ext.ComponentMgr.types != current) {
walker(current,lookFor,parent + '.' + name);
}
else if (name !== 'constructor' && typeof current === 'function' && current.prototype && (typeof current.prototype.superclass == 'object' || typeof current.prototype[lookFor] == 'function')) {
setToString(current,parent + '.' + name);
}
} catch (e) {}
}
depth--;
}
Ext.toString=function(){return 'Ext ' + Ext.version;}
setToString(Ext.Element,'Ext.Element')
setToString(Ext.util.Observable,'Ext.util.Observable')
setToString(Ext.util.DelayedTask,'Ext.util.DelayedTask')
setToString(Ext.util.TaskRunner,'Ext.util.TaskRunner')
setToString(Ext.util.Event,'Ext.util.Event')
setToString(Ext.LoadMask,'Ext.LoadMask')
setToString(Ext.Shadow,'Ext.Shadow')
setToString(Ext.Error,'Ext.Error')
setToString(Ext.Action,'Ext.Action')
setToString(Ext.Template,'Ext.Template')
walker(Ext,'Ext');
Ext.util.MixedCollection.prototype.toString = function(){
var len = this.length || 0;
return "Ext.util.MixedCollection [ " + len +" items ]";
}
Ext.override(Ext.Component,{
toString:function(){
return this.xtype ? 'xtype '+this.xtype : 'ctype ' + this.ctype;
}
})
})();

Reference: original discussion (http://www.extjs.com/forum/showthread.php?96333-DISCUSS-Ext.Element-instead-of-Object-in-Firebug).

Wolfgang
17 Apr 2010, 7:26 AM
Great - thank you very much for sharing.

stephen.friedrich
19 Apr 2010, 12:59 PM
Hm, the walker does not seem to work for me (it never calls setToString() for any classes).
I did include the file after including ExtJS 3.1.1.

I only get the "hardcoded" stuff like Ext.Element and Ext.util.Observable, but nothing else (for example Ext.data.Record is missing).

stever
19 Apr 2010, 6:55 PM
Hm, the walker does not seem to work for me (it never calls setToString() for any classes).
I did include the file after including ExtJS 3.1.1.

I only get the "hardcoded" stuff like Ext.Element and Ext.util.Observable, but nothing else (for example Ext.data.Record is missing).

Strange. Did you try single stepping to see what is going on?

stever
4 May 2010, 6:11 PM
One other addition I found helpful:


Ext.util.MixedCollection.prototype.toString = function(){
var len = this.length || 0;
return "Ext.util.MixedCollection [ " + len +" items ]";
}


It is a nice quick look inside to see how many items a mixed collection has.