Tại sao trình gỡ lỗi Chrome nghĩ rằng biến cục bộ đóng không được xác định?

Với mã này:

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

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

Tôi nhận được kết quả bất ngờ này:

Khi tôi thay đổi mã:

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

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

Tôi nhận được kết quả mong đợi:

Ngoài ra, nếu có bất kỳ lệnh gọi nào evalbên trong hàm bên trong, tôi có thể truy cập vào biến của mình như tôi muốn làm (không quan trọng tôi chuyển đến cái gì eval).

Trong khi đó, các công cụ dev của Firefox đưa ra hành vi dự kiến ​​trong cả hai trường hợp.

Có chuyện gì với Chrome mà trình gỡ lỗi hoạt động kém thuận tiện hơn Firefox? Tôi đã quan sát hành vi này một thời gian, lên đến và bao gồm cả Phiên bản 41.0.2272.43 beta (64-bit).

Có phải công cụ javascript của Chrome "làm phẳng" các chức năng khi có thể?

Thật thú vị nếu tôi thêm một biến thứ hai được tham chiếu trong hàm bên trong, xbiến vẫn không được xác định.

Tôi hiểu rằng thường có các quirks có phạm vi và định nghĩa biến khi sử dụng trình gỡ lỗi tương tác, nhưng đối với tôi, dựa trên đặc tả ngôn ngữ nên có một giải pháp "tốt nhất" cho các quirks này. Vì vậy, tôi rất tò mò nếu điều này là do Chrome tối ưu hóa hơn Firefox. Và cũng có thể dễ dàng vô hiệu hóa các tối ưu hóa này trong quá trình phát triển hay không (có lẽ chúng nên bị vô hiệu hóa khi các công cụ dev được mở?).

Ngoài ra, tôi có thể tái tạo điều này với các điểm dừng cũng như debuggertuyên bố.

Tôi đã tìm thấy một báo cáo vấn đề v8 chính xác về những gì bạn đang hỏi.

Bây giờ, Để tóm tắt những gì được nói trong báo cáo vấn đề đó ... v8 có thể lưu trữ các biến cục bộ cho một hàm trên ngăn xếp hoặc trong một đối tượng "bối cảnh" nằm trên heap. Nó sẽ phân bổ các biến cục bộ trên ngăn xếp miễn là hàm không chứa bất kỳ hàm bên trong nào đề cập đến chúng. Nó là một tối ưu hóa . Nếu bất kỳ hàm bên trong nào đề cập đến một biến cục bộ, biến này sẽ được đặt trong một đối tượng bối cảnh (tức là trên heap thay vì trên stack). Trường hợp evalđặc biệt: nếu nó được gọi bởi một hàm bên trong, tất cả các biến cục bộ được đặt trong đối tượng bối cảnh.

Lý do cho đối tượng bối cảnh là nói chung, bạn có thể trả về một hàm bên trong từ hàm ngoài và sau đó ngăn xếp tồn tại trong khi hàm ngoài chạy sẽ không còn khả dụng nữa. Vì vậy, bất cứ thứ gì mà hàm bên trong truy cập phải tồn tại ở hàm ngoài và sống trên heap chứ không phải trên stack.

Trình gỡ lỗi không thể kiểm tra các biến đó trên ngăn xếp. Liên quan đến vấn đề gặp phải khi gỡ lỗi, một Thành viên Dự án cho biết :

Giải pháp duy nhất tôi có thể nghĩ đến là bất cứ khi nào devtools được bật, chúng tôi sẽ mở lại tất cả mã và biên dịch lại với phân bổ ngữ cảnh bắt buộc. Điều đó sẽ hồi quy đáng kể hiệu năng với devtools được kích hoạt mặc dù.

Đây là một ví dụ về "nếu bất kỳ hàm bên trong nào tham chiếu đến biến, hãy đặt nó vào một đối tượng ngữ cảnh". Nếu bạn chạy nó, bạn sẽ có thể truy cập xvào debuggercâu lệnh mặc dù xchỉ được sử dụng trong foohàm, cái này không bao giờ được gọi !

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

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

  function bar() {
    debugger;
  };

  bar();
}
baz();

Giống như @Louis nói nó gây ra bởi tối ưu hóa v8. Bạn có thể di chuyển ngăn xếp cuộc gọi đến khung nơi biến này hiển thị:

Hoặc thay thế debuggerbằng

eval('debugger');

eval sẽ mở ra chunk hiện tại

Tôi cũng đã nhận thấy điều này trong nodejs. Tôi tin rằng (và tôi thừa nhận đây chỉ là dự đoán) rằng khi mã được biên dịch, nếu xkhông xuất hiện bên trong bar, nó sẽ không xkhả dụng trong phạm vi bar. Điều này có lẽ làm cho nó hiệu quả hơn một chút; vấn đề là ai đó quên (hoặc không quan tâm) mà thậm chí nếu không có xtrong bar, bạn có thể quyết định để chạy các chương trình gỡ rối và do đó vẫn cần phải truy cập xtừ bên trong bar.

Wow, thực sự thú vị!

Như những người khác đã đề cập, điều này dường như có liên quan đến scope, nhưng cụ thể hơn, liên quan đến debugger scope. Khi tập lệnh được chèn được đánh giá trong các công cụ dành cho nhà phát triển, nó dường như xác định mộtScopeChain , điều này dẫn đến một số điều khó hiểu (vì nó bị ràng buộc với phạm vi của trình kiểm tra / trình gỡ lỗi). Một biến thể của những gì bạn đã đăng là đây:

(EDIT - thực sự, bạn đề cập đến điều này trong câu hỏi ban đầu của bạn, yike, xấu của tôi! )

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

Đối với những người tham vọng và / hoặc tò mò, hãy tìm ra nguồn để xem điều gì đang xảy ra:

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

Tôi nghi ngờ điều này có liên quan đến biến và chức năng cẩu. JavaScript đưa tất cả các khai báo biến và hàm lên trên cùng của hàm mà chúng được xác định. Thông tin thêm ở đây: http://jamesallardice.com/explained-feft-and-variable-ho hiện-in-javascript /

Tôi cá rằng Chrome đang gọi điểm dừng với biến không khả dụng trong phạm vi vì không có gì khác trong hàm. Điều này dường như làm việc:

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

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

Như thế này:

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

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

Hy vọng điều này, và / hoặc các liên kết ở trên giúp. Đây là loại câu hỏi SO yêu thích của tôi, BTW :)