How to “break on property change” in a web browser ?

If you need to run a debugger to find a place where some property is changed you can redefine this property as a function and add 'debugger' line


For example:

// There you will be able to find a place
// where 'document.getElementById('qty').value' is changed
(

function(obj){
//    var obj = document.getElementById('qty');

    obj._value = obj.value;

    Object.defineProperty(obj, 'value', {
        get: function () {
            return obj._value;
        },

        set: function (value) {
            debugger; // sets breakpoint
            obj._value = value;
        }
    });
}
)(document.getElementById('qty'))