Cara memeriksa Objek Javascript


100

Bagaimana cara memeriksa Objek di kotak peringatan? Biasanya memberi tahu Object hanya akan melempar nama noden:

alert(document);

Tapi saya ingin mendapatkan properti dan metode objek di kotak peringatan. Bagaimana saya dapat mencapai fungsi ini, jika memungkinkan? Atau ada saran lain?

Secara khusus, saya mencari solusi untuk lingkungan produksi di mana console.log dan Firebug tidak tersedia.


9
lakukan console.logdi firefox atau chrome
KJYe.Name 葉家仁

1
Saya bingung. Dalam lingkungan produksi, Anda memiliki pengguna yang sebenarnya, bukan? Jadi, mengapa Anda ingin memberi peringatan dengan properti objek? Mungkin solusi yang lebih baik adalah dengan membuat serial objek dan memasukkannya ke dalam file atau mengirim email?
Nathan Long

Mungkin dia membutuhkan peringatan sebagai alat, tetapi fungsionalitas sebenarnya untuk melakukan sesuatu yang lain. Mungkin ada berbagai alasan mengapa dia ingin melakukan ini, seperti menunjukkan statistik, atau terjadinya kesalahan, atau melakukan keduanya hanya dengan meneruskan objek ke apa pun yang dia gunakan untuk memeriksa objek.
Christian


Terkadang JSON.stringifymembantu.
BrainSlugs83

Jawaban:


56

The for- inloop untuk setiap properti dalam objek atau array. Anda dapat menggunakan properti ini untuk mendapatkan nilai serta mengubahnya.

Catatan: Properti pribadi tidak tersedia untuk diperiksa, kecuali Anda menggunakan "mata-mata"; pada dasarnya, Anda mengganti objek dan menulis beberapa kode yang melakukan perulangan for-in di dalam konteks objek.

Untuk di terlihat seperti:

for (var property in object) loop();

Beberapa kode contoh:

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

Edit: Beberapa waktu lalu, saya menulis inspektur saya sendiri, jika Anda tertarik, saya senang berbagi.

Sunting 2: Ya, saya tetap menulis satu.


Harus dilindungi dari rekursi. Hash ( kamus ) dengan beberapa id perender-html internal? Dapat berguna bagi pemula untuk memasukkan cek ini ke dalam kode.
Nakilon

@Nakilon Saya selalu bermasalah dengan rekursi tak terbatas, terutama di PHP. Ada dua cara untuk memperbaikinya: menggunakan parameter kedalaman, atau memodifikasi hash dan menambahkan properti Anda sendiri yang Anda gunakan untuk memeriksa rekursi. Kedalaman yang satu mungkin lebih aman.
Christian

Saya lebih suka versi baris 7 ini. Ini terlihat sedikit lebih seperti ruby ​​dan memiliki spasi putih yang bagus r.push (i + '"' + p + '" =>' + (t == 'object'? '{\ N' + xinspect (o [p], i + '') + ('\ n' + i + '},'): o [p] + ''));
SM.

2
Sepotong kode itu benar-benar merusak Safari Mobile di iPhone. Saya akan menggunakan solusi JSON.stringify di bawah ini untuk alternatif yang lebih aman.
Daniel

1
Hal ini macet safari, chrome memeriksa objek, tidak akan merekomendasikan.
Keno

194

Bagaimana alert(JSON.stringify(object))dengan browser modern?

Jika demikian TypeError: Converting circular structure to JSON, berikut adalah opsi lainnya: Bagaimana cara membuat serial simpul DOM ke JSON meskipun ada referensi melingkar?

Dokumentasi: JSON.stringify()memberikan info tentang pemformatan atau prettifying output.


+1 Saran yang bagus. Saya akan menambahkan dia bisa menggunakan jsonview ( jsonviewer.stack.hu ) untuk melihatnya dengan baik.
Christian

