Warum hält der Chrome-Debugger die geschlossene lokale Variable für undefiniert?

Mit diesem Code:

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

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

Ich bekomme dieses unerwartete Ergebnis:

Wenn ich den Code ändere:

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

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

Ich bekomme das erwartete Ergebnis:

Wenn evalinnerhalb der inneren Funktion ein Aufruf erfolgt , kann ich auf meine Variable zugreifen, wie ich möchte (unabhängig davon, an was ich übergebe eval).

In der Zwischenzeit geben die Firefox-Entwicklungstools unter beiden Umständen das erwartete Verhalten wieder.

Was ist mit Chrome los, dass sich der Debugger weniger bequem verhält als Firefox? Ich habe dieses Verhalten seit einiger Zeit bis einschließlich Version 41.0.2272.43 Beta (64-Bit) beobachtet.

Ist es so, dass die Javascript-Engine von Chrome die Funktionen "abflacht", wenn dies möglich ist?

Interessanterweise ist die xVariable immer noch undefiniert, wenn ich eine zweite Variable hinzufüge, auf die in der inneren Funktion verwiesen wird.

Ich verstehe, dass es bei der Verwendung eines interaktiven Debuggers häufig Macken mit Umfang und Variablendefinition gibt, aber es scheint mir, dass es basierend auf der Sprachspezifikation eine "beste" Lösung für diese Macken geben sollte. Ich bin also sehr gespannt, ob dies daran liegt, dass Chrome weiter optimiert als Firefox. Und auch, ob diese Optimierungen während der Entwicklung leicht deaktiviert werden können oder nicht (sollten sie möglicherweise deaktiviert werden, wenn Entwickler-Tools geöffnet sind?).

Ich kann dies auch mit Haltepunkten sowie der debuggerAnweisung reproduzieren .

Ich habe einen v8-Problembericht gefunden , der genau das beschreibt, was Sie fragen.

Um zusammenzufassen, was in diesem Problembericht gesagt wird ... v8 kann die Variablen, die für eine Funktion lokal sind, auf dem Stapel oder in einem "Kontext" -Objekt speichern, das sich auf dem Heap befindet. Es werden lokale Variablen auf dem Stapel zugewiesen, solange die Funktion keine innere Funktion enthält, die auf sie verweist. Es ist eine Optimierung . Wenn sich eine innere Funktion auf eine lokale Variable bezieht, wird diese Variable in ein Kontextobjekt eingefügt (dh auf den Heap anstatt auf den Stapel). Der Fall von evalist etwas Besonderes: Wenn er überhaupt von einer inneren Funktion aufgerufen wird, werden alle lokalen Variablen in das Kontextobjekt eingefügt.

Der Grund für das Kontextobjekt ist, dass Sie im Allgemeinen eine innere Funktion von der äußeren zurückgeben können und dann der Stapel, der während der Ausführung der äußeren Funktion vorhanden war, nicht mehr verfügbar ist. Alles, worauf die innere Funktion zugreift, muss die äußere Funktion überleben und auf dem Haufen und nicht auf dem Stapel leben.

Der Debugger kann die auf dem Stapel befindlichen Variablen nicht überprüfen. In Bezug auf das Problem beim Debuggen sagt ein Projektmitglied :

Die einzige Lösung, die ich mir vorstellen kann, ist, dass wir bei aktivierten devtools den gesamten Code deoptieren und mit erzwungener Kontextzuweisung neu kompilieren. Dies würde die Leistung bei aktivierten devtools jedoch dramatisch beeinträchtigen.

Hier ist ein Beispiel für "Wenn sich eine innere Funktion auf die Variable bezieht, fügen Sie sie in ein Kontextobjekt ein". Wenn Sie dies ausführen, können Sie xauf die debuggerAnweisung zugreifen , obwohl sie xnur in der fooFunktion verwendet wird, die niemals aufgerufen wird !

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

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

  function bar() {
    debugger;
  };

  bar();
}
baz();

Wie @Louis sagte, wurde es durch v8-Optimierungen verursacht. Sie können den Aufrufstapel zu einem Frame durchlaufen, in dem diese Variable sichtbar ist:

Oder ersetzen debuggerdurch

eval('debugger');

eval wird den aktuellen Block deaktivieren

Ich habe dies auch in nodejs bemerkt. Ich glaube (und ich gebe zu, dass dies nur eine Vermutung ist), dass der Code, wenn er kompiliert wird, wenn er xnicht im Inneren erscheint bar, nicht xim Rahmen von verfügbar gemacht wird bar. Dies macht es wahrscheinlich etwas effizienter; das Problem ist , jemand vergessen (oder Pflege nicht) , dass selbst wenn es keine ist xin bar, der Debugger laufen und damit noch brauchen , um Zugang können entscheiden , ob xvon innen bar.

Wow, wirklich interessant!

Wie andere erwähnt haben, scheint dies damit zu tun zu haben scope, aber insbesondere damit debugger scope. Wenn injiziertes Skript in den Entwicklertools ausgewertet wird, scheint es a zu bestimmenScopeChain , was zu einer gewissen Eigenart führt (da es an den Inspector / Debugger-Bereich gebunden ist). Eine Variation von dem, was Sie gepostet haben, ist folgende:

(BEARBEITEN - eigentlich erwähnen Sie dies in Ihrer ursprünglichen Frage, yikes, mein schlechtes! )

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();

Für die Ehrgeizigen und / oder Neugierigen (heh) suchen Sie die Quelle heraus, um zu sehen, was los ist:

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

Ich vermute, dass dies mit dem Heben von Variablen und Funktionen zu tun hat. JavaScript bringt alle Variablen- und Funktionsdeklarationen an den Anfang der Funktion, in der sie definiert sind. Weitere Informationen finden Sie hier: http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

Ich wette, Chrome ruft den Haltepunkt mit der Variablen auf, die für den Bereich nicht verfügbar ist, da die Funktion nichts anderes enthält. Das scheint zu funktionieren:

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

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

Wie das:

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

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

Hoffe das und / oder der obige Link hilft. Dies sind meine Lieblings-SO-Fragen, übrigens :)