Apa perbedaan antara console.dir dan console.log?


357

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?


65
Coba console.log([1,2])dan console.dir([1,2])Anda akan melihat perbedaannya.
Felix Kling

Dalam pembakar konten dari suatu objek yang dicatat console.dirtidak berubah, jadi itu membuat perbedaan besar.
Eugene Yarmash

3
Hati-hati dengan console.dir(): fitur ini tidak standar ! Jadi jangan menggunakannya pada produksi;)
fred727


1
@ user7393973 temukan bagus! Sebenarnya, gambar tersebut dari jawaban saya di bawah ini, jadi benar-benar ditangkap di laptop saya. Sangat menyenangkan untuk mengembalikan sesuatu ke MDN. Sumber daya yang luar biasa.
Drew Noakes

Jawaban:


352

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 .


11
Jangan lupa bahwa console.dir menyimpan referensi ke objek. Anda mungkin tidak ingin menggunakannya secara luas dalam produksi. Mungkin hanya berfungsi jika konsol ditampilkan.
Jean-Philippe Leclerc

Di Chromium 45 di Ubuntu, console.logtampaknya versi "Firefox" yang disederhanakan terlihat seperti toStringpohon. Saya belum yakin kapan mereka mengubahnya, tetapi mereka melakukannya.
es

3
@icedwater: Tergantung pada apakah konsol Anda terbuka saat Anda menelepon console.logatau membukanya nanti. Ya benar :-)
TJ Crowder

Anda juga dapat melihat perbedaan yang jelas dengan Function. Di chrome, itu akan mencetak kode sumber Function denganconsole.log , tetapi dengan console.dir, Anda dapat melihat prototype, argumentssifat.
Tina Chen

1
Sekarang sepertinya itu console.logdan console.dirbenar - benar mengembalikan representasi yang sama di [1,2,3]dalam Firefox.
xji

151

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.



11
@ loneshark99 sebenarnya itu sebaliknya. Perhatikan URL di tangkapan layar mereka? Mereka menyalin jawaban saya. Tapi itu tidak masalah dengan karena itu diizinkan oleh lisensi pada jawaban SO dan saya tetap menyukai MDN.
Drew Noakes

Mengerti, itulah yang awalnya saya pikirkan tetapi kemudian berpikir mengapa mereka akan menyalin dari sini. Masuk akal . Informasi bagus
loneshark99

4

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



0

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.


0

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:

masukkan deskripsi gambar di sini


0

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