ExtJS debugging help in Firebug

[stever]

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



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.

[Wolfgang]

Great - thank you very much for sharing.

[stephen.friedrich]

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]

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]

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.