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>