Chrome と Safari では、Firefox と比べてコンソールに異なるオブジェクト値が表示されるのはなぜですか?

Chrome、Firefox、Safari でのオブジェクトの表示値の違い

異なるブラウザーで JavaScript オブジェクトをデバッグすると、開発者はコンソールに表示される値の不一致に遭遇する可能性があります。この記事では、この問題について調査し、観察された動作について説明します。

問題

次の JavaScript コードについて考えてみましょう。

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

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

Firefox では、予期される出力は次のとおりです。観察された内容:

Object { bar=1111}
1111

Object { bar=2222}
2222

ただし、Chrome と Safari では出力が異なります:

Object { bar=2222}
1111

Object { bar=2222}
2222

説明

この違いは、Chrome の設計上の決定から生じます (そして、拡張子として、Safari の) ブラウザ コンソール。オブジェクトをログに記録するときに、Chrome はオブジェクト自体への参照を作成します。コンソールでオブジェクト タブをクリックして開くと、その後のオブジェクトへの変更に関係なく、ログに記録された値は一定のままです。これにより、表示される値とメモリ内のオブジェクトの実際の値の間に不一致が生じます。

解決策

この問題を解決し、Chrome と Safari で期待される出力を取得するには、開発者は任意の方法を使用できます。 JSON.stringify() などのオブジェクトをシリアル化します。

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

これにより、オブジェクトの JSON 表現が表示され、すべてのブラウザーで一貫した出力が保証されます。

以上がChrome と Safari では、Firefox と比べてコンソールに異なるオブジェクト値が表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。