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

Question

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

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

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

Answer 1

DOM change точки останова получили твое возвращение.

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

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

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

Надеюсь это поможет.