Điểm dừng về thay đổi tài sản

Firebug for Firefox có một tính năng hay, được gọi là "Phá vỡ thay đổi thuộc tính", nơi tôi có thể đánh dấu bất kỳ thuộc tính nào của bất kỳ đối tượng nào và nó sẽ dừng thực thi JavaScript ngay trước khi thay đổi.

Tôi đang cố gắng đạt được điều tương tự trong Google Chrome và tôi không thể tìm thấy chức năng trong trình gỡ lỗi Chrome. Làm cách nào để làm điều này trong Google Chrome?

Nếu bạn không bận tâm đến việc gây rối với nguồn, bạn có thể xác định lại tài sản với một người truy cập.

// original object
var obj = {
    someProp: 10
};

// save in another property
obj._someProp = obj.someProp;

// overwrite with accessor
Object.defineProperty(obj, 'someProp', {
    get: function () {
        return obj._someProp;
    },

    set: function (value) {
        debugger; // sets breakpoint
        obj._someProp = value;
    }
});

Chỉnh sửa 2016.03: Object.observekhông dùng nữa và bị xóa trong Chrome 50

Chỉnh sửa 2014.05: Object.observeđã được thêm vào Chrome 36

Các tàu Chrome 36 có Object.observetriển khai riêng có thể được tận dụng tại đây:

myObj = {a: 1, b: 2};
Object.observe(myObj, function (changes){
    console.log("Changes:");
    console.log(changes);
    debugger;
})
myObj.a = 42;

Nếu bạn chỉ muốn tạm thời, bạn nên lưu trữ gọi lại trong một biến và gọi Object.unobservekhi hoàn tất:

myObj = {a: 1, b: 2};
func = function() {debugger;}
Object.observe(myObj, func);
myObj.a = 42;
Object.unobserve(myObj, func);
myObj.a = 84;

Lưu ý rằng khi sử dụng Object.observe, bạn sẽ không được thông báo khi bài tập không thay đổi bất cứ điều gì, ví dụ nếu bạn đã viết myObj.a = 1.

Để xem ngăn xếp cuộc gọi, bạn cần bật tùy chọn "async call stack" trong Dev Tools:

Câu trả lời gốc (2012/07):

Một console.watchbản phác thảo theo đề xuất của @katspaugh:

var console = console || {}; // just in case
console.watch = function(oObj, sProp) {
   var sPrivateProp = "$_"+sProp+"_$"; // to minimize the name clash risk
   oObj[sPrivateProp] = oObj[sProp];

   // overwrite with accessor
   Object.defineProperty(oObj, sProp, {
       get: function () {
           return oObj[sPrivateProp];
       },

       set: function (value) {
           //console.log("setting " + sProp + " to " + value); 
           debugger; // sets breakpoint
           oObj[sPrivateProp] = value;
       }
   });
}

Cầu nguyện:

console.watch(obj, "someProp");

Khả năng tương thích:

• Trong Chrome 20, bạn có thể dán trực tiếp vào Dev Tools khi chạy!
• Để hoàn thiện: trong Fireorms 1.10 (Firefox 14), bạn phải đưa nó vào trang web của mình (ví dụ: qua Fiddler nếu bạn không thể chỉnh sửa nguồn theo cách thủ công); thật đáng buồn, các chức năng được xác định từ Fireorms dường như không bị debuggerhỏng (hoặc đó là vấn đề về cấu hình? vui lòng sửa lại cho tôi sau đó), nhưng vẫn console.loghoạt động.

Biên tập:

Lưu ý rằng trong Firefox, console.watchđã tồn tại, do không chuẩn của Firefox Object.watch. Do đó trong Firefox, bạn có thể theo dõi các thay đổi nguyên bản:

>>> var obj = { foo: 42 }
>>> obj.watch('foo', function() { console.log('changed') })
>>> obj.foo = 69
changed
69

Tuy nhiên, điều này sẽ sớm bị xóa (cuối năm 2017) .

Có một thư viện cho việc này: BreakOn ()

Nếu bạn thêm nó vào các công cụ phát triển của Chrome dưới dạng đoạn trích (nguồn -> đoạn trích -> nhấp chuột phải -> mới -> dán mục này ) , bạn có thể sử dụng nó bất cứ lúc nào.

Để sử dụng nó, hãy mở các công cụ dev và chạy đoạn trích. Sau đó để ngắt khi myObject.myPropertyđược thay đổi, hãy gọi nó từ dev-console:

breakOn(myObject, 'myProperty');

Bạn cũng có thể thêm thư viện vào bản dựng gỡ lỗi của dự án để bạn không cần gọi breakOnlại mỗi khi bạn làm mới trang.

Điều này cũng có thể được thực hiện bằng cách sử dụng đối tượng Proxy mới có mục đích chính xác là: chặn việc đọc và ghi vào đối tượng được bao bọc bởi Proxy. Bạn chỉ cần bọc đối tượng bạn muốn quan sát vào Proxy và sử dụng đối tượng được bọc mới thay vì đối tượng ban đầu.

Thí dụ:

const originalObject = {property: 'XXX', propertyToWatch: 'YYY'};
const watchedProp = 'propertyToWatch';
const handler = {
  set(target, key, value) {
    if (key === watchedProp) {
      debugger;
    }
    target[key] = value;
  }
};
const wrappedObject = new Proxy(originalObject, handler);

Bây giờ, sử dụng WraObject nơi bạn sẽ cung cấp gốcObject thay vào đó và kiểm tra ngăn xếp cuộc gọi khi nghỉ.

function debugProperty(obj, propertyName) {
  // save in another property
  obj['_' + propertyName] = obj[propertyName];

  // overwrite with accessor
  Object.defineProperty(obj, propertyName, {
    get: function() {
      return obj['_' + propertyName];
    },

    set: function(value) {
      debugger; // sets breakpoint
      obj['_' + propertyName] = value;
    }
  });
}

Quyết định viết phiên bản riêng của giải pháp này, lưu nó vào một đoạn trong DevTools của Chrome và gói nó trong IIFE hỗ trợ cả Nút và Trình duyệt. Đồng thời thay đổi người quan sát sử dụng biến phạm vi thay vì thuộc tính trên đối tượng, sao cho không có khả năng xảy ra xung đột tên và bất kỳ mã nào liệt kê các khóa sẽ không "nhìn thấy" khóa riêng "mới được tạo:

(function (global) {
  global.observeObject = (obj, prop) => {
    let value

    Object.defineProperty(obj, prop, {
      get: function () {
        return value
      },

      set: function (newValue) {
        debugger
        value = newValue
      },
    })
  }
})(typeof process !== 'undefined' ? process : window)

Chrome có tính năng này tích hợp trong các phiên bản mới nhất https://developers.google.com/web/updates/2015/05/view-and-change-your-dom-breakpoint .

Vì vậy, không cần thêm các thư viện và giải pháp tùy chỉnh, chỉ cần nhấp chuột phải vào phần tử DOM trong trình kiểm tra và chọn 'Break on' -> 'sửa đổi thuộc tính' và đó là nó.