Bagaimana saya bisa membuat console.log menunjukkan keadaan objek saat ini?

146

Di Safari tanpa add-on (dan sebenarnya sebagian besar peramban lainnya), console.logakan menampilkan objek pada status eksekusi terakhir, bukan pada status saat console.logdipanggil.

Saya harus mengkloning objek hanya untuk output melalui console.loguntuk mendapatkan keadaan objek pada baris itu.

Contoh:

var test = {a: true}
console.log(test); // {a: false}
test.a = false; 
console.log(test); // {a: false}
Wesley
sumber
2
jsfiddle contoh masalah dan berbagai solusi yang diberikan di bawah ini: jsfiddle.net/luken/M6295
Luke
7
Sangat berlawanan dengan intuisi untuk fungsi log untuk menampilkan referensi langsung ke objek. Itu disebut arloji , yang jauh berbeda dari entri log. Tidak masuk akal untuk melakukan hal ini saat mencatat suatu objek daripada ketika melakukan pencatatan variabel yang menyimpan nilai primitif.
faintsignal
2
Bagaimana saya belum pernah menemukan ini sebelumnya? Saya menemukan ini menakutkan
ErikAGriffin

Jawaban:

172

Saya pikir Anda sedang mencari console.dir().

console.log()tidak melakukan apa yang Anda inginkan karena ia mencetak referensi ke objek, dan saat Anda membukanya, itu berubah. console.dirmencetak direktori properti di objek pada saat Anda memanggilnya.

Gagasan JSON di bawah ini adalah ide yang bagus; Anda bahkan bisa melanjutkan untuk mengurai string JSON dan mendapatkan objek yang dapat dijelajahi seperti apa yang akan diberikan oleh .dir ():

console.log(JSON.parse(JSON.stringify(obj)));

evan
sumber
38
Bagi saya di Chrome13 tidak ada perbedaan antara console.logdanconsole.dir
Andrew D.
Hm, itu mengejutkan - ini bekerja di Firebug. Saya pikir itu sama di Webkit.
evan
1
Yang saya lihat di Chrome adalah jika Anda membuka konsol setelah pernyataan log dijalankan, maka ia akan melakukan evaluasi malas ketika Anda mengembangkannya. Tetapi jika konsol sudah terbuka (misalnya Anda membuka konsol dan kemudian tekan refresh pada halaman), itu akan melakukan evaluasi bersemangat - yaitu mencetak nilai pada saat pernyataan log dijalankan.
Polemarch
6
Juga, dir adalah untuk JSON karena copy dangkal adalah untuk copy dalam. console.dir () hanya akan mengevaluasi properti objek tingkat atas (objek bersarang lebih dalam lainnya tidak akan dievaluasi), sedangkan JSON akan berjalan secara rekursif.
Polemarch
9
Demikian juga bagi saya console.dirtidak bekerja di Chrome (v33). Berikut adalah perbandingan dari solusi yang ditawarkan orang: jsfiddle.net/luken/M6295
Luke
71

Apa yang biasanya saya lakukan jika saya ingin melihat keadaannya pada saat itu adalah saya hanya mengonversinya menjadi string JSON.

console.log(JSON.stringify(a));
Alex Turpin
sumber
4
Hebat, itu isyarat yang bagus untuk saya: Saya hanya perlu menguraikannya lagi agar benda saya ada di konsol. function odump(o){ console.log($.parseJSON(JSON.stringify(o))); }
Chris
1
terima kasih ini bekerja untuk saya! console.dir tidak mencetaknya
ah-shiang han
1
bagaimana jika objek Anda mengandung struktur melingkar?
Alex McMillan
1
@AlexMcMillan Anda bisa menggunakan salah satu dari beberapa pustaka yang memungkinkan pengerasan objek JSON dengan referensi melingkar.
Alex Turpin
7
Ya ampun. Ini harus menjadi hal yang sederhana dan jelas untuk dapat dilakukan. Sebagai gantinya, kita harus merangkai, menguraikan, mencatat, dan menggunakan pustaka referensi melingkar khusus!?! Saya pikir browser perlu melakukan pekerjaan yang lebih baik untuk mendukung kebutuhan debugging sederhana.
Mars
26

Vanilla JS:

