Console.dir ve console.log arasındaki fark nedir?

Chrome'da consolenesne aynı şeyi yapıyor gibi görünen iki yöntemi tanımlar:

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

Çevrimiçi dirbir yerde , günlüğe kaydetmeden önce nesnenin bir kopyasını alan bir yerde okurken log, referansı konsola iletir, yani oturum açtığınız nesneyi incelediğiniz zaman değişmiş olabilir. Bununla birlikte, bazı ön testler, fark olmadığını ve her ikisinin de farklı durumlardaki nesneleri günlüğe kaydedildiklerinden daha fazla gösterdiklerini göstermektedir.

Ne demek istediğimi görmek için Chrome konsolunda ( Ctrl+ Shift+ J) deneyin :

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

Şimdi, [Object]günlük ifadesinin altına genişletin ve foo2 değeriyle gösterildiğine dikkat edin . Deneyi dirbunun yerine kullanarak tekrarlarsanız da aynı durum geçerlidir log.

Benim sorum şu, görünüşte aynı iki fonksiyon neden var console?

Firefox'ta bu işlevler oldukça farklı davranır: logyalnızca bir toStringgösterim diryazdırırken, gezilebilir bir ağaç yazdırır.

Chrome'da, logzaten bir ağaç yazdırır - çoğu zaman . Bununla birlikte, Chrome'un logözellikleri olsa bile, belirli nesne sınıflarını hala dizgi yapar. Belki de bir farkın en açık örneği düzenli bir ifadedir:

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

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

Normal nesnelerden farklı console.dir([1,2,3])şekilde logdizilen dizilerle (ör. ) Net bir fark görebilirsiniz :

> 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] }
        ...

DOM nesneleri , başka bir yanıtta belirtildiği gibi farklı davranışlar da gösterir .

Chrome'da bir başka yararlı fark, konsola DOM öğeleri gönderilirken var.

Farkına varmak:

• console.log öğeyi HTML benzeri bir ağaçta yazdırır
• console.dir öğeyi JSON benzeri bir ağaçta yazdırır

Özellikle, console.logDOM elemanlarına özel tedavi verirken,console.dir , bunu yapmaz. Bu genellikle DOM JS nesnesinin tam temsilini görmeye çalışırken yararlıdır.

Chrome Konsolu API'sı referansında bu ve diğer işlevler hakkında daha fazla bilgi var .

Bence Firebug bunu Chrome'un geliştirici araçlarından farklı yapıyor. Firebug size nesnenin dizgi halindeki bir versiyonunu verirkenconsole.dir size genişletilebilir bir nesne verir. Her ikisi de size Chrome'daki genişletilebilir nesneyi veriyor ve bence bu karışıklık nereden gelebilir. Veya Chrome'daki bir hata.

Chrome'da her ikisi de aynı şeyi yapar. Testinizi genişleterek, Chrome'un nesneyi genişlettiğinizde geçerli değerini aldığını fark ettim.

> 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

Görmek istediğiniz şey buysa, bir nesnenin dizgi halindeki sürümünü almak için aşağıdakileri kullanabilirsiniz. Bu, nesnenin genişletildiği zaman değil, bu satırın çağrıldığı anda nesnenin ne olduğunu gösterir.

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

.ToString () sürümü yerine tıklayabileceğiniz göz atılabilen bir nesnenin çıktısını almak için console.dir () kullanın, örneğin:

console.dir(obj/this/anything)

Chrome konsolunda tam nesne nasıl gösterilir?

Firebug sitesinden http://getfirebug.com/logging/

Console.dir (object) çağrıldığında, DOM sekmesinin minyatür bir sürümü gibi bir nesnenin özelliklerinin etkileşimli bir listesi günlüğe kaydedilir.

Felix Klings tavsiyesini takiben krom tarayıcımda denedim.

console.dir([1,2]) aşağıdaki çıktıyı verir:

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

While console.log([1,2])aşağıdaki çıktıyı verir:

[1, 2]

Bu yüzden console.dir()dizilerde ve nesnelerde prototip vb. Gibi daha fazla bilgi almak için kullanılması gerektiğine inanıyorum .

Fark arasında console.log()ve console.dir():

Kısacası, fark:

• console.log(input): Tarayıcı güzel biçimlendirilmiş bir şekilde günlüğe kaydediyor
• console.dir(input): Tarayıcı yalnızca tüm özellikleriyle nesneyi günlüğe kaydeder

Misal:

Aşağıdaki kod:

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

Google geliştirici araçlarında aşağıdakileri günlüğe kaydeder:

7 önceki yanıtlardan hiçbiri belirtti console.dirdestekler ekstra argümanlar : depth, showHiddenve kullanım verilipcolors .

Özellikle ilgi çekici olan depth, (teoride), nesneleri console.logdestekleyen varsayılan 2 seviyeden daha fazlasına aktarmaya izin verir .

Bir Gelincik nesne ve ran varken çünkü pratikte "teoride" yazdı console.log(mongoose)ve console.dir(mongoose, { depth: null })çıkış aynıydı. Ne aslında derinlemesine recursed mongoosenesne edildi kullanarak util.inspect:

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