In Chrome console
definiert das Objekt zwei Methoden, die dasselbe zu tun scheinen:
console.log(...)
console.dir(...)
Ich habe irgendwo online gelesen, dass dir
vor dem Protokollieren eine Kopie des Objekts erstellt wird, während log
nur 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 foo
mit dem Wert 2 angezeigt wird. Dasselbe gilt, wenn Sie das Experiment mit dir
anstelle von wiederholen log
.
Meine Frage ist, warum existieren diese beiden scheinbar identischen Funktionen console
?
quelle
console.log([1,2])
undconsole.dir([1,2])
und Sie werden den Unterschied sehen.console.dir
ändert sich der Inhalt eines Objekts, mit dem protokolliert wird, nicht, sodass es einen großen Unterschied macht.console.dir()
: Diese Funktion ist nicht Standard ! Also nicht für die Produktion verwenden;)Antworten:
In Firefox verhalten sich diese Funktionen ganz anders:
log
Druckt nur einetoString
Darstellung aus, währenddir
ein navigierbarer Baum ausgedruckt wird.Druckt in Chrome
log
bereits einen Baum aus - meistens . In Chrome werdenlog
jedoch bestimmte Objektklassen immer noch stringifiziert, auch wenn sie Eigenschaften haben. Das vielleicht deutlichste Beispiel für einen Unterschied ist ein regulärer Ausdruck:Sie können auch einen deutlichen Unterschied bei Arrays (z. B.
console.dir([1,2,3])
) feststellen, die sichlog
von normalen Objekten unterscheiden:DOM-Objekte zeigen auch ein unterschiedliches Verhalten, wie in einer anderen Antwort angegeben .
quelle
console.log
scheint es sich um die vereinfachte "Firefox" -Version zu handeln, dietoString
eher 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.console.log
geöffnet haben oder später öffnen. Ja wirklich. :-)console.log
, aber mitconsole.dir
, können Sie die sehenprototype
,arguments
Eigenschaften.console.log
undconsole.dir
tatsächlich die gleiche Darstellung[1,2,3]
in Firefox zurückzugeben.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 Baumconsole.dir
druckt das Element in einem JSON-ähnlichen BaumInsbesondere werden
console.log
DOM-Elemente speziell behandelt, währendconsole.dir
dies 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 .
quelle
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.dir
ein 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.
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.
quelle
Verwenden Sie console.dir (), um ein durchsuchbares Objekt auszugeben, durch das Sie anstelle der .toString () -Version klicken können:
Wie zeige ich ein vollständiges Objekt in der Chrome-Konsole?
quelle
Von der Firebug-Site http://getfirebug.com/logging/
quelle
Nach dem Rat von Felix Klings habe ich es in meinem Chrome-Browser ausprobiert.
console.dir([1,2])
gibt folgende Ausgabe:Während
console.log([1,2])
gibt die folgende Ausgabe:Daher
console.dir()
sollte es meiner Meinung nach verwendet werden, um mehr Informationen wie Prototypen usw. in Arrays und Objekten zu erhalten.quelle
Unterschied zwischen
console.log()
undconsole.dir()
:Hier ist der Unterschied auf den Punkt gebracht:
console.log(input)
: Der Browser meldet sich gut formatiert anconsole.dir(input)
: Der Browser protokolliert nur das Objekt mit all seinen EigenschaftenBeispiel:
Der folgende Code:
Protokolliert Folgendes in Google Dev Tools:
quelle
Keine der 7 vor Antworten erwähnt , dass die
console.dir
Träger zusätzliche Argumente :depth
,showHidden
und ob zu verwendencolors
.Von besonderem Interesse ist
depth
, dass (theoretisch) das Überqueren von Objekten in mehr als die standardmäßig unterstützten 2 Ebenen möglich istconsole.log
.Ich schrieb "in der Theorie", weil in der Praxis, als ich ein Mungo-Objekt hatte und lief
console.log(mongoose)
undconsole.dir(mongoose, { depth: null })
die Ausgabe dieselbe war. Was tatsächlich tief in dasmongoose
Objekt zurückfiel, war die Verwendung vonutil.inspect
:quelle