Остановить отладчик в веб-браузере при изменении значения объекта

Question

У меня есть <input type="hidden">. Мне нужно увидеть, когда это изменение ценности. У меня есть много файлов JavaScript, изменяющих его значение.

Я могу просто пойти везде, где значения изменены, и добавить оператор debugger, но это займет много времени. Я узнал о Object.watch(), но он выполняет только определенную функцию после значение изменилось, хотя я хочу видеть , где оно было изменено кодом, а не , когда.

Есть ли способ достичь этого, может быть, вывести номер строки и имя файла JavaScript или остановить отладчик в веб-браузере?

Answer 1

Контрольные точки замены DOM получили вашу спину.

1. Перейти к Элементы панель Devtools.
2. Найти элемент в панели HTML.
3. Щелкните элемент правой кнопкой мыши.
4. Break On>Изменения атрибута.

Если вам необходимо просмотреть изменения значения элемента тоже, затем щелкните правой кнопкой мыши на родительский элемент и выберите Subtree Модификации.

Answer 2

Следующий код выдаст ошибку Cannot assign to read only property.. (с трассировки стека), который вы можете поймать (или представление Дев инструментов):

'use strict'; 
var o = {a: 29}; 
throwOnChange(o, 'a'); 

// as much code as you like here.. 

o.a++; // this will throw an error 

function throwOnChange(obj, prop) { 
    Object.defineProperty(obj, prop, { 
    value: obj[prop], 
    writable: false 
    }); 
} 

Просто используйте его на input.value аналогично.

Две ноты, хотя:

1. Вы должны 'use strict' для того, чтобы работать, в противном случае было бы просто игнорировать назначение.
2. Пожалуйста, см Object.defineProperty()

Надеется, что это помогает.