@ jawaban evan sepertinya yang terbaik di sini. Cukup (ab) gunakan JSON.parse / stringify untuk secara efektif membuat salinan objek.

console.log(JSON.parse(JSON.stringify(test)));

Solusi spesifik JQuery:

Anda dapat membuat snapshot objek pada titik waktu tertentu dengan jQuery.extend

console.log($.extend({}, test));

Apa yang sebenarnya terjadi di sini adalah jQuery adalah membuat objek baru dengan testkonten objek, dan mencatatnya (sehingga tidak akan berubah).

AngularJS (1) solusi spesifik:

Angular menyediakan copyfungsi yang dapat digunakan untuk efek yang sama:angular.copy

console.log(angular.copy(test));

Fungsi bungkus Vanilla JS:

Berikut adalah fungsi yang membungkus console.logtetapi akan membuat salinan dari setiap benda sebelum log mereka keluar.

Saya menulis ini sebagai jawaban atas beberapa fungsi yang serupa tetapi kurang kuat dalam jawabannya. Ini mendukung banyak argumen, dan tidak akan mencoba untuk menyalin sesuatu jika mereka bukan objek biasa .

function consoleLogWithObjectCopy () {
  var args = [].slice.call(arguments);
  var argsWithObjectCopies = args.map(copyIfRegularObject)
  return console.log.apply(console, argsWithObjectCopies)
}

function copyIfRegularObject (o) {
  const isRegularObject = typeof o === 'object' && !(o instanceof RegExp)
  return isRegularObject ? copyObject(o) : o
}

function copyObject (o) {
  return JSON.parse(JSON.stringify(o))
}

contoh penggunaan :consoleLogWithObjectCopy('obj', {foo: 'bar'}, 1, /abc/, {a: 1})

Zach Lysobey
sumber
6

Itu > Objectdi konsol, tidak hanya menunjukkan kondisi saat ini. Sebenarnya menunda membaca objek dan properti itu sampai Anda memperluasnya.

Sebagai contoh,

var test = {a: true}
console.log(test);
setTimeout(function () {
    test.a = false; 
    console.log(test);
}, 4000);

Kemudian perluas panggilan yang pertama, jika Anda melakukannya sebelum yang kedua console.logkembali

Joe
sumber
2

menggunakan petunjuk Xeon06, Anda dapat mengurai JSON-nya di sebuah objek, dan di sini adalah fungsi log yang sekarang saya gunakan untuk membuang objek saya:

function odump(o){
   console.log($.parseJSON(JSON.stringify(o)));
}
Chris
sumber
1

Saya mendefinisikan sebuah utilitas:

function MyLog(text) {
    console.log(JSON.stringify(text));
}

dan ketika saya ingin masuk konsol saya cukup lakukan:

MyLog("hello console!");

Ini bekerja dengan sangat baik!

Migio B
sumber
1

Ada opsi untuk menggunakan perpustakaan debugger.

https://debugjs.net/

Cukup sertakan skrip ke halaman web Anda dan masukkan pernyataan log.

<script src="debug.js"></script>

Penebangan

var test = {a: true}
log(test); // {a: true}
test.a = false; 
log(test); // {a: false}
Takashi Harano
sumber
0

Saya mungkin tertembak karena menyarankan ini, tetapi ini bisa diambil satu langkah lebih jauh. Kita dapat langsung memperluas objek konsol itu sendiri untuk membuatnya lebih jelas.

console.logObject = function(o) {
  (JSON.stringify(o));
}

Saya tidak tahu apakah ini akan menyebabkan beberapa jenis tabrakan perpustakaan / kehancuran nuklir / rip dalam ruangwaktu kontinum. Tapi itu bekerja dengan baik dalam tes qUnit saya. :)

Dave
sumber
1
Ini tidak mencatat apa pun. Itu hanya menelan hasil dari mengencangkan sesuatu. Lucu bahwa upvotes yang didapat
Zach Lysobey
0

Cukup segarkan halaman setelah Anda membuka konsol atau membuka konsol sebelum Anda mengirimkan permintaan ke halaman yang ditargetkan ....

A. Qaoud
sumber
-1

Cukup cetak seluruh objek pada konsol.

console.dir(object);
Mangesh Bhapkar
sumber