Bagaimana cara menampilkan objek penuh di konsol Chrome?

155 
var functor=function(){
    //test
}

functor.prop=1;

console.log(functor);

ini hanya menampilkan bagian fungsi dari functor, tidak dapat menampilkan properti dari functor di konsol.

javascript debugging google-chrome lovespring
sumber

Jawaban:

245

Gunakan console.dir()untuk menampilkan objek yang dapat dijelajahi yang dapat Anda klik alih-alih .toString()versi, seperti ini:

console.dir(functor);

Mencetak representasi JavaScript dari objek yang ditentukan. Jika objek yang sedang dicatat adalah elemen HTML, maka properti representasi DOM-nya akan dicetak [1]

[1] https://developers.google.com/web/tools/chrome-devtools/debug/console/console-reference#dir

Nick Craver
sumber
1
Perlu dicatat bahwa hanya mencetak varNamedi konsol Chrome dan menekan Enter memberikan efek yang sama console.dir(varName).
Vadzim
118

Anda mungkin mendapatkan hasil yang lebih baik jika Anda mencoba:

console.log(JSON.stringify(functor));
BastiBen
sumber
jawaban ini bagus tetapi saya pikir tidak bekerja dengan sampel di atas, mencoba di tab baru dan mengembalikan tidak ditentukan
aitorllj93
1
Dengan segala hormat terhadap jawaban ini, akhirnya ia mengembalikan string yang mewakili objek, dan bukan objek "browseable" di konsol, seperti pertanyaannya adalah semua tentang di sini. Benar, jika Anda menjalankan string keluaran ini melalui JSON.parse, ia akan kembali ke format objeknya, tetapi konsol masih akan menampilkannya ".toString ()" dan kami kembali ke titik awal. Jawabannya di sini dengan penggunaan "console.dir" adalah yang paling cocok untuk pertanyaan yang ada.
TheCuBeMan
21

Anda mungkin mendapatkan hasil yang lebih baik jika Anda mencoba:

console.log(JSON.stringify(obj, null, 4));
Trident D'Gao
sumber
Jawaban ini meningkat pada @ BastiBen dengan memformat output.
Xeoncross
12 
var gandalf = {
  "real name": "Gandalf",
  "age (est)": 11000,
  "race": "Maia",
  "haveRetirementPlan": true,
  "aliases": [
    "Greyhame",
    "Stormcrow",
    "Mithrandir",
    "Gandalf the Grey",
    "Gandalf the White"
  ]
};
//to console log object, we cannot use console.log("Object gandalf: " + gandalf);
console.log("Object gandalf: ");
//this will show object gandalf ONLY in Google Chrome NOT in IE
console.log(gandalf);
//this will show object gandalf IN ALL BROWSERS!
console.log(JSON.stringify(gandalf));
//this will show object gandalf IN ALL BROWSERS! with beautiful indent
console.log(JSON.stringify(gandalf, null, 4));
Kean Amaral
sumber
8

ini bekerja dengan baik untuk saya:

for(a in array)console.log(array[a])

Anda dapat mengekstrak setiap array yang dibuat di konsol untuk mencari / mengganti pembersihan dan penggunaan posterior dari data ini yang diekstraksi

domSurgeon
sumber
3
sedikit lebih detail:for (i in arr) { console.log(i); console.log(arr[i]); }
Geo
itu tidak akan menampilkan properti dan metode yang tidak dapat dihitung
Barbu Barbu
0

Saya menulis fungsi untuk mencetak berbagai hal dengan mudah ke konsol.

// function for debugging stuff
function print(...x) {
    console.log(JSON.stringify(x,null,4));
}

// how to call it
let obj = { a: 1, b: [2,3] };
print('hello',123,obj);

akan ditampilkan di konsol:

[
    "hello",
    123,
    {
        "a": 1,
        "b": [
            2,
            3
        ]
    }
]
John Henckel
sumber
0

Dengan browser modern, console.log(functor)berfungsi dengan baik (berperilaku sama adalah a console.dir).

akim
sumber
0

Saya membuat fungsi jawaban Trident D'Gao.

function print(obj) {
  console.log(JSON.stringify(obj, null, 4));
}

Bagaimana cara menggunakannya

print(obj);
Jens Törnell
sumber
-5

Untuk menampilkan keberatan:

console.log(obj, null, 4)
Kulakov Serg
sumber