¿Por qué el depurador de Chrome cree que la variable local cerrada no está definida?

Con este código:

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

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

Me sale este resultado inesperado:

Cuando cambio el código:

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

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

Obtengo el resultado esperado:

Además, si hay alguna llamada a evalla función interna, puedo acceder a mi variable como quiero hacerlo (no importa a lo que le pase eval).

Mientras tanto, las herramientas de desarrollo de Firefox ofrecen el comportamiento esperado en ambas circunstancias.

¿Qué pasa con Chrome que el depurador se comporta de manera menos conveniente que Firefox? He observado este comportamiento durante algún tiempo, hasta la versión 41.0.2272.43 beta incluida (64 bits).

¿Es que el motor de JavaScript de Chrome "aplana" las funciones cuando puede?

Curiosamente, si agrego una segunda variable a la que se hace referencia en la función interna, la xvariable aún no está definida.

Entiendo que a menudo hay peculiaridades con el alcance y la definición de variables cuando se usa un depurador interactivo, pero me parece que, según la especificación del lenguaje, debería haber una "mejor" solución para estas peculiaridades. Así que tengo mucha curiosidad si esto se debe a la optimización de Chrome más allá de Firefox. Y también si estas optimizaciones pueden deshabilitarse fácilmente durante el desarrollo (¿tal vez deberían deshabilitarse cuando las herramientas de desarrollo están abiertas?).

Además, puedo reproducir esto con puntos de interrupción, así como la debuggerdeclaración.

He encontrado un informe de problema de v8 que trata precisamente de lo que estás preguntando.

Ahora, para resumir lo que se dice en ese informe de problema ... v8 puede almacenar las variables que son locales para una función en la pila o en un objeto de "contexto" que vive en el montón. Asignará variables locales en la pila siempre que la función no contenga ninguna función interna que se refiera a ellas. Es una optimización . Si alguna función interna se refiere a una variable local, esta variable se colocará en un objeto de contexto (es decir, en el montón en lugar de en la pila). El caso de evales especial: si es invocado por una función interna, todas las variables locales se colocan en el objeto de contexto.

La razón del objeto de contexto es que, en general, podría devolver una función interna de la externa y luego la pila que existía mientras se ejecutaba la función externa ya no estará disponible. Entonces, cualquier cosa a la que acceda la función interna debe sobrevivir a la función externa y vivir en el montón en lugar de en la pila.

El depurador no puede inspeccionar aquellas variables que están en la pila. Con respecto al problema encontrado en la depuración, un miembro del proyecto dice :

La única solución que se me ocurre es que cada vez que devtools esté activado, desoptaríamos todo el código y volveríamos a compilar con la asignación de contexto forzada. Sin embargo, eso reduciría drásticamente el rendimiento con devtools habilitado.

Aquí hay un ejemplo de "si alguna función interna se refiere a la variable, póngala en un objeto de contexto". Si ejecuta esto, podrá acceder xa la debuggerinstrucción aunque xsolo se use en la foofunción, que nunca se llama .

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

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

  function bar() {
    debugger;
  };

  bar();
}
baz();

Como @Louis dijo que fue causado por las optimizaciones v8. Puede recorrer la pila de llamadas para enmarcar donde esta variable es visible:

O reemplazar debuggercon

eval('debugger');

eval va a desarmar la porción actual

También he notado esto en nodejs. Creo (y admito que esto es solo una suposición) que cuando se compila el código, si xno aparece dentro bar, no está xdisponible dentro del alcance de bar. Esto probablemente lo hace un poco más eficiente; el problema es que alguien se olvidó (o no le importaba) que incluso si no hay es xen bar, puede decidir ejecutar el depurador y, por tanto, aún es necesario el acceso xdesde el interior bar.

Wow, muy interesante!

Como otros han mencionado, esto parece estar relacionado con scope, pero más específicamente, relacionado con debugger scope. Cuando la secuencia de comandos inyectada se evalúa en las herramientas del desarrollador, parece determinar a ScopeChain, lo que resulta en una peculiaridad (ya que está vinculado al alcance del inspector / depurador). Una variación de lo que publicaste es esta:

(EDITAR: en realidad, mencionas esto en tu pregunta original, ¡ ay, qué mal! )

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

Para los ambiciosos y / o curiosos, busque (heh) la fuente para ver qué sucede:

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

Sospecho que esto tiene que ver con la elevación de variables y funciones. JavaScript lleva todas las declaraciones de variables y funciones a la parte superior de la función en la que se definen. Más información aquí: http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

Apuesto a que Chrome está llamando al punto de ruptura con la variable no disponible para el alcance porque no hay nada más en la función. Esto parece funcionar:

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

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

Como hace esto:

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

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

Espero esto, y / o el enlace de arriba ayuda. Estas son mi tipo favorito de preguntas SO, por cierto :)