Flex的窗口、局部变量、对象等运行期监视工具

由来：
Flex的Debug、Trace使用的fdb，虽然说没其他IDE开发方便，但对于用过linux/unix下gdb跟踪调试的我来说也差不多都一样，但这个fdb的启动太慢了（P4 1.7G 256Rambus），而且一般也没有什么断点调试的，也就是监视一下调试数据是否正确。后来就在mxml写个textbox自己输出一下，总是不太方便，今天看到一个比较好的Trace工具，就收下来！

在线演示：
http://coenraets.com/apps/load.jsp?app=inspector/sample
你可以输入 srv.result, this, myDataGrid.width 等对象或变量来监视状态。

使用方法：
在你需要监视的mxml文件里添加<Inspect/>标记，当然对应的程序文件（见下）要包含在相同的目录了。
或者把下面的两个文件复制到WEB-INF\flex\user_classes目录下，这样所有的mxml文件都可以直接引用了。

该工具包含两个文件：
Inspect.as

/*
    Author: Christophe Coenraets, Macromedia. Blog: http://coenraets.com
    Date:   11/5/2004
*/    
class Inspect {

    function Inspect() {
        display();
    }

    function display() {
        var popup = mx.managers.PopUpManager.createPopUp(_root, InspectWindow, false, {deferred: true});
        popup.width=500;
        popup.height=400;
        popup.x=50;
        popup.y=50;
    }

}

InspectWindow.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--
    Author: Christophe Coenraets, Macromedia. Blog: http://coenraets.com
    Date:   11/5/2004
-->

<mx:TitleWindow xmlns:mx="http://www.macromedia.com/2003/mxml"
    title="Object Inspector"
    closeButton="true"
    click="deletePopUp()"
    initialize="initComp()">

    <mx:Metadata>
        [Event("debugEvent")]
    </mx:Metadata>

    <mx:Script>
        <![CDATA[

        function initComp() {
            this.addEventListener("debugEvent", mx.utils.Delegate.create(_root, doDebugEvent));
        }

        function inspect() {
            var e=expr.text;
            dispatchEvent({type: 'debugEvent', expression: e, debugWindow: this})
        }

        function doDebugEvent(event) {
            var value=eval(event.expression);
            event.debugWindow.addNode(event.debugWindow.objectTree, event.debugWindow.objectTree, event.expression, value);
        }

        function doNodeOpen(event) {
            var nodeData=event.node.getData();
            var value=nodeData.value;
            if (!nodeData.loaded) {
                if (value instanceof Array) {
                    for (var i=0; i<value.length; i++)
                        addNode(objectTree, event.node, "["+i+"]", value[i]);
                } else if (value instanceof Object) {
                    for (var i in value)
                        addNode(objectTree, event.node, i, value[i]);
                }
                nodeData.loaded=true;
            }
        }

        function addNode(tree, parentNode, attrName, attrValue) {
            var type=typeof attrValue;
            if (type=="string" || type=="number" || type=="boolean") {
                parentNode.addTreeNode(attrName +": "+type+" = "+attrValue);
            } else if (attrValue instanceof Date) {
                parentNode.addTreeNode(attrName +": Date = "+attrValue);
            } else if (attrValue instanceof Array) {
                if (attrValue.length==0)
                    parentNode.addTreeNode(attrName +": Array (length: 0)");
                else {
                    var node=parentNode.addTreeNode(attrName +" = Array (length: "+attrValue.length+")", {loaded: false, value: attrValue});
                    tree.setIsBranch(node, true);
                }
            } else if (attrValue instanceof Object) {
                if (attrValue.className!=null) {
                    type=attrValue.className;
                }
                var isBranch=false;
                for (var i in attrValue) {
                    isBranch=true;
                    break;
                }
                if (isBranch) {
                    var node=parentNode.addTreeNode(attrName+": "+type, {loaded: false, value: attrValue});
                    tree.setIsBranch(node, true);
                } else {
                    parentNode.addTreeNode(attrName+": "+type);
                }
            }
        }

        ]]>
    </mx:Script>

    <mx:Tree id="objectTree" openDuration="0" width="100%" height="100%" nodeOpen="doNodeOpen(event)"/>

    <mx:ControlBar>
        <mx:Label text="Object to inspect:"/>
        <mx:TextInput id="expr" width="100%" keyDown="if(event.code==13) inspect();"/>
        <mx:Button label="Inspect" click="inspect()" width="65"/>
        <mx:Button label="Clear" click="objectTree.removeAll()" width="65"/>
    </mx:ControlBar>

</mx:TitleWindow>