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

In Firefox verhalten sich diese Funktionen ganz anders: log druckt nur eine toString Vertretung, während dir druckt einen navigierbaren Baum aus.

In Chrom, log druckt bereits einen Baum aus -- die meiste Zeit . Allerdings ist Chrome's log immer noch bestimmte Klassen von Objekten, auch wenn sie Eigenschaften haben. Das vielleicht deutlichste Beispiel für einen Unterschied ist ein regulärer Ausdruck:

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

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

Ein deutlicher Unterschied ist auch bei Arrays zu erkennen (z. B., console.dir([1,2,3]) ), die sind log anders als normale Objekte:

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

Auch DOM-Objekte zeigen ein unterschiedliches Verhalten, wie in einer anderen Antwort vermerkt .

Answer 2

Ein weiterer nützlicher Unterschied in Chrome besteht beim Senden von DOM-Elementen an die Konsole.

Hinweis:

• console.log gibt das Element in einem HTML-ähnlichen Baum aus
• console.dir gibt das Element in einem JSON-ähnlichen Baum aus

Konkret, console.log eine besondere Behandlung von DOM-Elementen, während console.dir nicht. Dies ist oft nützlich, wenn Sie versuchen, die vollständige Darstellung des DOM JS-Objekts zu sehen.

Weitere Informationen finden Sie in der API-Referenz für die Chrome-Konsole über diese und andere Funktionen.

Answer 3

In keiner der 7 vorherigen Antworten wurde erwähnt, dass console.dir unterstützt zusätzliche Argumente : depth , showHidden und ob Sie colors .

Von besonderem Interesse ist depth die es (theoretisch) ermöglicht, Objekte in mehr als die standardmäßigen 2 Ebenen zu verzweigen, die console.log unterstützt.

Ich schrieb "theoretisch", denn in der Praxis, wenn ich ein Mongoose-Objekt hatte und console.log(mongoose) y console.dir(mongoose, { depth: null }) war das Ergebnis dasselbe. Was tatsächlich tief in die Materie eingedrungen ist mongoose Objekt war mit util.inspect :

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

Answer 4

Verwenden Sie console.dir(), um ein durchsuchbares Objekt auszugeben, durch das Sie klicken können, anstatt die .toString()-Version zu verwenden, etwa so:

console.dir(obj/this/anything)

Wie kann man das gesamte Objekt in der Chrome-Konsole anzeigen?

Answer 5

Ich glaube, Firebug macht das anders als die Entwicklungswerkzeuge von Chrome. Es sieht so aus, als ob Firebug Ihnen eine stringifizierte Version des Objekts gibt, während console.dir erhalten Sie ein erweiterbares Objekt. Beide geben Ihnen das erweiterbare Objekt in Chrome, und ich denke, das ist, wo die Verwirrung könnte kommen aus. Oder es ist einfach ein Fehler in Chrome.

In Chrome tun beide das Gleiche. Bei der Erweiterung Ihres Tests habe ich festgestellt, dass Chrome den aktuellen Wert des Objekts abruft, wenn Sie es erweitern.

> 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

Sie können das Folgende verwenden, um eine stringifizierte Version eines Objekts zu erhalten, wenn Sie das sehen möchten. Dies zeigt Ihnen, was das Objekt zum Zeitpunkt des Aufrufs dieser Zeile ist, nicht wenn Sie es erweitern.

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