Chrome hata ayıklayıcısı neden kapalı yerel değişkenin tanımsız olduğunu düşünüyor?

Bu kodla:

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

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

Bu beklenmedik sonucu alıyorum:

Kodu değiştirdiğimde:

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

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

Beklenen sonucu alıyorum:

Ayrıca, evaliç işlev içinde herhangi bir çağrı varsa, değişkenime yapmak istediğim gibi erişebilirim (ne ilettiğim önemli değil eval).

Bu arada, Firefox dev araçları her iki durumda da beklenen davranışı verir.

Hata ayıklayıcının Firefox'tan daha az uygun davrandığı Chrome'da ne var? Bu davranışı 41.0.2272.43 beta (64-bit) sürümüne kadar bir süredir gözlemledim.

Chrome'un javascript motoru işlevleri mümkün olduğunca "düzleştirir" mi?

İkinci bir değişken eklemek İlginçtir eğer bir iç fonksiyonu başvurulan, xdeğişken hala tanımlanmamış.

Etkileşimli bir hata ayıklayıcı kullanırken genellikle kapsam ve değişken tanımlamalı tuhaflıklar olduğunu anlıyorum, ancak bana öyle geliyor ki, dil spesifikasyonuna dayanarak bu tuhaflıklar için "en iyi" bir çözüm olmalı. Bunun Chrome'un Firefox'tan başka optimizasyondan kaynaklanıp kaynaklanmadığını merak ediyorum. Ayrıca bu optimizasyonların geliştirme sırasında kolayca devre dışı bırakılıp bırakılamayacağı (belki geliştirici araçları açıkken devre dışı bırakılmaları gerekir?).

Ayrıca, bunu kesme noktalarının yanı sıra debuggerifade ile de çoğaltabilirim .

Tam olarak sorduğunuz şeyle ilgili bir v8 sorun raporu buldum .

Şimdi, bu sorun raporunda söylenenleri özetlemek için ... v8 yığındaki bir işlev için yerel olan veya yığın üzerinde yaşayan bir "bağlam" nesnesindeki değişkenleri saklayabilir . İşlev, bunlara başvuran herhangi bir iç işlev içermediği sürece yığın üzerinde yerel değişkenler atar. Bu bir optimizasyon . Herhangi bir iç işlev yerel bir değişkene başvuruyorsa, bu değişken bir bağlam nesnesine (yani yığın yerine yığın üzerine) konur. Özel durum eval: iç işlev tarafından çağrılırsa, tüm yerel değişkenler bağlam nesnesine konur.

Bağlam nesnesinin nedeni, genel olarak bir iç işlevi dış işlevden döndürebilmeniz ve daha sonra dış işlev koşarken var olan yığının artık kullanılamayacağıdır. Bu nedenle, iç işlevin eriştiği her şey dış işlevden sağ kalmalı ve yığın yerine yığın üzerinde yaşamalıdır.

Hata ayıklayıcı, yığında bulunan değişkenleri denetleyemez. Hata ayıklamada karşılaşılan sorunla ilgili olarak, bir Proje Üyesi şunları söylüyor :

Düşünebildiğim tek çözüm, devtools ne zaman açık olursa, tüm kodu deopt edip zorunlu bağlam tahsisi ile yeniden derleyeceğimizdir. Bu, devtools etkinken performansı önemli ölçüde geriledi.

Aşağıda, "herhangi bir iç işlev değişkene başvuruyorsa, onu bir bağlam nesnesine koy" örneğine bir örnek verilmiştir. Bunu erişmek mümkün olacak çalıştırırsanız xde debuggerolsa açıklamada xsadece kullanılan foofonksiyonu, asla denir !

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

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

  function bar() {
    debugger;
  };

  bar();
}
baz();

@ Louis gibi dedi v8 optimizasyon neden oldu. Çağrı yığınını, bu değişkenin görülebileceği çerçeveye taşıyabilirsiniz:

Veya yerine debuggersahip

eval('debugger');

eval geçerli yığın deopt edecek

Bunu nodejslerde de fark ettim. Ben inanıyorum (ve bu sadece bir tahmin olduğunu itiraf) kod derlendiğinde, xiçinde görünmüyorsa , kapsamı içinde kullanılabilir baryapmaz . Bu muhtemelen biraz daha verimli hale getirir; Sorun birisi hiç olmasa bile unuttum (veya umursamadı) 'dir içinde , hata ayıklayıcı çalıştırabilir ve dolayısıyla hala erişime gerek karar verebilirsiniz içeriden .xbarxbarxbar

Vay canına, gerçekten ilginç!

Diğerlerinin de belirttiği gibi, bunun ilgili olduğu scope, ancak daha spesifik olarak ilişkili olduğu görülmektedir debugger scope. Enjekte edilen komut dosyası geliştirici araçlarında değerlendirildiğinde, ScopeChainbazı tuhaflıklarla sonuçlanan (müfettiş / hata ayıklayıcı kapsamına bağlı olduğu için) a'nın olduğu anlaşılıyor. Gönderdiğiniz öğelerin bir varyasyonu şudur:

(DÜZENLE - aslında, bunu orijinal sorunuzda söylüyorsunuz, evet , benim hatam! )

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

Hırslı ve / veya meraklı için, neler olup bittiğini görmek için kaynağı dışarı çıkarın (heh):

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

Bunun değişken ve fonksiyon kaldırma ile ilgili olduğundan şüpheleniyorum. JavaScript, tüm değişken ve işlev bildirimlerini tanımlandıkları işlevin üstüne getirir. Daha fazla bilgi için: http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/

Eminim Chrome, işlevde başka bir şey olmadığı için değişkenin kapsamı için kullanılamayan kesme noktasını çağırıyor. Bu işe yarıyor gibi görünüyor:

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

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

Bunun gibi:

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

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

Umarım ve / veya yukarıdaki bağlantı yardımcı olur. Bunlar benim en sevdiğim SO soruları, BTW :)