Google Chrome の console.log() が配列とオブジェクトで一貫性のない動作を示す

問題を理解する

Google Chrome でコードをデバッグしているときに、 console.log() は、入れ子になった配列を処理するときに奇妙な動作をすることがわかりました。配列がログに記録された場合、ログ後にその内部値を変更すると、ログ出力にはログ記録時の値ではなく更新された値が反映されます。この動作は Firefox には存在しませんでした。

さらに調査した結果、読み込み中に Chrome コンソールが開いているときに不一致が発生することが判明しました。最初にコンソールを閉じ、ページが読み込まれた後に開いた場合、console.log() はログ記録時の配列の実際の値を表示しました。

異常の追跡

徹底的な調査の結果、この動作は Webkit のバグであることが判明しました。ただし、修正は 2012 年 8 月に実装され、Google Chrome ではまだリリースされていません。

Chromium 開発者の視点

Chromium 開発者はこのバグについてコメントし、コンソール時にオブジェクトのクローンを作成すると、問題が発生する可能性があると述べています。実現可能ではありません。さらに、正確な値を維持するためにオブジェクトのプロパティの変更を監視することは現実的ではありません。

説明

console.log() の現在の実装では、コンソールにオブジェクトを表示するときにオブジェクトのクローン作成が回避されます。代わりに、ログ記録中に短縮プレビューが生成され、オブジェクトのプロパティのスナップショットが提供されます。これは、コンソールがすでに開いている場合にのみ発生します。これは、コンソールの初期状態に応じて動作が異なることを説明しています。

結論

Google Chrome の console.log() でのこの一貫性のない動作は次のとおりです。これは、コンソール内でのオブジェクト処理の実装によるものです。プレビューにはログ記録時のオブジェクトの値が反映されているため、予期した動作が維持されるはずです。開発者はこの動作を認識し、可能な場合は別のデバッグ方法を使用する必要があります。