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


100

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

alert(document);

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

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


9
やるconsole.logFirefoxやChromeで
KJYe.Name葉家仁

1
よくわかりません。本番環境では、実際のユーザーがいますよね?それでは、なぜオブジェクトプロパティを持つアラートをスローするのでしょうか。多分より良い解決策は、オブジェクトをシリアル化してファイルに記録するか、電子メールを送信することですか?
ネイサンロング、

たぶん彼/彼女はツールとしてアラートを必要としますが、実際には他のことをする機能があります。統計の表示やエラーの発生、あるいはオブジェクトの検査に使用しているものにオブジェクトを渡すだけで両方を実行するなど、さまざまな理由が考えられます。
クリスチャン


時々JSON.stringify役に立ちます。
BrainSlugs83

回答:


56

for- inオブジェクトまたはアレイ内の各プロパティのループ。このプロパティを使用して、値を取得および変更できます。

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

forは次のようになります。

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:まあ、とにかく私は1つを書いた。


何らかの形で再帰から保護する必要があります。いくつかの内部htmlレンダラーIDを持つハッシュ(辞書)?初心者がこのチェックをコードにプッシュするのに役立ちます。
Nakilon、2012

@Nakilon私は常に無限再帰、特にPHPで問題を抱えてきました。これを修正する方法は2つあります。深さパラメーターを使用するか、ハッシュを変更して、再帰のチェックに使用する独自のプロパティを追加します。深さ1はおそらくより安全です。
クリスチャン

私はこのバージョンのline 7の方が好きです。それはルビーに少し似ており、いくつかの素敵な空白文字r.push(i + '"' + p + '" =>' +(t == 'object'? '{\ n' + xinspect(o [p]、i + '')+( '\ n' + i + '}、'):o [p] + ''));
BC。

2
このコードは、iPhoneのSafari Mobileを完全に破壊しました。より安全な代替策として、以下のJSON.stringifyソリューションを使用します。
ダニエル

1
このことはサファリをクラッシュさせ、オブジェクトを検査するクロムはお勧めしません。
Keno

194

どの程度alert(JSON.stringify(object))最新のブラウザで?

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

ドキュメンテーション:JSON.stringify()出力のフォーマットまたは見栄えに関する情報を提供します。


+1良い提案。私は彼がjsonview(jsonviewer.stack.hu)を使用してそれをうまく見ることができると付け加えます。
クリスチャン

2
あなたはそれがきれいすぎてフォーマットしたしたい場合は、呼び出すことができますalert(JSON.stringify(object, null, 4)。ここで、4インデントに使用するスペースの数です。
Jan Molak 2014

これは、出力として「未定義」を与えます。カルマテストをデバッグしようとしています。
Alex C

1
このアプローチには注意点があります。OPはオブジェクトのメソッドを検査したいと言っています。stringify メソッドを表示しません:JSON.stringify({f: ()=>{}}) => "{}"。また、オブジェクトがtoJSONメソッドを実装する場合、そのメソッドが返すものを取得します。これは、オブジェクトを検査する場合には役に立ちませんJSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'
モロゾフ

39

console.dir(object)Firebugプラグインの使用


4
これにより、自分が求めていたものについて最も完全で役立つ情報が得られました。ありがとう。
Shon

2
私はそのconsole.dir機能を知りませんでした。Firebugでオブジェクト全体を表示できなくなった理由を理解できませんでした。これでソートされました。ありがとう!
Andrew Newby 2016

console.log表示の便利さに加えて、これに他の利点があるかどうかを知る必要があります
user10089632 '23

17

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

 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

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

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 });

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


これらの表示された値はリアルタイムで動的に変化し、デバッグの目的で誤解を招く可能性があります
user10089632

Chromeでは、コンソールの設定を使用して、[ログの保存]をクリックします。スクリプトが別のページにリダイレクトしても、コンソールはクリアされません。
Richard Torcato 2017

この問題はFirefoxに関連しているようです。Chromeではconsole.log()を再実行しない限り、表示された値がまだ残っているためです。Chromeに移行することをお勧めしますが、ブラウザの機能の可用性をテストしていることもあります。とにかく役立つかもしれない先端をありがとう。
user10089632 2017

consoleスタイリングstackoverflow.com/q/7505623/1480391を使用していて、互換性がないため使用できません
Yves M.

9
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);

console.log()はどのように実行しますか?:)
クリスチャン

FirefoxまたはChromeを使用してください。Firebug for Firefoxを入手してください。持っている必要があります
moe

私は皮肉屋でした。OPは特にJSコードを要求しました。彼がfirebug / fox / chromeを掘り下げることを示唆しているのでない限り、彼がどこで答えを見つけることができるのかわかりません。
クリスチャン

6

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

/**
 * 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

4

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

このように使用してください:

document.write(inspect(object));

2
それは通常のケースです(そしてそれは間違いなく公式のガイダンスです-リンクを投稿しないでください)。最新のコードで、何年も前に投稿されて動作しなくなった古いものではありません...-また、その巨大なコードブロックはテキストの壁に貼り付けられてかなりひどく見えます...- トピックを外してください:コードのための「スポイラー」様のタグを持っているし、外部ソースにリンクすることができるし、(可能な場合)、更新の自動それを持っているように道があった場合、それはいいだろう、
BrainSlugs83
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.