Apa perbedaan antara console.dir dan console.log?

Di Chrome consoleobjek mendefinisikan dua metode yang tampaknya melakukan hal yang sama:

console.log(...)
console.dir(...)

Saya membaca di suatu tempat online yang dirmengambil salinan objek sebelum login, sedangkan loghanya melewati referensi ke konsol, yang berarti bahwa pada saat Anda pergi untuk memeriksa objek yang Anda login, mungkin telah berubah. Namun beberapa pengujian awal menunjukkan bahwa tidak ada perbedaan dan bahwa mereka berdua berpotensi menunjukkan objek di negara yang berbeda daripada ketika mereka login.

Coba ini di konsol Chrome ( Ctrl+ Shift+ J) untuk melihat apa yang saya maksud:

> o = { foo: 1 }
> console.log(o)
> o.foo = 2

Sekarang, perluas di [Object]bawah pernyataan log dan perhatikan bahwa itu ditampilkan foodengan nilai 2. Hal yang sama berlaku jika Anda mengulangi percobaan menggunakan dirbukan log.

Pertanyaan saya adalah, mengapa kedua fungsi yang tampaknya identik ini ada console?

Di Firefox, fungsi ini berperilaku sangat berbeda: loghanya mencetak atoString representasi, sedangkan dirmencetak pohon yang bisa dinavigasi.

Di Chrome, logsudah mencetak pohon - sebagian besar waktu . Namun, Chrome logmasih merangkai kelas objek tertentu, bahkan jika mereka memiliki properti. Mungkin contoh paling jelas dari perbedaan adalah ekspresi reguler:

> console.log(/foo/);
/foo/

> console.dir(/foo/);
* /foo/
    global: false
    ignoreCase: false
    lastIndex: 0
    ...

Anda juga dapat melihat perbedaan yang jelas dengan array (misalnya, console.dir([1,2,3]))log berbeda dari objek normal:

> console.log([1,2,3])
[1, 2, 3]

> console.dir([1,2,3])
* Array[3]
    0: 1
    1: 2
    2: 3
    length: 3
    * __proto__: Array[0]
        concat: function concat() { [native code] }
        constructor: function Array() { [native code] }
        entries: function entries() { [native code] }
        ...

Objek DOM juga menunjukkan perilaku yang berbeda, seperti dicatat pada jawaban lain .

Perbedaan lain yang bermanfaat di Chrome ada saat mengirim elemen DOM ke konsol.

Memperhatikan:

• console.log mencetak elemen dalam pohon mirip HTML
• console.dir mencetak elemen dalam pohon mirip JSON

Secara khusus, console.logmemberikan perlakuan khusus untuk elemen DOM, sedangkanconsole.dir tidak. Ini sering berguna ketika mencoba untuk melihat representasi penuh dari objek DOM JS.

Ada informasi lebih lanjut di referensi Chrome Console API tentang ini dan fungsi lainnya.

Saya pikir Firebug melakukannya secara berbeda dari alat pengembang Chrome. Sepertinya Firebug memberi Anda versi objek yang diketik sementaraconsole.dir memberi Anda objek yang dapat diperluas. Keduanya memberi Anda objek yang dapat diperluas di Chrome, dan saya pikir dari situlah kebingungan itu berasal. Atau itu hanya bug di Chrome.

Di Chrome, keduanya melakukan hal yang sama. Memperluas pengujian Anda, saya perhatikan bahwa Chrome mendapatkan nilai objek saat ini saat Anda mengembangkannya.

> o = { foo: 1 }
> console.log(o)
Expand now, o.foo = 1
> o.foo = 2
o.foo is still displayed as 1 from previous lines

> o = { foo: 1 }
> console.log(o)
> o.foo = 2
Expand now, o.foo = 2

Anda bisa menggunakan yang berikut ini untuk mendapatkan versi objek yang dirangkai jika itu yang ingin Anda lihat. Ini akan menunjukkan kepada Anda apa objek itu pada saat baris ini dipanggil, bukan ketika Anda memperluasnya.

console.log(JSON.stringify(o));

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

console.dir(obj/this/anything)

Bagaimana cara menampilkan objek penuh di konsol Chrome?

Dari situs firebug http://getfirebug.com/logging/

Memanggil console.dir (objek) akan mencatat daftar interaktif dari properti objek, seperti> versi miniatur dari tab DOM.

Mengikuti saran Felix Klings saya mencobanya di browser chrome saya.

console.dir([1,2]) memberikan hasil sebagai berikut:

Array[2]
 0: 1
 1: 2
 length: 2
 __proto__: Array[0]

Sambil console.log([1,2])memberikan output berikut:

[1, 2]

Jadi saya percaya console.dir()harus digunakan untuk mendapatkan lebih banyak informasi seperti prototipe dll dalam array dan objek.

Perbedaan antara console.log()dan console.dir():

Inilah perbedaan singkatnya:

• console.log(input): Browser log dengan cara yang diformat dengan baik
• console.dir(input): Browser hanya mencatat objek dengan semua propertinya

Contoh:

Kode berikut:

let obj = {a: 1, b: 2};
let DOMel = document.getElementById('foo');
let arr = [1,2,3];

console.log(DOMel);
console.dir(DOMel);

console.log(obj);
console.dir(obj);

console.log(arr);
console.dir(arr);

Catat yang berikut ini di alat google dev:

Tak satu pun dari 7 jawaban sebelumnya disebutkan bahwa console.dirdukungan argumen ekstra : depth, showHidden, dan apakah penggunaancolors .

Yang menarik adalah depth, yang (dalam teori) memungkinkan travering objek ke lebih dari 2 level default yang console.logmendukung.

Saya menulis "dalam teori" karena dalam praktiknya ketika saya memiliki objek luwak dan berlari console.log(mongoose)dan console.dir(mongoose, { depth: null }), hasilnya sama. Apa yang sebenarnya recursed dalam ke mongooseobjek itu menggunakan util.inspect:

import * as util from 'util';
console.log(util.inspect(myObject, {showHidden: false, depth: null}));