2
Jika Anda ingin memiliki format yang bagus juga, Anda dapat memanggil:, di alert(JSON.stringify(object, null, 4)mana 4jumlah spasi yang digunakan untuk indentasi.
Jan Molak

Ini memberi saya 'tidak ditentukan' sebagai keluaran. Saya mencoba men-debug tes karma.
Alex C

1
Ada peringatan untuk pendekatan ini. OP mengatakan bahwa dia ingin memeriksa metode objek. stringify tidak akan menunjukkan metode: JSON.stringify({f: ()=>{}}) => "{}". Juga, jika objek mengimplementasikan toJSONmetode Anda mendapatkan apa yang kembali metode, yang tidak berguna jika Anda ingin memeriksa objek: JSON.stringify({toJSON: () => 'nothin'}) => '"nothin"'.
Morozov

39

Gunakan console.dir(object)dan plugin Firebug


4
Ini memberi saya informasi paling lengkap dan bermanfaat untuk apa yang saya kejar. Terima kasih.
Shon

2
Saya tidak mengetahui console.dirfitur tersebut. Saya tidak tahu mengapa saya tidak bisa lagi melihat objek penuh di Firebug. Ini sekarang telah menyortirnya untuk saya. Terima kasih!
Andrew Newby

Saya perlu tahu apakah ada keuntungan lain dari ini console.logselain kenyamanan tampilan, harap
pengguna10089632

17

Ada beberapa metode:

 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) 

Dalam konteks konsol, terkadang .constructor atau .prototype mungkin berguna:

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

17

Gunakan konsol Anda:

console.log(object);

Atau jika Anda memeriksa elemen dom html gunakan console.dir (object). Contoh:

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

Atau jika Anda memiliki array objek js, Anda dapat menggunakan:

console.table(objectArr);

Jika Anda mengeluarkan banyak console.log (objek), Anda juga dapat menulis

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

Ini akan membantu Anda memberi label pada objek yang ditulis ke konsol.


Nilai-nilai yang ditampilkan tersebut berubah secara dinamis, dalam waktu nyata yang dapat menyesatkan untuk tujuan debugging
user10089632

di chrome gunakan preferensi konsol Anda dan klik pertahankan log. Sekarang bahkan jika skrip Anda mengarahkan Anda ke halaman lain, konsol Anda tidak dihapus.
Richard Torcato

Tampaknya masalah ini terkait dengan Firefox karena di Chrome kecuali Anda konsol.log () nilai yang ditampilkan masih. Anda mungkin menyarankan untuk pindah ke Chrome tetapi terkadang Anda menguji ketersediaan fitur browser. Pokoknya terima kasih atas tip yang semoga bermanfaat.
user10089632

Saya tidak dapat menggunakan consolekarena saya menggunakan styling stackoverflow.com/q/7505623/1480391 dan tidak kompatibel
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);

Bagaimana console.log () melakukannya? :)
Kristen

gunakan Firefox atau Chrome. Dapatkan Firebug untuk Firefox. harus memiliki
moe

Saya sedang menyindir. OP secara khusus meminta kode JS, dan kecuali Anda menyarankan agar dia mempelajari firebug / fox / chrome, saya tidak tahu di mana dia akan menemukan jawabannya.
Kristen

6

Ini adalah penipuan terang-terangan dari jawaban Christian yang luar biasa. Saya baru saja membuatnya sedikit lebih mudah dibaca:

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

Ini inspektur objek saya yang lebih mudah dibaca. Karena kode membutuhkan waktu lama untuk ditulis di sini, Anda dapat mengunduhnya di http://etto-aa-js.googlecode.com/svn/trunk/inspector.js

Gunakan seperti ini:

document.write(inspect(object));

2
Biasanya itu yang terjadi (dan ini jelas merupakan panduan resmi - jangan posting tautan), OTOH, untuk sesuatu yang berversi seperti ini, itu bisa menjadi hal yang baik, karena Anda tahu bahwa Anda akan selalu melihat kode terbaru, dan bukan beberapa hal basi yang diposting tahun yang lalu dan mungkin tidak berfungsi lagi ... - Juga, blok kode yang sangat besar itu akan terlihat sangat buruk ditempelkan ke dinding teks SO jawaban ... - Off topic: alangkah baiknya jika ada cara di SO untuk memiliki tag seperti "spoiler" untuk kode dan untuk dapat menautkan ke sumber eksternal dan memperbaruinya secara otomatis (jika memungkinkan),
BrainSlugs83
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.