Pourquoi des anomalies d'affichage des objets de la console Chrome et Safari se produisent-elles par rapport à Firefox ?

Anomalies d'affichage des objets dans les consoles du navigateur

En programmation, le débogage consiste à inspecter les propriétés et les valeurs des objets dans la console. Cependant, les utilisateurs peuvent rencontrer des incohérences inattendues lors de l'affichage des objets dans les consoles des navigateurs Chrome, Firefox et Safari.

Chrome et Safari contre Firefox : l'écart de valeur des objets

Considérez le code JavaScript fourni dans la question :

<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>

Alors que Firebug de Firefox affiche les valeurs attendues comme :

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

Les consoles Chrome et Safari présentent un comportement particulier :

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

Expliquer l'écart

Le comportement de la console Chrome et Safari découle d'une décision de conception. Lorsqu'un objet est initialement transmis à console.log, il est traité comme une référence. Toute journalisation ultérieure du même objet affichera sa valeur actuelle, et non la valeur au moment de la journalisation initiale.

Une fois l'onglet de l'objet développé dans la console, ses valeurs sont figées et découplées de l'objet d'origine. . Par conséquent, la modification ultérieure de la valeur de l'objet n'affectera pas son affichage dans l'onglet développé.

Solutions de contournement

Pour éviter cet écart, les développeurs peuvent utiliser des méthodes qui sérialisent le objet en une valeur non-objet, telle que la stringification JSON :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!