Ответ 1
Мне пришлось отлаживать некоторые особенно неприятные проблемы с Javascript, вызванные невиданной причиной моей работы. Знание полной глубины инструментов разработчика, таких как Chrome, безусловно, полезно. Это, несомненно, занимает немного творчества, чтобы найти места, которые могут быть причиной проблемы, но несколько советов:
Отслеживание прослушивателей событий
В представлении Chrome Elements попробуйте проверить элемент (щелкните правой кнопкой мыши, проверьте); затем в правой части окна разработчика прокрутите вниз до "Слушатели событий". Здесь вы можете посмотреть, какие файлы кода подключили событие. Часто это просто укажет вам на среднюю структуру из действительно коварного кода, который вы ищете, но иногда он укажет вам в правильном направлении.
Ловушка модификации DOM
Многие из нежелательных эффектов, которые я вижу, связаны с тем, что что-то меняет какое-то значение или атрибут на той странице, которую я не хочу. В любое время это происходит, вы можете щелкнуть правой кнопкой мыши по элементу (в представлении Elements) и сказать "Break on..." и конкретный сценарий, который вы ищете. Когда Chrome затем ударяет точку останова, вы можете смотреть вниз в Stack Trace, пока не найдете что-то узнаваемое, которое не должно вызываться.
EDIT после достижения десяти голосов!
Ловушка модификации объекта JS
Если изменение, которое вас интересует, является внутренним кодом, а не пользовательским интерфейсом, все становится сложнее. Что подразумевается под этим сценарием, так это то, что вы знаете где-то в коде, что-то невероятно раздражает, как происходит следующее.
company.data.myObject.parameter = undefined;
В этой ситуации вы знаете, что myObject - это все тот же объект, но он изменяется, возможно, непреднамеренно. Для этого я часто вставляю следующий бит кода, иногда просто через консоль разработчика в какой-то момент, прежде чем произойдет изменение.
Object.defineProperty(company.data.myObject, 'parameter', {
set: (val) => {
debugger;
}
});
Это включает функцию стрелки - вы используете это только для отладки, и Chrome поддерживает ее, поэтому также могут сохранять нажатия клавиш. Что это будет сделано, это заморозить ваш отладчик, как только какая-то строка кода попытается изменить свойство myObject "parameter". Вам необязательно иметь глобальную ссылку на переменную, если вы можете запустить эту строку кода из предыдущей точки останова, которая будет иметь данный объект в локалях.
В противном случае, если все, с чем я начинаю работать, это код HTML, и я хочу привязать его к Javascript-коду, я часто буду искать идентификационные функции, такие как элементы "id", и искать все JS файлы в моем для него. Обычно я могу достичь этого довольно быстро.