0

JavaScript ライブラリをテストするカスタム ツールを開発しています。私はクロムを使用しています。

「window」と入力して Enter キーを押すと、WebKit コンソールなどの汎用オブジェクトをプログラムで探索する必要があります。

そのインスペクタをどのように実装できますか? または、そのオブジェクト インスペクターを呼び出して、生成された HtmlElement を DOM に挿入するにはどうすればよいですか?

4

1 に答える 1

0

待っている間に、 Exploreメソッドを開発します。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>
于 2013-05-04T07:27:13.827 に答える