Was ist der Unterschied zwischen console.dir und console.log?

Question

In Chrome wird die console Objekt definiert zwei Methoden, die scheinbar dasselbe bewirken:

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

Ich habe irgendwo im Internet gelesen, dass dir nimmt eine Kopie des Objekts, bevor es protokolliert wird, während log gibt nur den Verweis an die Konsole weiter, was bedeutet, dass sich das protokollierte Objekt zu dem Zeitpunkt, zu dem Sie es untersuchen, bereits geändert haben kann. Einige vorläufige Tests deuten jedoch darauf hin, dass es keinen Unterschied gibt und dass beide darunter leiden, dass sie möglicherweise Objekte in anderen Zuständen anzeigen als zum Zeitpunkt der Protokollierung.

Versuchen Sie dies in der Chrome-Konsole ( Ctrl + Shift + J ), um zu sehen, was ich meine:

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

Erweitern Sie nun die [Object] unter der Protokollanweisung und stellen Sie fest, dass dort steht foo mit einem Wert von 2. Das Gleiche gilt, wenn Sie das Experiment mit dir anstelle von log .

Meine Frage ist, warum es diese beiden scheinbar identischen Funktionen auf console ?

Answer 1

Von der Firebug-Website http://getfirebug.com/logging/

Der Aufruf von console.dir(object) protokolliert eine interaktive Auflistung der Eigenschaften eines Objekts, wie > eine Miniaturversion der DOM-Registerkarte.

Answer 2

Der Unterschied zwischen console.log() y console.dir() :

Hier ist der Unterschied auf den Punkt gebracht:

• console.log(input) : Der Browser protokolliert in einer schön formatierten Weise
• console.dir(input) : Der Browser protokolliert nur das Objekt mit all seinen Eigenschaften

Beispiel:

Der folgende Code:

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

Protokolliert das Folgende in den Google Dev Tools:

Answer 3

Nun, die Konsole Standard (ab der Übergabe ef88ec7a39fdfe79481d7d8f2159e4a323e89648 ) fordert derzeit console.dir zu beantragen allgemeine JavaScript-Objektformatierung bevor Sie es an Drucker (eine Operation auf Spezifikationsebene), aber für ein Ein-Argument console.log aufrufen, übergibt die Spezifikation das JavaScript-Objekt direkt an Drucker .

Da die Spezifikation eigentlich fast alles über die Drucker der Implementierung überlassen, welche Art der Formatierung für console.log() verwendet werden soll.

Answer 4

Felix Klings Rat folgend habe ich es in meinem Chrome-Browser ausprobiert.

console.dir([1,2]) ergibt die folgende Ausgabe:

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

Während console.log([1,2]) ergibt die folgende Ausgabe:

[1, 2]

Ich glaube also console.dir() sollte verwendet werden, um weitere Informationen wie Prototyp usw. in Arrays und Objekten zu erhalten.