Warum kommt es im Vergleich zu Firefox zu Anomalien bei der Anzeige von Chrome- und Safari-Konsolenobjekten?

Objektanzeigeanomalien in Browserkonsolen

Beim Programmieren umfasst das Debuggen die Überprüfung der Eigenschaften und Werte von Objekten in der Konsole. Allerdings können Benutzer bei der Anzeige von Objekten in den Browserkonsolen von Chrome, Firefox und Safari auf unerwartete Inkonsistenzen stoßen.

Chrome und Safari vs. Firefox: Die Objektwertdiskrepanz

Bedenken Sie den in der Frage bereitgestellten JavaScript-Code:

<code class="javascript">var foo = { bar: 1111 };
console.log(foo);
console.log(foo.bar);
foo.bar = 2222;
console.log(foo);
console.log(foo.bar);</code>

Während Firefox Firebug die erwarteten Werte wie folgt anzeigt:

Object { bar=1111}
1111
Object { bar=2222}
2222

Die Konsolen von Chrome und Safari zeigen ein eigenartiges Verhalten:

Object { bar=2222}
1111
Object { bar=2222}
2222

Erklärung der Diskrepanz

Das Konsolenverhalten von Chrome und Safari ist auf eine Designentscheidung zurückzuführen. Wenn ein Objekt zum ersten Mal an console.log übergeben wird, wird es als Referenz behandelt. Bei jeder nachfolgenden Protokollierung desselben Objekts wird dessen aktueller Wert angezeigt, nicht der Wert zum Zeitpunkt der ersten Protokollierung.

Sobald die Registerkarte des Objekts in der Konsole erweitert wird, werden seine Werte eingefroren und vom ursprünglichen Objekt entkoppelt . Daher wirkt sich eine nachträgliche Änderung des Objektwerts nicht auf dessen Anzeige auf der erweiterten Registerkarte aus.

Problemumgehungen

Um diese Diskrepanz zu vermeiden, können Entwickler Methoden verwenden, die das Objekt serialisieren Objekt in einen Nicht-Objekt-Wert, wie z. B. JSON-Stringifizierung:

<code class="javascript">console.log(JSON.stringify(foo));</code>

Das obige ist der detaillierte Inhalt vonWarum kommt es im Vergleich zu Firefox zu Anomalien bei der Anzeige von Chrome- und Safari-Konsolenobjekten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!