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 >