23

簡単に言うと、私がやっていることは、コンソールでこれを実行することです:

window.onbeforeunload = function (e) {
    console.log(e);
}

しかし、コンソールでは、イベントが発生すると (SO の質問を書いている途中で「ページを離れようとして」)、次のように表示されます。

Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}

その横に小さな「i」のグラフィックが付いています。その横にある矢印をクリックしてコンソールでオブジェクトを展開しても、何も起こりません。矢印は展開したことを示しますが、展開しません。

ここで何が欠けていますか??

4

4 に答える 4

24

これは、ページの変更後もコンソールを保持しているにもかかわらず、オブジェクトが存在しなくなったために発生しています。ページを離れたときにオブジェクトが破棄されました。これは、もはや検査できないことを意味するため、下向きの三角形をクリックしても役に立ちません。

ページが実際に変更されるのを防ぐために、代わりにこれを試してください。

window.onbeforeunload = function (e) {
    console.log(e);
    return true;
}

これで、何をすべきかを尋ねるページが表示されます。ページにとどまるには、表示されるプロンプトで [キャンセル] をクリックします。Eventこれで、必要に応じてコンソールでを調べることができます。

違いは、関数が/onbeforeunloadではない値を返すようになったことです。戻り値は、orなど、 and以外の何でもかまいませんが、移動する前にページにプロンプ​​トが表示され、イベントを調べる機会が与えられます。ステートメントがない場合、JavaScript 関数はデフォルトで戻ります。nullundefined''falsenullundefinedreturnundefined

Chrome Dev Tools で何かを検査できない場合、その原因の 90% は、なんらかのアクションが原因でそのオブジェクトが使用できなくなったことが原因です。ページは、そのオブジェクトが存在していた時点から移動しています。

于 2013-09-13T00:50:29.833 に答える
5

後で変更する可能性のあるオブジェクトまたは配列を検査するときは、良い方法です。

debugger

...デバッグしたいコード内のポイントの後。これにより、この時点でコードの実行が一時停止されます。これは、その後の変更ではなく、この時点での状態を確実に確認できることを意味します。

展開に失敗したということは、オブジェクトがその後メモリから削除されたことを意味している可能性があります。削除またはガベージ コレクションが行われたか、(特に Node.js スクリプトで Chrome 開発ツールを使用している場合) スクリプトが完了した可能性があるため、すべてrefs はどこにもポイントしません。

実際、間違いなくより良い方法は、代わりにを使用debuggerconsole.logし、ローカル変数で調べたいものを見つけることです。

window.onbeforeunload = function (e) {
  debugger; // Now go find `e` in the local variables section
}

このようにして、より多くのコンテキストにアクセスでき、コードの後半で発生する出力の変更について心配する必要がなくなります。

JavaScript では、オブジェクトを指す変数を扱うときはいつでも、そのオブジェクトの最新の状態へのライブ参照を扱っていることを常に覚えておいてください。

console.logオブジェクトのコンテンツではなく、参照をログに記録します。ログに記録された参照を表示して展開すると、ログに記録した時点ではなく、参照した時点でその参照が何を指しているのかが表示されます。メモリから削除されているか、再割り当てされている場合、これは何もない可能性があります。

文字列と数値を指す変数は、参照ではなく値を指すため、別のオプションとして、オブジェクトの文字列化されたバージョンをログに記録することconsole.log(JSON.stringify(someObject))もできます (ただし、その出力は読みにくい場合があります)。通常は、このdebuggerアプローチの方が優れています。

于 2019-09-16T10:57:54.360 に答える