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

In Chrome consoledefiniert das Objekt zwei Methoden, die dasselbe zu tun scheinen:

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

Ich habe irgendwo online gelesen, dass dirvor dem Protokollieren eine Kopie des Objekts erstellt wird, während lognur der Verweis an die Konsole übergeben wird. Dies bedeutet, dass sich das Objekt, das Sie protokolliert haben, möglicherweise geändert hat. Einige vorläufige Tests deuten jedoch darauf hin, dass es keinen Unterschied gibt und dass beide möglicherweise Objekte in anderen Zuständen anzeigen als zu dem Zeitpunkt, als sie protokolliert wurden.

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]Anweisung unter der Protokollanweisung und stellen Sie fest, dass sie foomit dem Wert 2 angezeigt wird. Dasselbe gilt, wenn Sie das Experiment mit diranstelle von wiederholen log.

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

In Firefox verhalten sich diese Funktionen ganz anders: logDruckt nur eine toStringDarstellung aus, während direin navigierbarer Baum ausgedruckt wird.

Druckt in Chrome logbereits einen Baum aus - meistens . In Chrome werden logjedoch bestimmte Objektklassen immer noch stringifiziert, 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
    ...

Sie können auch einen deutlichen Unterschied bei Arrays (z. B. console.dir([1,2,3])) feststellen, die sich logvon normalen Objekten unterscheiden:

> 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-Objekte zeigen auch ein unterschiedliches Verhalten, wie in einer anderen Antwort angegeben .

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

Beachten:

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

Insbesondere werden console.logDOM-Elemente speziell behandelt, während console.dirdies nicht der Fall ist. Dies ist häufig hilfreich, wenn Sie versuchen, die vollständige Darstellung des DOM JS-Objekts anzuzeigen.

Weitere Informationen zu dieser und anderen Funktionen finden Sie in der Chrome Console-API-Referenz .

Ich denke, Firebug macht es anders als die Entwicklertools von Chrome. Es sieht so aus, als ob Firebug Ihnen eine stringifizierte Version des Objekts und console.direin erweiterbares Objekt bietet. Beide geben Ihnen das erweiterbare Objekt in Chrome, und ich denke, das ist der Grund für die Verwirrung. Oder es ist nur ein Fehler in Chrome.

In Chrome machen beide dasselbe. Bei der Erweiterung Ihres Tests ist mir aufgefallen, dass Chrome beim Erweitern den aktuellen Wert des Objekts erhält.

> 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 Folgendes verwenden, um eine stringifizierte Version eines Objekts abzurufen, wenn Sie dies 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));

Verwenden Sie console.dir (), um ein durchsuchbares Objekt auszugeben, durch das Sie anstelle der .toString () -Version klicken können:

console.dir(obj/this/anything)

Wie zeige ich ein vollständiges Objekt in der Chrome-Konsole?

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

Durch Aufrufen von console.dir (Objekt) wird eine interaktive Liste der Eigenschaften eines Objekts protokolliert, z. B.> eine Miniaturversion der Registerkarte DOM.

Nach dem Rat von Felix Klings habe ich es in meinem Chrome-Browser ausprobiert.

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

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

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

[1, 2]

Daher console.dir()sollte es meiner Meinung nach verwendet werden, um mehr Informationen wie Prototypen usw. in Arrays und Objekten zu erhalten.

Unterschied zwischen console.log()und console.dir():

Hier ist der Unterschied auf den Punkt gebracht:

• console.log(input): Der Browser meldet sich gut formatiert an
• 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 Folgendes in Google Dev Tools:

Keine der 7 vor Antworten erwähnt , dass die console.dirTräger zusätzliche Argumente : depth, showHiddenund ob zu verwenden colors.

Von besonderem Interesse ist depth, dass (theoretisch) das Überqueren von Objekten in mehr als die standardmäßig unterstützten 2 Ebenen möglich ist console.log.

Ich schrieb "in der Theorie", weil in der Praxis, als ich ein Mungo-Objekt hatte und lief console.log(mongoose)und console.dir(mongoose, { depth: null })die Ausgabe dieselbe war. Was tatsächlich tief in das mongooseObjekt zurückfiel, war die Verwendung von util.inspect:

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