web-dev-qa-db-ja.com

JavaScriptオブジェクトを検査する方法

アラートボックスでオブジェクトを検査するにはどうすればよいですか？通常、オブジェクトにアラートを出すと、ノード名がスローされます。

alert(document);

しかし、アラートボックスでオブジェクトのプロパティとメソッドを取得したいです。可能であれば、この機能をどのように実現できますか？または、他の提案はありますか？

特に、console.logとFirebugが利用できない実稼働環境向けのソリューションを探しています。

javascriptobjectinspect
94
Valentina

for-inは、オブジェクトまたは配列の各プロパティに対してループします。このプロパティを使用して、値を取得したり変更したりできます。

注：「スパイ」を使用しない限り、プライベートプロパティは検査できません。基本的に、オブジェクトをオーバーライドし、オブジェクトのコンテキスト内でfor-inループを実行するコードを記述します。

のように見えます：

for (var property in object) loop();

いくつかのサンプルコード：

function xinspect(o,i){
    if(typeof i=='undefined')i='';
    if(i.length>50)return '[MAX ITERATIONS]';
    var r=[];
    for(var p in o){
        var t=typeof o[p];
        r.Push(i+'"'+p+'" ('+t+') => '+(t=='object' ? 'object:'+xinspect(o[p],i+'  ') : o[p]+''));
    }
    return r.join(i+'\n');
}

// example of use:
alert(xinspect(document));

編集：少し前に、私は自分のインスペクターを書きました。興味があれば、喜んで共有します。

編集2：まあ、とにかく書きました。

55
Christian

最新のブラウザでalert(JSON.stringify(object))はどうですか？

TypeError: Converting circular structure to JSONの場合、さらにオプションがあります。 循環参照がある場合でもDOMノードをJSONにシリアル化する方法？

ドキュメンテーション： JSON.stringify() は、出力の書式設定またはプリティファイに関する情報を提供します。

190
Torsten Becker

console.dir(object)とFirebugプラグインを使用します

39
Ranjeet

いくつかの方法があります：

 1. typeof tells you which one of the 6 javascript types is the object. 
 2. instanceof tells you if the object is an instance of another object.
 3. List properties with for(var k in obj)
 4. Object.getOwnPropertyNames( anObjectToInspect ) 
 5. Object.getPrototypeOf( anObject )
 6. anObject.hasOwnProperty(aProperty)

コンソールコンテキストでは、.constructorまたは.prototypeが役立つ場合があります。

console.log(anObject.constructor ); 
console.log(anObject.prototype ) ;
17
brotherol

コンソールを使用します。

console.log(object);

または、html dom要素を調べる場合は、console.dir（object）を使用します。例：

let element = document.getElementById('alertBoxContainer');
console.dir(element);

または、jsオブジェクトの配列がある場合は、次を使用できます。

console.table(objectArr);

多くのconsole.log（objects）を出力する場合は、次のように書くこともできます。

console.log({ objectName1 });
console.log({ objectName2 });

これは、コンソールに書き込まれたオブジェクトにラベルを付けるのに役立ちます。

16
Richard Torcato
var str = "";
for(var k in obj)
    if (obj.hasOwnProperty(k)) //omit this test if you want to see built-in properties
        str += k + " = " + obj[k] + "\n";
alert(str);
9
moe

これは、クリスチャンの優れた答えの露骨なはぎ取りです。私はそれをもう少し読みやすくしました：

/**
 * objectInspector digs through a Javascript object
 * to display all its properties
 *
 * @param object - a Javascript object to inspect
 * @param result - a string of properties with datatypes
 *
 * @return result - the concatenated description of all object properties
 */
function objectInspector(object, result) {
    if (typeof object != "object")
        return "Invalid object";
    if (typeof result == "undefined")
        result = '';

    if (result.length > 50)
        return "[RECURSION TOO DEEP. ABORTING.]";

    var rows = [];
    for (var property in object) {
        var datatype = typeof object[property];

        var tempDescription = result+'"'+property+'"';
        tempDescription += ' ('+datatype+') => ';
        if (datatype == "object")
            tempDescription += 'object: '+objectInspector(object[property],result+'  ');
        else
            tempDescription += object[property];

        rows.Push(tempDescription);
    }//Close for

    return rows.join(result+"\n");
}//End objectInspector
6
vaFyreHeart

より読みやすい私のオブジェクトインスペクターはここにあります。コードはここに書き出すのに時間がかかるため、 http://etto-aa-js.googlecode.com/svn/trunk/inspector.js からダウンロードできます。

次のように使用します。

document.write(inspect(object));
4
Muhammad Eko Avianto