javascript - 探索像 WebKit 控制台这样的通用价值

Question

我正在开发一个自定义工具来测试一个 javascript 库。我正在使用 Chrome。

当我编写“窗口”并按 Enter 时，我需要以编程方式探索一个通用对象，例如 WebKit 控制台。

我该如何实施该检查员？或者，我如何调用该对象检查器并将生成的 HtmlElement 插入 DOM？

Answer 1

在等待中，我开发了探索方法。需要 jQuery。

这是JavaScript代码：

window.Debugger = {};
window.Debugger.Explore = function (value) {
var fReturn = jQuery("<div class=\"DbgExp\" />");
if (value === null) {
    fReturn.addClass("aNull").text("null");
} else {
    switch (typeof value) {
        case "undefined":
            fReturn.addClass("aNull").text("undefined");
            break;
        case "string":
            fReturn.addClass("aStr").text("\"" + value + "\"");
            break;
        case "number":
            fReturn.addClass("aVal").text(value);
            break;
        case "boolean":
            fReturn.addClass("aVal").text(value ? "true" : "false");
            break;
        case "function":
        case "object":
            var str1 = "" + value;
            if (str1.length > 40) str1 = str1.substr(0, 37) + "...";
            var objName = jQuery("<div class=\"name\" />").text(str1);
            fReturn.addClass("aObj").append(objName);
            objName.click(function (ev, data) {
                if (fReturn.hasClass("aOn")) return fReturn.removeClass("aOn");
                fReturn.addClass("aOn");
                if (fReturn.data("isFill")) return;
                var ul = jQuery("<ul />").appendTo(fReturn);
                var num = 0;
                for (var k in value) {
                    jQuery("<li />")
                        .appendTo(ul)
                        .append(
                            jQuery("<div class=\"lbl\" />").text(k)
                            , Debugger.Explore(value[k])
                        );
                    num++;
                }
                if (num == 0) {
                    jQuery("<li><div class=\"lbl\">- no properties -</div></li>").appendTo(ul);
                }
                fReturn.data("isFill", true);
            });
            break;
    }
}
return fReturn;
};

这是CSS：

.DbgExp         { display:inline-block; background-color:white; color:black; font-family:monospace; font-size:10pt; }
.DbgExp.aNull   { background-color:white; font-size:10pt; color:#a9a9a9; }
.DbgExp.aStr    { background-color:white; font-size:10pt; color:#a62222; }
.DbgExp.aVal    { background-color:white; font-size:10pt; }
.DbgExp.aObj    { background-color:white; font-size:10pt; border:dotted 1px cornflowerblue; margin-left:20px; }
.DbgExp.aObj:before     { display:inline-block; content:"+"; background-color:#d8eaff; border:solid 1px #0966b4; width:16px; line-height:16px; font-family:monospace; font-size:14px; font-weight:bold; text-align:center; }
.DbgExp.aObj .name      { display:inline; font-family:monospace; min-width:40px; margin-left:5px; color:#0966b4; background-color:#d8eaff; border:solid 1px #0966b4; font-size:9pt; font-family:helvetica; padding:1px 4px; cursor:pointer; }
.DbgExp.aObj.aOn:before { content:"-"; }
.DbgExp.aObj ul         { display:none; }
.DbgExp.aObj.aOn > ul       { display:block; }
.DbgExp.aObj ul li      { }
.DbgExp.aObj ul li .lbl     { display:inline-block; font-family:helvetica; min-width:80px; font-size:10pt; color:#777; vertical-align:top; }
.DbgExp.aObj ul li .DbgExp  { margin-left:10px; }

显示如何使用的html片段：

...
<div id="DebugOutput">
</div>
<script type="text/javascript">
jQuery(document)
    .ready(function () {
        jQuery("#DebugOutput")
            .append(
                Debugger.Explore(new Date())
                , Debugger.Explore(window)
            );
    });
</script>