ブラウザ コンソールで JavaScript オブジェクトの現在の状態を正確に表示するにはどうすればよいですか?

Console.log を使用してオブジェクトの現在の状態を取得する

Safari などのブラウザでは、console.log はオブジェクトの最後の状態を示します。呼び出し時の状態。これは、オブジェクトの変更をデバッグまたは分析するときに不便な場合があります。

オブジェクトのクローン作成の回避

従来の方法では、console.log を使用して特定の時点の状態を取得する前にオブジェクトのクローンを作成する必要があります。ポイント。ただし、このアプローチは非効率であるため、回避できます。

console.dir() の紹介

クローン作成の代わりに、console.dir() の使用を検討してください。 console.log() とは異なり、console.dir() は呼び出し時にオブジェクトのプロパティのディレクトリを表示します。これにより、オブジェクトの現在の状態が正確に表現されます。

例:

const test = { a: true };
console.dir(test); // { a: true }
test.a = false;
console.dir(test); // { a: false }

オブジェクト探索のための JSON 解析

もう 1 つの手法は、オブジェクトを JSON に変換し、それを解析してオブジェクトに戻すことです。これにより、元のオブジェクトと同じプロパティを持つ新しいオブジェクトが作成され、コンソール内での探索が可能になります。

console.log(JSON.parse(JSON.stringify(obj))); // Browsable object representation

console.dir() または JSON 解析を利用することで、開発者はオブジェクトの現在の状態を効果的に取得できます。オブジェクトのクローン作成や外部ツールを必要とせずに、コンソールで実行できます。

以上がブラウザ コンソールで JavaScript オブジェクトの現在の状態を正確に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。