Pourquoi Chrome et Safari affichent-ils des valeurs d'objet différentes dans la console par rapport à Firefox ?

Différentes valeurs d'affichage des objets dans Chrome, Firefox et Safari

Lors du débogage des objets JavaScript dans différents navigateurs, les développeurs peuvent rencontrer des écarts dans les valeurs affichées dans la console. Cet article explore ce problème, fournissant une explication du comportement observé.

Le problème

Considérez le code JavaScript suivant :

var foo = {bar: 1111};
console.log(foo);
console.log(foo.bar);

foo.bar = 2222;
console.log(foo);
console.log(foo.bar);

Dans Firefox, le résultat attendu est observé :

Object { bar=1111}
1111

Object { bar=2222}
2222

Cependant, dans Chrome et Safari, le résultat diffère :

Object { bar=2222}
1111

Object { bar=2222}
2222

Explication

Cette différence découle d'une décision de conception dans Chrome (et, par extension, la console du navigateur Safari). Lors de la journalisation d'un objet, Chrome crée une référence à l'objet lui-même. En cliquant et en ouvrant l'onglet objet dans la console, la valeur enregistrée reste constante, quelles que soient les modifications ultérieures apportées à l'objet. Cela crée un écart entre la valeur affichée et la valeur réelle de l'objet en mémoire.

Résolution

Pour résoudre ce problème et obtenir le résultat attendu dans Chrome et Safari, les développeurs peuvent utiliser n'importe quelle méthode pour sérialiser l'objet, tel que JSON.stringify() :

console.log(JSON.stringify(foo));

Cela affichera la représentation JSON de l'objet, garantissant une sortie cohérente dans tous les navigateurs.

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!