Chrome、Firefox、SafariのコンソールでJavaScriptオブジェクトが異なる値を表示するのはなぜですか? [複製]

Why does javascript object show different values in console in Chrome, Firefox, Safari? [duplicate]


質問 written by Community @2017-05-23 12:24:38Z

: 13 : 1 : 7

可能な重複:
ChromeのJavaScriptコンソールは配列を評価するのが面倒ですか?

このJavaScriptを考えてください。

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

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

FirefoxのFirebugでは、これは私が期待していたことを示しています。

Object { bar=1111}
1111

Object { bar=2222}
2222

ただし、SafariとChromeのコンソールでは、次のように表示されます。

Object { bar=2222}
1111

Object { bar=2222}
2222

つまり、オブジェクトはprint-dumpされたときにコンソールに誤った属性を表示していますが、特定の属性が印刷された場合は正しい値を示しています。

これはブラウザの風変わりですか? それとも、オブジェクト指向のJavaScriptの基本的な側面が欠けていますか?

コメント 1

私が推測しなければならないのなら、デバッガは最初のオブジェクトについてはオブジェクトへの参照を格納し、2番目のオブジェクトについては値そのものを格納していると思います。コードが参照を更新するので、監視されているデバッガの値も更新されます。しかし、総計は推測できます。

written by マイク・クリステンセン @2011-11-23 21:15:21Z

コメント 2

SafariとChromeがJavaScriptを最適化し、foo.barへの代入と元のオブジェクト定義を組み合わせてから、2つのconsole.logステートメントのfoo.barの期待値をインライン化していると考えられます。

written by ジョン・ヘイガー2011年 @2011-11-23 21:15:36Z

コメント 3

マイクとジョンに感謝します。これは事実ではないようです。私の言うところでは、これは私がデバッグしようとしている間、SafariとChromeが自分のコードに嘘をついていると言っているということです。実行中のコードの2つのポイントでオブジェクトの内容をすぐに確認したいのであれば、SafariとChromeは私に本当の表現を与えていません。おそらく、私のデバッグルーチンは十分に洗練されていないので、コード内の手動のconsole.log行に頼るべきではないでしょうか。

written by オスカー・スミス @2011-11-23 21:23:04Z

コメント 4

IE9が何をするのか疑問に思う:)

written by マイク・クリステンセン @2011-11-23 21:23:59Z

コメント 5

これは前に出てきた、私はそれを見つけることを試みるつもりです。

written by ジェームズホームズ @2011-11-23 21:24:43Z

回答 1 written by davin @2011-11-23 21:48:48Z
23

Chrome(WebKit、つまりSafariでも)では、 console.logをオブジェクト引数で呼び出すと、オブジェクト参照が記録されます。 いったんオブジェクトタブをクリックして開くと、内部は一定のまま(おそらくキャッシュ)であり、最初に参照されたオブジェクトとは関係がなくなります(したがって、後の段階でオブジェクトが変更されても反映されません)。 しかしそれまでは、オブジェクトは「キャッシュされていない」ままです。 そのため、オブジェクトを複数回ログに記録してから、ログに記録された各オブジェクトを開くと、それらはすべてメモリー内の同じオブジェクトを指し、その値は最新の更新済みオブジェクトになります。

これはよく知られた「問題」ですが、動作は設計上の決定によるものであり(最初のリンクのコメントを参照)、開発チームによるバグとは見なされません。

簡単な回避策は、オブジェクトの非オブジェクト値を取得するための手段です。したがって、シリアル化メソッド( console.log(JSON.stringify(foo)); )を使用します。

https://bugs.webkit.org/show_bug.cgi?id=35801
http://code.google.com/p/chromium/issues/detail?id=44720
http://code.google.com/p/chromium/issues/detail?id=50316

コメント 1

ウェブキットのバグ: bugs.webkit.org/show_bug.cgi?id3580121分32秒

written by James Holmes @2011-11-23 21:32:39Z

コメント 2

ありがとう。それがFirebugを使わないのにふさわしいと思います!

written by オスカー・スミス @2011-11-23 21:34:29Z

コメント 3

ええ、私はそれがちょっとラメであることに同意しなければなりません..それはトレースのためにconsole.log全く役に立たなくします。しかし、私はあなたがそのもののために伝統的なデバッガを使うことができると思います。

written by マイク・クリステンセン @2011-11-23 21:37:15Z

コメント 4

console.log(JSON.stringify(foo));デバッグには問題ないはずです。

written by ダヴィン2011年 @2011-11-23 21:38:19Z

コメント 5

これを取り戻します。呼び出しは遅延せず、ログメカニズムは参照ベースですが、呼び出しは完全に同期しているように見えます。

written by ダヴィン @2011-11-23 21:42:53Z