Chromeデバッガーが閉じたローカル変数が未定義であると考えるのはなぜですか？

このコードで：

function baz() {
  var x = "foo";

  function bar() {
    debugger;
  };
  bar();
}
baz();

私はこの予期しない結果を得ます：

コードを変更すると：

function baz() {
  var x = "foo";

  function bar() {
    x;
    debugger;
  };
  bar();
}

私は期待される結果を得ます：

また、eval内部関数内で呼び出しがある場合は、必要に応じて変数にアクセスできます（何に渡すかは関係ありませんeval）。

一方、Firefox開発ツールは、両方の状況で予想される動作を提供します。

デバッガーがFirefoxよりも便利に動作しないのは、Chromeでどうなっていますか。私はこの動作をしばらくの間、バージョン41.0.2272.43ベータ（64ビット）まで観察しました。

ChromeのJavaScriptエンジンは、可能な場合に関数を「フラット化」するのでしょうか。

私は第二の可変追加すると面白いされ、内側の関数で参照し、x変数はまだ定義されていません。

対話型デバッガーを使用する場合、スコープと変数の定義に癖があることがよくありますが、言語仕様に基づいて、これらの癖に対する「最善の」解決策があるはずだと私は思います。だから私はこれがFirefoxよりもさらに最適化されているChromeによるものかどうか非常に興味があります。また、これらの最適化は開発中に簡単に無効にできるかどうか（開発ツールが開いているときに無効にする必要があるかもしれませんか？）

また、ブレークポイントとdebuggerステートメントでこれを再現できます。

私は正確にあなたが求めていることについてのv8の問題レポートを見つけました。

さて、その問題レポートで述べられていることを要約すると... v8は、スタック上の関数またはヒープ上に存在する「コンテキスト」オブジェクト内の関数にローカルな変数を格納できます。関数がローカル変数を参照する内部関数を含まない限り、ローカル変数をスタックに割り当てます。最適化です。場合は任意の内部関数はローカル変数を参照し、この変数は、コンテキストオブジェクト（つまり、ヒープ上の代わりに、スタック上）に入れられます。の場合evalは特別です。内部関数によって呼び出されると、すべてのローカル変数がコンテキストオブジェクトに配置されます。

コンテキストオブジェクトの理由は、一般に、外部関数から内部関数を返すことができ、外部関数の実行中に存在していたスタックが使用できなくなるためです。したがって、内部関数がアクセスするものはすべて、外部関数を存続させ、スタックではなくヒープ上に存在する必要があります。

デバッガーは、スタックにある変数を検査できません。デバッグで発生した問題に関して、あるプロジェクトメンバーは次のように述べています。

私が考えることができる唯一の解決策は、devtoolsがオンのときは常に、すべてのコードを選択解除し、強制コンテキスト割り当てで再コンパイルすることです。ただし、devtoolsを有効にするとパフォーマンスが劇的に低下します。

「内部関数が変数を参照する場合は、コンテキストオブジェクトに配置する」の例を次に示します。これを実行すると、関数でのみ使用されますが、呼び出されることはありませんがx、debuggerステートメントでアクセスできます。xfoo

function baz() {
  var x = "x value";
  var z = "z value";

  function foo () {
    console.log(x);
  }

  function bar() {
    debugger;
  };

  bar();
}
baz();

@Louisのように、それはv8の最適化によって引き起こされたと言いました。この変数が表示されているフレームにコールスタックをトラバースできます。

OR REPLACE debuggerを

eval('debugger');

eval 現在のチャンクを採用しない

nodejsでもこれに気づきました。私は、コードがコンパイルされたときに、x内barに表示されない場合x、のスコープ内で使用可能にならないと信じています（これは単なる推測です）bar。これはおそらくそれをわずかにより効率的にします。問題は誰かが忘れていた（または気にしていない）xでbar、in がない場合でもデバッガーを実行することにしたためx、内部からアクセスする必要があることですbar。

うわー、本当に面白い！

他の人が述べたように、これはに関連しているようです scopeが、より具体的にはに関連していdebugger scopeます。注入されたスクリプトが開発者ツールで評価されるとき、それはを決定しているように見えScopeChainます。あなたが投稿したもののバリエーションはこれです：

（編集-実際、あなたはあなたの元の質問でこれを言及しています、うーん、私の悪い！）

function foo() {
  var x = "bat";
  var y = "man";

  function bar() {
    console.log(x); // logs "bat"

    debugger; // Attempting to access "y" throws the following
              // Uncaught ReferenceError: y is not defined
              // However, x is available in the scopeChain. Weird!
  }
  bar();
}
foo();

野心的および/または好奇心が強い場合は、ソースを調べて、何が起こっているのかを確認してください：

https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/inspector https://github.com/WebKit/webkit/tree/master/Source/JavaScriptCore/debugger

これは変数と関数の巻き上げに関係していると思います。JavaScriptは、すべての変数と関数の宣言を、それらが定義されている関数の先頭に移動します。詳細については、http：//jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/をご覧ください。

関数には他に何もないので、Chromeはスコープで使用できない変数でブレークポイントを呼び出しているに違いありません。これはうまくいくようです：

function baz() {
  var x = "foo";

  function bar() {
    console.log(x); 
    debugger;
  };
  bar();
}

これもそうです：

function baz() {
  var x = "foo";

  function bar() {
    debugger;
    console.log(x);     
  };
  bar();
}

これ、および/または上記のリンクが役立つことを願っています。これらは私のお気に入りのSO質問です、ところで:)