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

357

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?

Drew Noakes
quelle
65
Versuchen Sie console.log([1,2])und console.dir([1,2])und Sie werden den Unterschied sehen.
Felix Kling
In Firebug console.dirändert sich der Inhalt eines Objekts, mit dem protokolliert wird, nicht, sodass es einen großen Unterschied macht.
Eugene Yarmash
3
Seien Sie vorsichtig mit console.dir(): Diese Funktion ist nicht Standard ! Also nicht für die Produktion verwenden;)
fred727
2
Die URL dieser Frage wird im Bild im Mozilla Developer Network angezeigt - Console.log () - Unterschied zu console.dir () .
user7393973
1
@ user7393973 schöner Fund! Eigentlich ist das Bild von meiner Antwort unten, also wurde es tatsächlich auf meinem Laptop aufgenommen. Es ist schön, MDN etwas zurückzugeben. Was für eine großartige Ressource.
Drew Noakes

Antworten:

352

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 .

Apsiller
quelle
11
Vergessen Sie nicht, dass console.dir einen Verweis auf das Objekt enthält. Sie möchten es wahrscheinlich nicht ausgiebig in der Produktion verwenden. Es funktioniert wahrscheinlich nur, wenn die Konsole angezeigt wird.
Jean-Philippe Leclerc
In Chromium 45 unter Ubuntu console.logscheint es sich um die vereinfachte "Firefox" -Version zu handeln, die toStringeher wie ein Baum als wie ein Baum aussieht . Ich bin mir noch nicht sicher, wann sie es geändert haben, aber sie haben es getan.
Eiswasser
3
@icedwater: Hängt davon ab, ob Sie die Konsole beim Aufrufen console.loggeöffnet haben oder später öffnen. Ja wirklich. :-)
TJ Crowder
Sie können auch einen deutlichen Unterschied zur Funktion feststellen. In Chrom, wird es Funktions Quellcode mit Druck console.log, aber mit console.dir, können Sie die sehen prototype, argumentsEigenschaften.
Tina Chen
1
Nun scheint es so console.logund console.dirtatsächlich die gleiche Darstellung [1,2,3]in Firefox zurückzugeben.
Xji
151

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 .

Drew Noakes
quelle
Ich glaube, diese Informationen stammen von developer.mozilla.org/en-US/docs/Web/API/Console/log
loneshark99
11
@ loneshark99 eigentlich ist es umgekehrt. Beachten Sie die URL in ihrem Screenshot? Sie haben meine Antwort kopiert. Aber das ist in Ordnung, denn das erlaubt die Lizenz für SO-Antworten und ich liebe MDN trotzdem.
Drew Noakes
Verstanden, das habe ich anfangs gedacht, aber dann gedacht, warum sie von hier kopieren würden. Macht Sinn . Gute Informationen
Loneshark99
4

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));
Sachleen
quelle
2

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.

Trocknet Marien
quelle
0

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.

Bimal
quelle
0

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:

Geben Sie hier die Bildbeschreibung ein

Willem van der Veen
quelle
0

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}));
Dan Dascalescu
quelle